custom wordpress login page

Getting a custom WordPress login page is certainly a cool thing! It’s basically the last step on your way to white-labeling your WordPress website entirely.

👉 Two reasons why you might want to get a custom WordPress login page:

  • The obvious reason … branding. With your logo featured right above the login form, your website no longer looks like something put together in an afternoon, but like a completely custom-built creation.
  • Security. Having an additional security check on your WordPress login page will prevent hacker attacks and bots trying to break in.

How to get a custom WordPress login page?

There are several ways to get a custom WordPress login page.

For advanced users, you can change the WordPress logo and URL using code. However, this requires you to edit important site files which beginners might not be comfortable with.

Instead, most people would probably prefer to use a free plugin. To be honest, it’s really easy, no matter which way you go about it.

To help you out, I found three of the most popular login customizer plugins around and experimented with each of them so that I could show you how to quickly customize your WordPress login page. At the end I’ll also share how you can do it manually if you don’t want to rely on a plugin.

1. Orbit Fox – Login Page Customizer

When it comes to customizing your WordPress login page, Orbit Fox is arguably the best tool for the job for the following reasons:

  • It’s 100% free
  • It’s extremely easy to use
  • It allows you to tweak virtually every single variable on the login screen

On top of that, it includes a whole Swiss Army knife of additional features that are also free and that will help you optimize your WordPress site.

To get started, install and activate the plugin. From the WordPress dashboard:

  • Go to PluginsAdd Plugin
  • In the search bar type in “Orbit Fox”
  • Wait for the results to populate and then click on Install, followed by Activate.

Upon activation, look for Orbit Fox on the lefthand side of your WordPress admin dashboard. Click on it. On the next screen, look for the Login Page Customizer. It should be near the bottom of the right side column.

Tap on the toggle to activate it, and then press the Customize Login Page button within the block.

Orbit Fox Login Page Customizer

This will bring you to the WordPress Customizer, where you’ll be able to add a background image, adjust its position, overlay a color, add a blur effect, and more. You’ll also be able to customize the actual sign-in form, all of the text, border sizes and colors, and anything else your imagination comes up with.

This even includes the ability to change the login URL to something other than the generic yourwebsite.com/wp-admin that comes standard with all WordPress sites.

Overall, the final results look modern and engaging:

Customizing the WP Login Page with Orbit Fox.

2. Custom Login Customizer

If all you need is to customize your WordPress login page then Custom Login Customizer gets straight to the point. It’s very easy to use and much like Orbit Fox, it integrates with the native WordPress Customizer so you can see your changes being reflected in real time as you make them.

To use the plugin, follow the same steps as before to install and activate it. Once activated, find Login Customizer in your WordPress admin dashboard and click on it.

The Settings will open up. Here you can make a few basic adjustments before clicking on Login Customizer to get into more of the heavier editing.

Login Customizer Settings screen

Once you’re in the Customizer, you can upload your logo and set its size, choose a background color or image, pick the login form’s background and size, the styling of the individual fields, the login button appearance, the colors, and you can even add custom code.

I played around a little bit, and this is what I got:

Custom Login Page Customizer result.

3. Admin Custom Login

Admin Custom Login is another popular solution and comes with an intuitive, user-friendly interface that lets you have a lot of fun while customizing your WordPress login page. Overall, this plugin offers a good range of features, including some unique ones not found in the other options.

Getting started with it is the same as any other plugin: install it, activate it, and use the lefthand side menu in the WordPress admin dashboard to find AC Login. Click on it and begin experimenting.

You’ll notice a new menu on your screen with straightforward titles like Background Design, Login Form Settings, Font Settings, Logo Settings, and more. Most of the sections are self-explanatory.

For example, Background Design lets you change the background color and image of your login page, while Logo Settings lets you upload a logo. There is even an option to add a Google Captcha to your login page – this does require some additional setup though.

Admin Custom Login plugin dashboard

The one minor drawback with Admin Custom Login is that your changes aren’t reflected in a real-time preview. Instead you have to click on Save Changes for every adjustment you make. You also have to copy and paste a preview link into either an incognito browser window or an entirely different browser in order to see your changes reflected (and refresh after every change).

Despite this small inconvenience, it’s still very user-friendly and you can get some nice results with it. Here’s what I managed to come up with:

Admin Custom Login result.

While plugins provide a simple way to customize the login page, experienced users might prefer to use code. This means replacing the WordPress logo with a custom logo (and changing the logo link) manually.

First, you’ll need to upload your own logo to the WordPress media library by going to Media » Add New. Then, click on Select Files and choose an image from your computer.

Once the image is uploaded, click on Edit in the bottom right corner:

How to manually create a custom login page

To the right of your screen, find the File URL and make a note of this for later:

How to replace WordPress login screen logo

Now, you’re ready to add some code to your theme’s functions file. This can be a bit risky since a single error can break your website. Therefore, before you begin, it’s always a good idea and general best practice to backup your site first.

In addition, you’ll want to use a code snippets plugin like WPCode to edit your website safely. After activating the plugin, go to Code Snippets » Add Snippet:

Adding a snippet with WPCode

Find the Add Your Custom Code option and select Use snippet. Give your snippet a memorable title:

Creating a custom snippet with WPCode

Then, enter the following code into the Code Preview box:

function wpb_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(http://path/to/your/custom-logo.png);
        height:100px;
        width:300px;
        background-size: 300px 100px;
        background-repeat: no-repeat;
        padding-bottom: 10px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'wpb_login_logo' );

You’ll also need to change the Code Type to PHP Snippet, and replace the URL with the file URL that you copied earlier. Then, activate the snippet at the top of the page and click on Save Snippet.

Now, it’s time to change the logo link, as it still points to WordPress.org. Paste the following code beneath the code that you’ve just added:

function wpb_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'wpb_login_logo_url' );

function wpb_login_logo_url_title() {
    return 'Your Site Name and Info';
}
add_filter( 'login_headertext', 'wpb_login_logo_url_title' );

You’ll need to replace "Your Site Name and Info" with the name of your WordPress site. Then, click on Update. Now, your custom logo will lead visitors to your homepage.

The best way to customize your WordPress login page? 🧐

After experimenting with all four methods, Orbit Fox came out as my favorite. That’s also why I featured it first on the list. I love how easily you can customize every last detail, down to the URL, and the fact that it offers a modern, playful design.

That being said, the other two plugins are both great options if you want a direct solution without any extra features. Not that Orbit Fox is difficult to navigate, but some users have a personal preference for single-function plugins. If that’s you, then Custom Login Customizer and Admin Custom Login both get the job done.

Since all three plugins are free, I encourage you to check them all out for yourself if you have the time.

With that said, if you don’t want to use a plugin to get a custom login page, it’s also relatively straightforward to use code to manually replace the logo and link. At the end of the day, it’s up to you to decide which option is right for you. If you want even more options, check out our roundup of the five best WordPress login plugins.

Have you tested any of these? Tell us what you think about them.

Yay! 🎉 You made it to the end of the article!

0 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!