Skip to main content
Simple WordPress Login Page

Simple WordPress Custom Login Page

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.

Read More

WordPress Cover Image

WordPress Code Snippets

When I first started building themes with WordPress, I spent a lot of time looking at other programmer’s code. I would find a snippet, pull it apart and learn from it. Rinse and repeat. I learnt a lot from this process, and still do. Other people will always be finding solutions to problems you have, or problems similar.

 

I have decided to start posting specific snippets of code that I use time and time again for other people to get some use out of them, and learn as I did.

 

All these snippets will be fully documented, so as to provide as much understanding as possible. I will also try to explain how they can be used, give ideas on how to adapt them, and link to other websites that I use myself.

Read More

spoon-plugin

Turbo VM Extension injecting code

For those of you who have found the same thing. Enter Turbo VM Extension.

 

I was in the latter stages of developing a WordPress theme when I found a strange section of code inserted at the bottom of the page. I originally thought it was a mistake in my code as there was a large white space at the bottom of the page until I used the console log on Google Chrome and noticed the following:

 

<div id=”spoon-plugin-kncgbdglledmjmpnikebkagnchfdehbm-2″ style=”display:none”></div>

 

Upon Googling this issue I found the snippet turned up in a few places. At the bottom of a piece of code on Github, bottom of forum signatures, and inside the code of other WordPress themes. Always at the bottom.

 

That day I had downloaded Turbo.net Launcher, a browser emulator. To create a login for the launcher I used spoon.net (seeing the connection now?). Turbo VM Extension is a Google Chrome Extension. When it is switched on, for some reason it injects itself into specific websites.

 

For now I have disabled the extension whilst I research it a little more…

Read More