The WordPress login page is well done – it’s easy to use and looks good on all screen sizes. But what if you are building a website for a client who wants users to see their logo when they log in? Or do you have a multi-site and want users to see your branding? Luckily, you can customize the look of the login page quite simply.
See also:
Customizing the WordPress Admin Panel
Setting up the WordPress Dashboard for your clients
How to set up WordPress for a client: the nuances of the Management Console
Changing the Design of the WordPress Dashboard Using the DP Dashboard Plugin
Removing Menu Items from the WordPress Dashboard
In this tutorial, I created a plugin for this purpose. The advantage of using the plugin is that you can add it to any WordPress site you develop to add your own design and logo.
Dedicated hosting for WordPress sites!
| Download sources |
This is what our end result will look like:
Customizing the WordPress Login Page
The steps we will demonstrate in this guide are:
Adding your own logo
Authorization page styling – logo, links and buttons
What you will need to complete this guide
To complete this guide, you will need:
Installed WordPress
Access your site’s plugins folder to add a new plugin
Text editor to create a plugin
Plugin setup
Let’s start by adding a plugin description:
Plugin Name: WPTutsPlus Customize the Admin Part 1 – Login Screen
Plugin URI:
Description: This plugin supports the tutorial in wptutsplus. It customizes the WordPress login screen.
Version: 1.0
Author: Rachel McCollin
Author URI: http://rachelmccollin.com
License: GPLv2
*/
Step 1: Adding Your Own Logo
Adding your or your client’s logo to the login page and giving your WordPress site a professional look is easy.
First create a media folder inside your plugin folder, upload your logo to it.
In the plugin file (or functions.php file), add the following function, attach it to the login_enqueue_scripts hook:
// add a new logo to the login page
function wptutsplus_login_logo() { ?>
<style type=”text/css”>
.login #login h1 a {
background-image: url( <?php echo plugins_url( ‘media/cd-logo-directing-fullcol.png’ , __FILE__ ); ?> );
}
</style>
<?php}
add_action( ‘login_enqueue_scripts’, ‘wptutsplus_login_logo’ );
?>
This will add your logo to the login page, like in this picture:
Customizing the WordPress Login Page
Step 2: Style the login page
In addition to adding a logo, you can also change its size, add style to other elements of the authorization window.
Logo style
The logo above is slightly flattened in length. I am going to resize the image. Edit your plugin code so it looks like this:
// add a new logo to the login page
function wptutsplus_login_logo() { ?>
<style type=”text/css”>
.login #login h1 a {
background-image: url( <?php echo plugins_url( ‘media/cd-logo-directing-fullcol.png’ , __FILE__ ); ?> );
background-size: 300px auto;
height: 70px;
}
</style>
<?php}
add_action( ‘login_enqueue_scripts’, ‘wptutsplus_login_logo’ );
?>
The height value will depend on the aspect ratio of your logo. Using 300px and auto for the background-size property is necessary so that the logo fits the width of the login field, the proportions will be preserved, and the height value will be appropriate for your logo.
Link style
All text on the login page is in the form of links, so it’s the link style that you need to add. Edit your code so it looks like this:
// add a new logo to the login page
function wptutsplus_login_logo() { ?>
<style type=”text/css”>
.login #login h1 a {
background-image: url( <?php echo plugins_url( ‘media/cd-logo-directing-fullcol.png’ , __FILE__ ); ?> );
background-size: 300px auto;
height: 70px;
}
.login #nav a, .login #backtoblog a {
color: #27adab !important;
}
.login #nav a:hover, .login #backtoblog a:hover {
color: #d228bc !important;
}
</style>
<?php}
add_action( ‘login_enqueue_scripts’, ‘wptutsplus_login_logo’ );
?>
This code will give me links in my logo colors. Link color is turquoise, turns pink on hover:
Customizing the WordPress Login Page
Please note that since the main colors of my logo are in blue tones, they are suitable for links. If your logo is a completely different color, you may not want to change the link color for usability reasons.
Button style
The final element of the authorization window is the Login button, which is still blue. Let’s change this.
I now have a completely redesigned login page to my liking, which means that when my clients or users log in, they see a page that matches my brand, which makes the overall look of the site more professional.
Setting up a WordPress login page is quite simple and can greatly improve the experience it gives to incoming customers and users. By modifying the code above to suit your needs and your brand, you can quickly create a very professional login page.
How To Speed Up WordPress
Website loading speed is very important for every blog or website, especially for those who use shared hosting – the cheapest hosting option. This article will show you some tricks with .htaccess and header.php that will increase your website loading speed by 50-70%.
Web developers are paying more and more attention to performance, which is one of the hottest topics in web development right now. Download speed is more than just a parameter. Speed is the most important parameter. If your website or blog is slow, people won’t use it.
What does speed mean for large Internet projects:
for Google, a 500 millisecond increase in load time results in a 20% decrease in searches.
for Yahoo, a 400 millisecond increase in load time results in a 5-9% increase in the number of people who click “back” before the page has loaded.
for Amazon, a 100 millisecond increase in load time results in a 1% drop in sales.
Google, in an effort to make the web faster, wrote in a blog post that “we have decided to factor site speed into our search rankings.”