New theme in development and is currently live on BuddyCore.com - Please check back often for updates (11/12/16).

Tutorials · WordPress

Modifying WordPress Login

·

Already there exists a robust authentication system inside of WordPress and can be accessed via yoursite.com/wp-login.php or yoursite.com/wp-admin.

To get started let’s create a PHP file that will sit within our theme folder at wp-content/themes/my-theme/. We’ll call this file wp-login.php and include via functions.php which you can add to your theme if it doesn’t already exist. This file automatically runs when a theme is active in a WordPress powered site and is part of the template hierarchy in WordPress.

Inside functions.php let’s include the wp-login.php files.

locate_template('wp-login.php', true, true);

We can use locate_template() function, here is full documentation, the second and third parameters are telling WordPress to first load the file and then secondly only load it one time (that’s all we need).

Instead of the above for clarity, create a file called fns.login.php to signify that this is a function file pertaining to the login area when your theme is active.

Also use require() instead of locate_template() to remove any implication to the type of file being used.

Inside wp-login.php we’ll be doing a few things, let’s get started.

function sc_wp_login_script_style(){
    wp_enqueue_style('sc-app-style', get_bloginfo('template_directory').'/css/wp-login.css', array(), '0.0.1');
}
add_action('login_enqueue_scripts', 'sc_wp_login_script_style');

This function is pretty basic, we give it a name the more ambiguous the better. Inside this function we call wp_enqueue_style() Which accepts 4 parameters at this stage, first a handle for our script or stylesheet, second a full path to the file, we use get_bloginfo() to help us find this, third a list of dependency handles. Later we may decide to make our own style a dependency for something else and that’s why handles are useful. Finally a version number, this is good for testing and pushing to live sites in order to hard refresh assets into live sites. The last thing we do is add this function via the add_action() hook and specifically we make our function run when login_enqueue_scripts is ran. This means we have it available at the login screen.

Moving on, let’s begin to customise the actual form. We’re going to setup another function to change the logo.

function sc_login_logo(){
?>
<style>
    div#login h1 a {
        background-image('path/to/logo.png');
    }
</style>
<?php
}
add_action('login_enqueue_scripts', 'sc_login_logo');

You will have to substitute the path/to/logo.png with your own logo, but I suggest integrating this with the WordPress Customizer where you can upload your own logos via WP-Admin/customize. There will be a tutorial in the future on that.

Next we’ll modify the actual anchor surrounding this logo to point to something other than WordPress.org.

function sc_wp_login_url(){
    return home_url('/');
}
add_filter('login_headerurl', 'sc_wp_login_url');

Another custom function but this time we are filtering existing content, specifically the login_headerurl we are modifying this and returning the sites home page by using the home_url() function. Simple enough.

One more small change we will make to the markup on this page is to change the alt text used by the logo to. Merely to illustrate how to achieve similar things in this manor.

function sc_wp_login_url_title(){
    return get_bloginfo('name');
}
add_filter('login_headertitle', 'sc_wp_login_url_title');

Ok, all done. Now all you need is a stylesheet. Earlier we added that, now let’s make sure we have a file located inside of css/style.css. If you’re using SCSS which I highly recommend you may want to include your app style and include a wplogin.scss as a partial for organisations sake.

Inside the stylesheet you will set out to over write the existing styles printed on the wp-login.php page, this isn’t ideal however it is one way to achieve the desired affect. Below is a list of some selectors you will be targeting.

body.login, div#login, h1, a, p.message, div#login_error, strong, form p label, form p input, br, p.forgetmenot, p.submit input, p#nav

These are just some that are available and you can spend some time getting quite creative with this page, if you followed this tutorial from start to finish you will have a custom login area for WordPress, BuddyPress and BBPress. Tidy.

Leave a Reply

Your email address will not be published. Required fields are marked *

Loading more content...
Minimum Requirements

Your device does not meet the minimum requirements to view this site, please considering increasing your device width to more than 300px.