WordPress: Sending Correct HTTP Status Code on Login Failure

For some reason, WordPress will send a 200 HTTP response status code, or OK, when a login attempt has failed. Why not send a 403 status code, which is designed specifically to say you can’t be here, or forbidden, actually. There’s even a better alternative to 403, but stay with me.

I came about this bit of information while reading this post by Konstantin Kovshenin. And was able to confirm it myself by logging into this site incorrectly, as you can see in the featured image above. wp-login.php is returned as 200 OK and is circled in red.

So, as Konstantin suggested, we can use this code to send a proper 403 Forbidden status code on a failed login attempt:

function my_login_failed_403() {
    status_header( 403 );
add_action( 'wp_login_failed', 'my_login_failed_403' )

But why send a 403, which is Forbidden? It’s not truly a forbidden page, as people have a legit reason to be there, even if they can’t remember their password.

So, sending 401 Unauthorized as the HTTP response status code may be even better.

function my_login_failed_401() {
    status_header( 401 );
add_action( 'wp_login_failed', 'my_login_failed_401' );

So, you can use either of those, the first chunk to send a 403 Forbidden response, and the second for sending a 401 Unauthorized response code.

On login failure, send "401 Unauthorized" or "403 Forbidden" HTTP response code?

View Results

Loading ... Loading ...

Either could go in the functions.php file for your theme, or more likely, in your WordPress functionality plugin.

You can find a good list of HTTP response codes at the Mozilla Developer Network site.


Creating A WordPress Functionality Plugin

Keep your customizations in place, like that driftwood up there

A functionality plugin is a WordPress plugin that is specific to your site, and contains the additional functionality you need your site to have. This is a much better option than adding features to your theme’s functions.php file, because it allows you to change themes at will, yet keep your customizations via the plugin.

WPCandy has a great write-up on creating a functionality plugin and does a great job of explaining why you’d want to use one, and also what kind of things belong in a functionality plugin. Here’s one of my favorite pieces from that WPCandy article:

To decide what belongs in a functions.php file and what belongs in a functionality plugin, think long term. Rather than thinking about how your website will look and behave this week, think about how it will look and behave five years from now. With few exceptions, I bet all of our sites will have new and upgraded themes in five years’ time.

If a feature is theme-specific, such as sidebars or menus, is should go into your functions.php file. If the feature interacts with content of any type, it belongs in a functionality plugin.

Creating The Plugin

This piece is so easy, we’re essentially creating our own WordPress plugin. First, create a new folder called functionality-plugin. Create it inside the plugins folder for your WordPress site.

Next, we just need to create the PHP file and save it in the functionality-plugin folder. Your plugin needs to have some specific content in the comments at the top of the file for WordPress to recognize it as a plugin, you can see those in the functionality plugin example below. Our functionality plugin will load a JavaScript file that your site relies on ALL the time, no matter what theme is currently in use.

Plugin Name: Tyler's Functionality Plugin
Description: Everything to run my site.
Version: 1.0
License: GPL
Author: Tyler Longren
Author URI: http://longren.io/

function load_site_scripts() {
    // load javascript
    wp_enqueue_script( 'photo-service-script', 'http://thisphotoservice.com/script.js' );
add_action( 'wp_enqueue_scripts', 'load_site_scripts' );


So, with that, as long as this plugin is enabled, your site will always load that necessary JavaScript file, http://thisphotoservice.com/script.js.

You can safely use that code as a starting point for your own functionality plugin. Just make sure to save that code in the functionality-plugin folder.

The filename doesn’t matter, just make sure to save it with a .php extension. Navigate in your web browser to your WordPress Dashboard, go to Plugins, and enable your plugin just like you would any other plugin. That’s it!

Really, most of what I know about functionality plugins came from Ryan Imel and his article at WPCandy, so a LOT of credit is owed to Ryan.

Do you use a functionality plugin?

View Results

Loading ... Loading ...

There’s this plugin at WordPress.org, too, called Functionality. It’s essentially a plugin for creating a functionality plugin it looks like, but I’m really not sure. Anybody used it before? Comments are open below.


Add HTML5 Support to your WordPress Theme Using Jetpack

A lot of WordPress themes are now built entirely with HTML5. I think Rootdip (previously HTML5Press), was one of the first WordPress themes to utilize many HTML5 elements. Some themes, however, don’t make use of HTML5 at all. WordPress has the ability to allow the use of HTML5 markup for comment forms, comment lists, and search forms.

Your theme has to use add_theme_support( 'html5' ). Much of this was inspired by this post from Konstantin Obenland on ThemeShaper, as was the featured image for this post, heh.

Active Theme Support

This is really easy. All you need to do is call add_theme_support( 'html5' ), essentially. More specifically, in the functions.php file for your theme, add the following.

function prefix_setup() {
    add_theme_support( 'html5', array( 'comment-list', 'search-form', 'comment-form', ) );
add_action( 'after_setup_theme', 'prefix_setup' );

That’s all there is. Your comment lists, comment forms, and search forms will now be marked up with HTML5!

Comment lists, comment forms, and search forms are the only html5 arguments supported currently, it’s possible many different arguments will be added at a later date. It may not be required though.

If you do build support for this into your theme, it’d probably be a good idea to add it in as an option that users can enable or disable at their discretion.


Add Lightbox To All Images Embedded in a WordPress Post

Make every image in a post open in a lightbox

I needed to do this about a year ago, attach rel="lightbox" to every image inside a WordPress post, so that the image would open in a lightbox. The lightbox plugin we were using wasn’t adding rel=”lightbox” to some images for whatever reason, so this was my quick alternative. Turned out to be incredibly simple with WordPress’s add_filter() function.

add_filter() allows developers to hook a function up to a specific filter action. There’s TONS of action and filter hooks available, some are really, really useful. A great introduction to filter and actions hooks can be found at WPCandy or in the WordPress Codex. Smashing WordPress has a quite detailed article, too.

Anyway, as usual, when adding this type of thing to WordPress, drop this code in your theme’s functions.php file to get this working:

function add_lightbox_rel($content) {
       global $post;
       $pattern ="/<a(.*?)href=('|")(.*?).(bmp|gif|jpeg|jpg|png)('|")(.*?)>/i";
       $replacement = '<a$1href=$2$3.$4$5 rel="lightbox" title="'.$post->post_title.'"$6>';
       $content = preg_replace($pattern, $replacement, $content);
       return $content;
add_filter('the_content', 'add_lightbox_rel');

You should be aware that some plugins don’t use rel="lightbox" for activating their lightbox/colorbox overlay. So, if that’s the case, just modify the theme_add_lightbox_rel() function and change rel="lightbox" to rel="whatever-plugin-uses" in the $replacement variable (on line 5).

That’s it! Save your functions.php file and you should have lightboxes on all the images embedded in your post!

Plugin Alternative

If you’d prefer to achieve this with a plugin, I’d suggest jQuery Colorbox. It does a really nice job of grouping gallery images, used for the next and previous links for navigating the gallery images.