As a site admin, or a user of the admin area of WordPress you will see a lot of the login page. It does the job for a personal blog, but if the site you are developing is for a client it probably shouldn’t be covered with the WordPress logo and links. These few snippets will help you customise the WordPress login page, and redirect it to a prettier URL. The final code can either be dropped into your functions.php file and work right off the bat, or be put into a plugin for installation in any theme.
WordPress provides several hooks and functions that can be used to completely overhaul the login page, allowing us to change the logo, background, font and colours of the whole page. I will only cover the basics, but with a few adjustments you could make changes such as linking it to the customizer (I will discuss that in another post).
Pretty Login Url
The standard login page for WordPress is www.yourdomain.com/wp-login.php, which for a developer is completely fine. However, explaining to someone who is not tech savvy what to type every time they forget how to get to the login page can be a nuisance.
A solution to this is to add a htaccess rewrite for “wp-login.php” redirecting it to “login”.
<?php // Add rewrite rule and flush on plugin activation
register_activation_hook( __FILE__, 'htaccess_activate' );
function htaccess_activate() {
htaccess_rewrite();
flush_rewrite_rules();
}
// Flush on plugin deactivation
register_deactivation_hook( __FILE__, 'htaccess_deactivate' );
function htaccess_deactivate() {
flush_rewrite_rules();
}
// Create new rewrite rule
add_action( 'init', 'htaccess_rewrite' );
function htaccess_rewrite() {
add_rewrite_rule( 'login/?$', 'wp-login.php', 'top' );
}
?>
To break down the rewrite snippet, the following occurs:
On Activation
Line 2 – When the plugin / theme is activated the htaccess_activate() function is run
Line 4 – It accesses the htaccess_rewrite() function
Line 16 – The WordPress function add_rewrite_rule is called
The add_rewrite_rule() function is used add information to the websites .htaccess file. In this instance ‘login/?$’ is the requested URL, the one we want the user to be directed too. .htaccess expressions can be confusing but to make sense of this line I will briefly touch on it.
“login/” – This is the URL ending you wish to use
“?” – This term means that the character directly before it (the “/” ) does not have to be there, it will work either way.
“$” – This signals the end of the string
For more htaccess expressions see: https://httpd.apache.org/docs/2.4/rewrite/intro.html
The second argument in add_rewrite_rule() is the redirect. In this case it is “wp-login.php”, and finally “top” which means we want to put the htaccess code at the top of the htaccess file.
Line 5 – It accesses the built in WordPress function flush_rewrite_rules()
flush_rewrite_rules() is used to remove all the htaccess code, and re-write it with the new code. This can be used for adding or removing, as shown in this example. It should only be used when activating or deactivating and plugin or theme. It is very server heavy and should never be used on the init hook.
For more info on flush_rewrite_rules() go to https://codex.wordpress.org/Function_Reference/flush_rewrite_rules
On De-Activation
Line 11 – When the plugin / theme is de-activated the htaccess_deactivate() function is run
Line 14 – It accesses the built in WordPress function flush_rewrite_rules()
Custom Logo and Link
Changing the logo
<?php //Remove login wordpress link
add_filter('login_headerurl', 'remove_wordpress_login_link');
function remove_wordpress_login_link(){
return ""; // your URL here
}
?>
The login_headerurl is used to filter the URL of the logo on the login page. The default links to wordpress.org but we can alter it as shown above. Just add a new URL on line 6.
For more info on login_headerurl go to: https://codex.wordpress.org/Plugin_API/Filter_Reference/login_headerurl
Add Custom Link
The following code adds a link below the login section using the login_footer action. This could be used to link to extra documentation, or your own site to ensure your clients are always reminded of you.
The login_footer action adds code immediately below the default login screen.
<?php
function login_footer_link() { ?>
<p style="text-align: center; margin-top: 1em;">
<a style="color: #999; text-decoration: none;" href="http://yourdomain.com">Click here for more information
</a>
</p>
<?php }
add_action('login_footer','login_footer_link');
?>
Making it pretty
Heres were you can get your design face on, The CSS below is fairly self-explanatory, I used Google Chromes Inspect console (ctrl + shft + i) to target the specific elements on the page and style them as needed.
The function login_enqueue_scripts() was used to target the scripts specifically on the login page. This should be used rather than including your CSS in the main CSS file, as that file is not loaded on the login page.
<?php
// add a new logo to the login page
function login_logo_fix() {
?>
<style type="text/css">
html, body {
background: #fff;
}
.login #login h1 {
padding: 0;
}
.login #login h1 a {
background-image: url( '<?php get_template_directory_uri();?>/login/logo.png') !important; );
background-size: contain;
width: 70%;
margin: 0 15%;
height: 60px;
}
.login #nav a,
.login #backtoblog a {
color: #fff;
}
.login #nav a:hover,
.login #backtoblog a:hover {
color: #0075c9;
}
</style>
<?php
}
add_action( 'login_enqueue_scripts', 'login_logo_fix' );
?>
For more information on login_enqueue_scripts() go to: https://codex.wordpress.org/Plugin_API/Action_Reference/login_enqueue_scripts
To download the full code as a plugin (the CSS will need editing, but its a start):
https://github.com/justlikethisdesign/wp-customlogin.git
I hope this has helped you understand the basics of a few functions, as well as giving you a start on customising your login page. Let me know in the comments below if you have any queries.
