This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

📣 Try the fastest hosting platform with pay-as-you-go pricing & 24/7 expert support! MIGRATE NOW →

How to Create a Custom Login Page in WordPress – A Detailed Guide

Updated on December 20, 2021

6 Min Read
Custom-Login-Page-in-WordPress

Variety is the spice of life, so if you are bored of your plain and simple WordPress Admin login page, then this tutorial is for you.

By default, WordPress doesn’t give you any controls to edit the login page. You cannot brand the login page to your liking.

If you allow your audience to register on your site, then creating a custom login page in WordPress improves your site branding and gives your site a user-friendly look to your users.

In this article, I’ll share some methods to easily customize your WordPress login page with a detailed guide. You can choose the method that is best for your site.

Note: It is a good practice to take a backup before editing your website to avoid any mishap. Always create a backup and save it separately. You can read the article on how you can backup your WordPress website here.

[Also read: How To Create Custom Widgets In WordPress]

Three Methods to Create a Custom WordPress Login Page

Here are the methods that I’ll cover:

  • Method 1. By Using Page Builder (SeedProd)
  • Method 2. Regular WordPress Form Plugin (WP Forms)
  • Method 3. Adding your own code snippets

Let’s start with the first one.

Method 1. By Using Page Builder (SeedProd)

WordPress uses the theme’s page template for the login page, but to make your own login page design, you can use a WordPress page builder plugin.

I’m using a SeedProd page builder to design the login page from scratch. We’ll be using the SeedProd Pro version for this article because the free version does not have an enabled login page design option.

First, install the SeedProd plugin on your WordPress website. To know the installation process, follow our detailed article on SeedProd page builder.

Navigate to SeedProd > Pages option from the left sidebar of WordPress. Click on the ‘Set up a Login Page’ button and select your login page template. You can also select a blank template to make your WordPress custom login page from scratch.

SeedProd-login-page

I will select a template to make the process fast and easy. Once you select the template, enter your page name and click on Save and Start Editing the Page button.

SeedProd-new-page-details

Here, you can customize your WordPress Custom Login Page using the drag and drop widgets from blocks and sections. You can place your business logo design, change fonts and colors, and size your page according to your need.

You can save your customization by clicking on the Save button. It will only save the page customization. Once you’re done with the customization, click on the Publish button from the top-right dropdown button.

SeedProd-Login-Page-design

When you make your WordPress custom login page published, you’ll see a message ‘your page has been published,’ and you can visit your login page by clicking on the ‘See Live Page’ button.

SeedProd-Live-Page

Now, go to SeedProd > Pages and activate your newly customized login page.

SeedProd-login-page-activate

You can now go to your login page URL and see your WordPress custom login page.

WordPress-custom-login-page-by-seedprod

WordPress login page customization via page builder is the fast and easy way. Let’s move towards another method.

Method 2. Regular WordPress Form Plugin (WP Forms)

Another method to create a WordPress custom login page is by using a form plugin, and WPForms is the best WordPress form builder plugin on the market.

Although WPForm is the best option to create a custom WordPress login page, you need a Pro plan to access the user registration add-on because WPForm is a premium plugin.

First, install and activate the user register add-on, then go to WPForms > Add New and select a User Login Form template. Now, create your login form for the login page.

Once you are done with the customization, attach your login form with your page, and it is super easy to add your custom login form on any post and page.

Simply edit or create a new page for WordPress login, then add the WPForms block to your content area, and select the form you created earlier for login.

WPForms

Method 3. Adding your own code snippets

Changing the Logo

The default size of the WordPress logo is 274×63, so it is preferred that you create your custom logo of similar dimensions. Name your custom logo file as wp-admin-logo.png and upload it to wp-admin/images directory.

To change the logo you will need to edit a few lines of CSS code. Navigate to wp-admin/css directory and open wp-admin.min.css. This CSS file is compressed and you may have hard time to understand it at first. I recommend that you use Code Beautifier to decompress the CSS files. Locate the following code:

login h1
a{
 background-image:url(../images/w-logo-blue.png?ver=20131202);
background-image:none,url(../images/wordpress-logo.svg?ver=20131107);
background-size:80px 80px;
background-position:center top;
background-repeat:no-repeat;
color:#999;
height:80px;
font-size:20px;
font-weight:400;
line-height:1.3em;
margin:0 auto 25px;
padding:0;
text-decoration:none;
width:80px;
text-indent:-9999px;
outline:0;
overflow:hidden;
display:block
}

WordPress now uses the .svg extension for images, but we can easily change that to point to our .png images. Remove the following line:

background-image:none,url(../images/wordpress-logo.svg?ver=20131107);

Change the following line of code from

background-image:url(../images/w-logo-blue.png?ver=20131202);

to

background-image:url(../images/wp-admin-logo.png)

This will load your custom logo.

How to Change Font, Background Color, and Images of WP-Admin

We can easily change the color and size of the text in the login form by editing the following code in wp-admin.min.css:

.login label {
color:#777;
font-size:14px;

To change your background colors, locate and edit the color in the following code:

body.login {
background:#fbfbfb;
min-width:0;
}

To add your own custom background image, first upload your image to wp-admin/images and then change the path in your wp-admin.min.css file that is calling the image.

body.login {
background-image:url(../images/YourCustomFile.jpg);
min-width:0;
}

How to Change “Alt” Attribute of Your Logo

On mouseover, by default, you will see “Powered by WordPress”. You can easily change it by editing the wp-login.php file located at the root of your WordPress installation directory.

Locate the following code:

if ( is_multisite() ) {
$login_header_url   = network_home_url();
$login_header_title = $current_site->site_name;
} else {
$login_header_url   = __( 'http://wordpress.org/' );
$login_header_title = __( 'Powered by WordPress' );
}

Here, you can replace the URL http://wordpress.org/ with your desired URL and replace alt attribute by changing “Powered by WordPress” with your desired line.

If you are well versed in writing CSS, you change the entire look and feel of the WP-Admin page. Once again, I would recommend that you take a backup of your WordPress website.

Wrapping Up!

It is good to create a custom WordPress login page to enhance your site’s user experience. If you own a WordPress website, these customization methods will help you make your login page better and more interactive.

Frequently Asked Questions

Q: How do I create a WordPress login page without a plugin?

A: You can create a WordPress login page without a plugin by adding your own code snippets in template files.

Q: How do I create a custom login page in WordPress?

A: You can customize your login page with the help of a page builder, forms, and your code snippet. This article will help you understand each method in a better way.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Danish Naseer

Danish Naseer is a WordPress Community Manager at Cloudways. He is passionate about designing, developing, and engaging with people to help them. He also actively participates in the community to share his knowledge. Besides that, he loves to watch documentaries, traveling and spending time with family. You can contact him at [email protected]

×

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Want to Experience the Cloudways Platform in Its Full Glory?

Take a FREE guided tour of Cloudways and see for yourself how easily you can manage your server & apps on the leading cloud-hosting platform.

Start my tour

CYBER WEEK SAVINGS

  • 0

    Days

  • 0

    Hours

  • 0

    Mints

  • 0

    Sec

GET OFFER

For 4 Months &
40 Free Migrations

For 4 Months &
40 Free Migrations

Upgrade Now