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.”