How to Design a Custom WordPress Login Page for Clients

When we design a new website for a client, we always try to make it as easy as possible to change the content. Most clients have regular updates to their businesses. Much as they offer new products or services, hire new team members, or promote special offers or discounts their Goals and Objectives for their website may also evolve hence the need to keep their presence current and relevant for the audience. All of this can happen long after we’ve handed over their website.? 

However, we find most clients don’t update their websites regularly. That means they aren’t maximizing the incredible digital real estate we’ve designed for them. Thus their website quickly becomes out of date and no longer relevant. 

There are a few reasons for this. Clients often feel like they don’t know where to begin when they’re adding a blog post or new product listing. For example when they come to the standard WordPress login page on the back end of their site, they don’t feel confident that they can use the software. Instead of feeling as if the tool is theirs, it seems like it belongs to someone else. 

Why Brand the Login Page of a Website? 

Some people may ask: why bother customizing the back-end of the website? Branding is for customers and web browsers, not users, right?? 

When we design websites, it’s not just the end-user experience we consider. There’s also an end-user in the back end of the site.? 

To help clients feel confident when logging in and making changes to their website, we design custom WordPress login pages. This creates a sense of branding and ownership over the website. Instead of worrying about using a complex system they don’t understand, clients can log in with confidence. They’ll feel as if the entire platform is customized for their business. 

Let’s look at an example of a retail business that sells women’s clothing. We’ve designed the website to be engaging, attract customers, and create sales.? 

However, the clients haven’t updated their website since we created it in the summer. Now that it’s autumn, there’s an entirely new line of clothing to sell. All the products need to be updated in the content management system. 

When we approach the clients to ask about updates, they tell us staff have moved on and none of their staff are familiar with WordPress. Outcome being no one is comfortable with making the changes.? 

So we: 

1. create a better user experience for every contributor to the site by creating a customized user login page 

2. Deliver additional training to their new staff as part of their support package with Inspire 

Customizing your WordPress login page also comes with other benefits. It can help boost your site’s overall security.? 

What Types of Changes Can Be Made to the Login Page? 

The typical WordPress login page is bland and simple. Although it works well and serves one purpose –?logging in –?it doesn’t add anything to the overall user experience.? 

It functions as a “white label” page, which means it’s easy to customize and make your own. A few easy changes can update the entire look of the page. You can make changes to colour schemes, background colours, fonts, sizes, panels, and more.?? 

How to Customize the WordPress Access Form 

There are two ways to customize a WordPress login page: manually or using plugins. We’re going to demonstrate how to manually code the page because it gives you more control over the changes you make. 

The manual steps for creating a custom login on a WordPress site require you to make changes to some of the theme files. However, it’s a fairly straightforward process that we can walk you through step-by-step, even if you don’t have a lot of experience with coding.? 

Step One: Use the Child Theme in WordPress 

When you’re using WordPress, be sure to install the child theme at the same time you install main theme files. The child theme files are usually part of the WordPress theme’s download files. It will likely be a file named “theme-child.” So, if you were using the Divi theme, you might find the file as “Divi-child.” 

Installing the child theme at the outset will help ensure all changes are saved when the main theme is updated. 

Step Two: Connect to the Server and Access the WordPress Files 

Next, you’ll need to access the FTP server. Details for the FTP server login (like host url, username and password) are provided by your hosting service provider. 

At Inspire, we use ftp clients to connect with the FTP server and manage WordPress files.? 

Once you’re connected, you can find the WordPress root directory to access the web files. You’ll find them named as http docs.? 

Step Three: Create a WordPress Login Page from Custom Code 

Start by creating a subfolder in the child theme. Name it “login” and create a CSS file: custom-login-style.css 

Then open the new CSS file in the content editor to start making changes.? 

A few changes you can make to the design of the page include replacing the WordPress logo with your logo (or the client’s logo) and changing the background colours. You can also make more in-depth changes to the layout of the page.? 

We’ll use these tags and classes in the new CSS file: 

body { } 

body.login { } 

form .login h1 a { } 

.login form { } 

.login label { } 

p#nav{ } 

p#nav a{ } 

.wp-core-ui .button-primary { } 

.wp-core-ui .button-primary.focus, .wp-core-ui .button-primary.hover, .wp-core-ui .button-primary:focus, .wp-core-ui .button-primary:hover { } 

Next, open the functions.php file in the child folder. Once you open it, copy the following code into the file.?Not the /* and */ are only for containing comments about the code, so a new developer will understand the purpose of the code 

/*Changing my custom login */ 

function my_custom_login() { 

echo ‘’; 

} 

add_action(‘login_head’, ‘my_custom_login’); 

This will make a few simple changes to the page, including adding corporate colours and switching the WordPress logo for the brand logo. 

Once you’ve saved it, you can return to the CSS file to modify additional sections or add new styles or features. 

You’re Done! 

This should complete the custom login form on your WordPress website. Once you’ve created it, clients will find it easier and more welcoming to log in to their website.? 

Plus, it’s a simple way to improve user experience right from the outset; after all, it’s the very first impression your client has when they enter their website from the back end. It should be just as functional and stylish as the front-end.?