Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Create a Custom WordPress Login Page (Ultimate Guide)

Do you want to create a custom WordPress login page for your website?

If you run a WordPress membership site or an online store, then many of your users will often see the login page. Customizing the default WordPress login page allows you to offer a better user experience.

In this ultimate guide, we will show you different ways to create a custom WordPress login page. You can also use this tutorial for creating a custom WooCommerce login page as well.

How to easily create a custom WordPress login page for your site

Here is what you will learn from this guide.

Why Create a Custom WordPress Login Page?

WordPress comes with a powerful user management system. This allows users to create accounts on eCommerce stores, membership websites, or on a blog.

By default, the login page shows the WordPress branding and logo. This is fine if you run a small blog or are the only person with admin access.

Default WordPress login screen

However, if your website allows users to register and login, then a custom login page offers a better user experience.

Using your own logo and design makes your users feel at home. Whereas redirecting them to the default WordPress login screen that looks nothing like your website may look suspicious to your users.

Lastly, the default login screen does not contain anything but the login form. By creating a custom login page, you can utilize it to promote other pages or special promotions.

That being said, let’s take a look at some examples of custom WordPress login page designs.

WordPress Login Page Design Examples

Website owners can customize the WordPress login page using different styles and techniques.

Some create a custom login page that uses their website’s theme and colors. Others modify the default login page by adding a custom background, colors, and logo.

1. WPForms

WPForms

WPForms is the best WordPress contact form plugin on the market. Coincidentally, their plugin also includes an add-on to create beautiful WordPress login and registration forms, which we will show you later in this article.

Their custom login page uses a two-column layout. The left column contains the login form, and the right column is used to highlight promotions and other call-to-actions.

In the example above, they’re using the login page to share their annual report. It uses custom branding, background illustration, and brand colors to create a unique login experience.

2. Rock My Wedding

Rock My Wedding

Rock My Wedding’s website uses a popup modal to display login and registration form.

The advantage of using a popup is that users can log in without leaving the page. It saves them from a new page load and offers a faster user experience.

3. Jacquelynne Steves

Jacquelynne Steves

Jacquelynne Steeves is an arts and crafts website where the author publishes content about decorating home, making quilts, patterns, embroidery, and more.

Their login page uses a custom background image matching their website’s theme with the login form on the right.

4. Church Motion Graphics

Church Motion Graphics

The login page of this motion graphics design company uses a colorful background reflecting what their business is all about.

It uses the same site header, footer, and navigation menus on the login screen. The login form itself is quite simple with a dark background.

5. MITSLoan Management Review

MITSLoan Management Review

MITSLoan Management Review website uses the default WordPress login screen. It also uses custom CSS with its own logo to hide the WordPress branding.

Now, are you ready to learn how to create a custom login page in WordPress?

Creating a WordPress Login Page using Theme My Login

Theme My Login is a free plugin that changes your login page to match your WordPress theme.

It’s not very customizable, but it will replace the default WordPress-branded login page and look a bit more professional.

The first thing you need to do is install and activate the Theme My Login plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, Theme My Login automatically creates URLs for your custom login, logout, registration, forgot password, and reset password actions.

You can customize these WordPress login URLs by visiting Theme My Login » General page. Scroll down to the ‘Slugs’ section to modify these URLs used by the plugin for login actions.

Theme My Login Pages

Theme My Login also allows you to use shortcodes to create custom login and registration pages. You can simply create a page for each action and then add the page slug here so that the plugin can find and redirect users properly.

Let’s start with the login page.

Head over to Page » Add New to create a new WordPress page. Next, you need to give your page a title and then enter the following shortcode “[theme-my-login]” inside the content area.

Adding shortcode

You can now publish your page and preview it to see your custom login page in action.

Custom WordPress login page

Repeat the process to create other pages by using the following shortcodes.

[theme-my-login action="register"] for registration form.

[theme-my-login action="lostpassword"]for the lost password page.

[theme-my-login action="resetpass"] use it on the reset password page.

Creating a Custom WordPress Login Page Using WPForms

WPForms is the best WordPress form builder plugin on the market. It allows you to easily create custom login and registration forms for your website.

WPForms is a premium WordPress plugin, and you will need at least their pro plan to access user registration add-on. WPBeginner users can get 50% discount by using our WPForms coupon code: SAVE50

The first thing you need to do is install and activate the WPForms plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit WPForms » Settings page to enter your license key. You can find this information under your account on the WPForms website.

WPForms license

After entering the license key, you would be able to install add-ons. Go ahead and visit WPForms » Addons page and locate the User Registration Addon.

Install user registration addon

Next, click on the Install Addon button to download and activate the addon. You are now ready to create your own custom login forms.

Head over to WPForms » Add New page and scroll down to ‘User Login Form’ template. You need to click on the ‘Create a User Login Form’ button to continue.

Create login form

WPForms will load the User Login Form with the required fields. You can click on the fields to add your own description or text around them.

WPForms form builder

You can change other settings as well. For example, it automatically adds ‘Submit’ as the button title. You can click on it and then change it to Login instead.

Form settings

You can also decide what happens once a user is successfully logged in. Go to Settings » Confirmation tab and select an action.

Redirect logged in users

You can redirect the user to any other URL, redirect them to the homepage, or simply show them a message that they are now logged in.

Once you are satisfied with the form settings, click on the Save button at the top right corner of the screen and close the form builder.

Adding Your Custom Login Form to a WordPress Page

WPForms makes it super easy to add your custom login form on any WordPress post or page.

Simply edit the page where you want to add the login form or create a new one. Then, on the page edit screen, add the WPForms block to your content area.

Adding WPForms block to a post

Next, select the login form you created earlier, and the WPForms block will automatically load it inside the content area.

Login form preview

You can now continue editing the login form page or save and publish your changes.

Creating a Custom WordPress Login Page Using SeedProd

By default, your custom WordPress login form page will use your theme’s page template and styles. It will have your theme’s navigation menus, header, footer, and sidebar widgets.

If you want to completely take over the entire page and design something from scratch, then you can use a WordPress page builder plugin.

SeedProd is the best landing page builder for WordPress. It’s beginner-friendly and offers a drag and drop builder to help you create any type of landing page, including a login page, coming soon page, maintenance mode page, and more.

For this article, we’ll be using the SeedProd Pro version because it includes a login page template and advanced page blocks for customization.

There is also a free version of SeedProd, but it doesn’t include the option to create a login page for your WordPress website.

First, you’ll need to install the SeedProd plugin on your website. For more details, you can follow our guide on how to install a WordPress plugin.

Once the plugin is active, you’ll be redirected to SeedProd in your WordPress admin area.

Next, you’ll need to enter your license key that you can easily get from the SeedProd account. When you’ve entered the key, click the ‘Verify key’ button.

Enter your license key

After that, you are ready to create your login page in SeedProd.

To start, head over to SeedProd » Pages and then select the Login Page option by clicking the ‘Set up a Login Page’ button.

Select Login Page

On the next screen, you can select a template for your login page. There is also an option to create a page from scratch by using the Blank Template.

However, we suggest using a template as it’s easier and faster to customize the login page the way you want.

Choose a template for your login page

When you select a template, a popup window will appear to enter a Page Name for your login page. SeedProd will use the page name as the URL for your landing page.

Once you have entered these details, go ahead and click the ‘Save and Start Editing the Page’ button.

Enter a Page Name and Page URL

Now, you can edit your login page using SeedProd’s drag & drop builder under the Design tab. The builder lets you easily add any page block to the page by simply dragging it from the left menu and placing it anywhere on the page.

For example, you can add some text to your login page, a video, or a new button. There are more customization options under the Advanced blocks section, where you can to add a countdown timer, social sharing icons, and more.

It even lets you remove existing page blocks in the template. All you have to do is click the trash can icon to delete the page block.

Edit your login page

Next, if you click on any section on the login page, you’ll see more options for customization.

For instance, you can change the text and color of the fields, choose a different font, edit the button’s color, and more.

Edit the page section

When you are satisfied with the design of the login page, go ahead and click on the Connect tab at the top.

You can now connect different email marketing services such as Constant Contact, Drip, SendinBlue, and more.

Connect email marketing services

After that, you can headover to the Page Settings tab. Under the General settings, SeedProd lets you edit the page title and change the page status from draft to publish.

You can also select the option to use SeedProd Link and add your SeedProd affiliate link to make more money online.

General page settings

If you want to optimize your login page for search engines, then go to the SEO settings. Here you can add an SEO title and description for your page, choose a favicon, and social media thumbnails.

There is also an option to enable no-index for the login page. By enabling this option, you can stop search engines from indexing and ranking your login page in the search results.

SEO page settings

After that, you can also add different code snippets to your login page under the Scripts settings.

Add scripts to your login page

Now that you’ve changed the page settings go ahead and click the Save button at the top.

Next, you’ll have to make your login page active. To do that, you can exit the landing page builder and then go to SeedProd » Pages.

After that, click the switch to change the page status from Inactive to Active.

Make your login page active

You can now go to the URL of your login page and see it in action.

Login page preview

If WordPress page builder plugins are not your thing, then you can use custom CSS to style the form and the login page itself. Alternatively, you can also use CSS Hero plugin to easily add custom CSS styles.

You don’t always need to create a completely custom WordPress login page for your website. In fact, a lot of websites just replace the WordPress logo and logo URL while still using the default login page.

If you want to replace the WordPress logo on the login screen with your own logo, you can easily use a WordPress plugin or add custom code. We will show you both methods you can use one that best suits you.

Change WordPress Login Logo and URL using a Plugin

The first thing you need to do is install and activate the Colorlib Login Customizer. plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, the plugin adds a new menu item labeled ‘Login Customizer’ to the WordPress admin sidebar. Clicking it will launch the login customizer.

Login customizer

The login customizer will load your default WordPress login screen with customization options on the left and live preview on the right.

To replace the WordPress logo with your own, click on the ‘Logo options’ tab on the right. From here, you can hide the WordPress logo, upload your own custom logo, change the logo URL and text.

Upload custom logo to login page

The plugin also allows you to customize the default WordPress login page completely. You can add columns, background images, change login form colors, and more.

Basically, you can create a custom WordPress login page without changing the default WordPress login URL.

Once you are finished, simply click on the publish button to save your changes. You can now visit the WordPress login page to see your custom login form in action.

Custom WordPress login page with custom logo

Change WordPress Login Logo and URL without Plugin (Code)

This method allows you to manually replace the WordPress logo on the login screen with your own custom logo.

First, you need to upload your custom logo to the media library. Go to Media » Add New page and upload your custom logo.

Once you have uploaded the image, click on the ‘Edit’ link next to it. This will open the edit media page, where you need to copy the file URL and paste it into a blank text file on your computer.

Next, you need to add the following code to your theme’s functions.php file or a site-specific plugin.

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' );

Don’t forget to replace the background-image URL with the file URL you copied earlier. You can also adjust other CSS properties to match your custom logo image.

You can now visit the WordPress login page to see your custom logo in action.

WordPress login page with custom logo

This code only replaces the WordPress logo. It does not change the logo link, which points to the WordPress.org website.

Let’s change this.

Simply add the following code to your theme’s functions.php file or a site-specific plugin. You can add this code right below the code you added earlier.

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_headertitle', 'wpb_login_logo_url_title' );

Don’t forget to replace ‘Your Site Name and Info’ with your site’s actual name. The custom logo on your login screen will now point to your site’s home page.

That’s all. We hope this article helped you learn different ways to create a WordPress login page for your website. You may also want to see our ultimate WordPress security guide for tips on improving your WordPress login security, or see our comparison of the best live chat software for small business.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

91 CommentsLeave a Reply

  1. Hello there, How can I edit the login page without any plugin!??? With HTML and CSS…and in theme file..where is the login file… which I have to edit!!! Please help me.. thanks

  2. My problem is when a user login, he or she will be directed to WP admin dashboard.. How do I fixed that?

  3. I do not see the screens as shown in the article. Is there a paid version of this plugin?
    All I can see is the Settings and Extensions options in the TYL admin menu.

    David

    • The Theme My Login plugin had a large overhaul after we created this article, we will certainly look into updating this article.

      Admin

  4. Hi,

    This is an awesome article. I have one doubt in this whole process. How do I validate the username and password ? I do not see anything on that in the article.

    For e,g, how does the form know whether the username and password is valid?

    Regards
    David DLima

  5. I’m new to WordPress and am trying to set up a small blog on my own.
    I’m toying with the idea of having readers ‘sign or log in’ to be able to gain access to extra features.

    From what I understand in this thread is how to create the log in form and apply it to your site, but how do you adjust the access to features or essentially what the are logging in for?

    • While theme my login was updated after this article was created, both plugins should still be available to use to create a login page.

      Admin

  6. Hi ,

    Thanks for all your replies and videos. Great help! I have three questions, would highly appreciate, if you answer.

    (i)I am also puzzled what could be the use of “login widget”, if it does not include an option for sign-up. So the users, who are not registered, will have to be directed to some other page.

    (ii) How to integrate social login, with the “elementor login wigdget”?

    (iii) Is there no way for creating ” registration form” using elementor.

    Thanks

    suresh

  7. I’m blown away!

    I’m not a “tech” guy, but I own 6 or 7 badly, barely managed websites. I have huge aspirations, but not the talent or team to go with it. I may take me until I’m 100, but eventually I’ll build out my vision. I working on it. Regardless, that’s not the point of this post. It’s just to describe me.

    I’m looking for more automation, and specifically was looking for a way to create/buy/obtain a pop-up with social logins (FB & Google) to build my list, which, if you can recommend one, I’d be most appreciative.

    I read one of your articles and as I was leaving, saw you Ultimate toolkit. In just briefly skimming through it, I found answers to several things I’ve wanted to know about and 2 or 3 questions I didn’t even know I had. I know a truly valuable lead magnet when I see one, and I just wanted to take a second to commend you on this one. FREE VALUE!

    Thank you
    Joshua Houston

  8. Hello,
    When users try to register through TML they don’t receive activation e-mail .. how can i solve that !?

  9. Can I customise my default WordPress login page without any plugin. Actually I need only to change WordPress logo on /wp-login page.

  10. What I would actually like to do is get users to land on a certain page on my website no matter where they come from or which link they use – even if ti is to one of the other pages on my site.

    Once they have landed, i want to redirect them to the page they chose to visit.

    Can we do this and how?

  11. I want a section where staff can log in to a single page where there will be a form for them to log in their daily work.

    Is this possible and if so which plugin would best suit my needs?

  12. Hello!

    I’ve created a free resource library for my website and I want to collect emails in exchange for the password in order to grow my email list. I am having such a hard time finding a way to customize a password-entry page because I don’t want anyone to have their own account or anything, I just want them to enter a password that I’ve set so they can gain access to the library. I don’t like the WP password protection feature because I want to be able to collect emails on the same page that they enter the password on so it’s like “If you have the password, enter it here. If you don’t have the password, enter your email and I’ll send it to you.” Would I be able to do something like that here? Do you have any suggestions? I would so greatly appreciate it because I’ve been stuck on this issue for like 3 days now!

    Thanks so much,

    Sierra

    • Hi Sierra,

      If you are using WPForms, then you can redirect users to the download page. You can also send them an email notification with the download link or password. Another solution could be sending the link or the password in an auto reply using your email marketing software. This way you will also be able to verify their email address.

      Hope this helps

      Admin

    • Hi Sierra, I have come across your post. I have just started building my blog, and I am facing the same issue as you have had. Would you mind sharing your advice on how to create a password protected page for users and obtain their email address for the newsletter? Thank you in advance, Rob

  13. how to add social media login ? i want to add social media login but i cant use any thirdparty plugin. how to do

  14. This is a great article but how can we do what you currently have at wpbeginner.com/wp-admin

    It asks for a password before loading the page. How can we achieve this?

  15. I am using plugin ‘Admin Custom Login’ and would like this page for normal subscriber login/register. Can I make a menu page in WP with this address?
    Thank you.

  16. Hi,

    I’d just like to create a login page and link so users can upload posts and photo’s. I tried TML but nothing seems to happen when I refresh my home page. And my version of WPForms is lite. I don’t have money to purchase the full version if thats what is necessary. Just want my users to have a log in page! And tips

    • Hey Chaz,

      Please check your theme my login settings. You can also try updating WordPress permalinks. Simply visit Settings » Permalinks and then click on the save changes button without changing anything.

      Admin

  17. hi
    i’m trying to find the coding for customize the wrodpress login page using my own custom fields. can u help me what is the code for it?

  18. I need help, so I need to be able to add a client login to my website but just for a few pages, I can’t remember how to do this. I don’t build site all the time. I want the site to be free so everyone can look at it I just need a few pages to be for my clients and agents.

  19. the username and password for the login page, is that the same for accessing the admin area, or do we need to create a new username and password for the custom login area?

  20. TML is a nice plugins that’s we are using on our website. However, login page sometimes redirected to home page on our travel website, but whenever cache are deleted, it’s working fine…
    Thanks for your suggestions..

  21. I was looking for creating own login page template with all the functionalities. Is there any way of creating our own login page template without plugin. Or codex section where we can learn and create our own login template.

  22. Hi,

    I tried implementing the theme my login plugin to my website, but now I can not even login as an admin. What could be the problem?

    • Hi,

      just you can open from yousite/wp-login.php
      Replace yoursite with whatever is the name of your website.

      If you want to remove the plugin change it name to something else by accessing the plugin through filezilla/winscp or from your cpanel .

  23. Hello, just wanted to know if when you create a login like this, if the members of the site are redirected to their own account. I run a tax company and I want my clients to be able to access their account and then upload files through there, as well as see the status of their specific tax return. Their account would have to be linked to their login IDs that way they can see what is specific to them. Please let me know, thank you.

    • From wordpress backend settings ->general

      allow users registration. It will be something like that:

      Registration Settings

      Allow new registrations New registrations settings Registration is disabled.
      User accounts may be registered.
      Logged in users may register new sites.
      Both sites and user accounts can be registered.

  24. Hi, I have installed the TML plugin but I couldn’t find any shortcodes for ‘Registration’ & ‘Login’ pages to show them on the front-end. Please help me. Thanks.

  25. Installed TML but no Login showing on the website. ( Latest update of WP

    No Page ID available in General settings. so TML does not work.

  26. I have been trying for god knows how many days and today several hours installing and uninstalling login/registration plugins. I have followed every lesson along the way and followed yours closely. But – another total failure. This did not work. It created all the pages but put the profile/registration form on all of them. I give up! How do all of these sites get logins? Because nothing what-so-ever works for me. I can write a book on all the plugins and programs that I have tried. I am not going to hire a web developer to put one in because this task should not be that hard. But I can tell you it must be .

    I will just have to do without like a lot of things in wordpress that are just not accessable to all – just web developers. It is too bad that one cannot have a decent normal site like the web developers can. Doing without a lot of functions is getting to be a real problem with me and wordpress. When the forums do not help – and the plugins don’t work – I just just have to give up and do without.

    • it is not hard nor did I use a plugin last time, it is on the menu page but I forgot how to do this, a guy wanted to charge me $80 to do this and I won’t pay either. it is easy I can’t remember how to do it, I have been looking for days.

  27. Go t fed up trying with this., I’m sure it’s a great plugin but it is inconsistent. I cannot find the login page – it appears intermittently and then I cannot get a registration page to work properly.
    Pfft! Tired

  28. waw, thanks for the video, very helpful.

    one further question: I am building a site with a paid membership. I want to customize not only the login page but also the WP default page you get when your are logged in (i.e. with the dashboard on the left etc,…) is there a plugin for that?or coding is necessary?

    Thanks
    Anna

  29. Does anybody know how to move a site that has this plugin installed? When I try to move the site, the login page completely stops working.

    Thanks for any suggestions.

    • Hi, there could be a few reasons why this could happen.

      Try disabling the plugin, then move the site,

      Refresh your permalinks, then enable it again.

  30. I came across this plugin recently and LOVE IT!!!! I am trying to figure out how to verify a person is logged in prior to allowing them to write a post using Gravity Forms.

    All forms work properly, I found generic code to redirect to wp-login.php but since I am using the plugin, I want it to redirect to the same as the theme my login screen does.

    Here is sample code: (setup as page_loggedin.php)

    <?php else:
    wp_die('Sorry, you must first log in to view this page. You can register free here.');
    endif; ?>

    I don’t want hard coded site references, so any help with the PHP code will be appreciated! Preferred choice would be if user not logged in the redirect like the plugin does (but I can’t find how it does it yet)

    Ken

  31. I just got Theme My Login, version 6.3.9, and installed it into my wordpress theme (wp version 3.9). I activated the plugin but I see no Theme My Loging inside (under) the Setting what I do see is a TML following under Settings that does show the modules & general but no tabs. Help!

  32. Like this plugin
    How do you remove the bullets for ‘lost password’ and ‘register’ if on the login page? And remove ‘lost password’ if on the register page?
    I want to keep these options but remove the bullets.

  33. Do i need to upgrade my wordpress to enterprise version in order to have the plugin feature for my website and install your custom login feautre?

  34. Can this log-in page be used to log into a specific page of a website? I don’t want people logging into the admin section, but when they click on the link for a particular page, I want people to be able to log in with a username and password for just the one page. They need to be able to set up an account and create their own password, thus the reason I can’t use the password-protected option offered per page by WordPress. All members’ usernames and passwords need to be unique.

  35. Its very good plugin to login. But if we want to disable the header and footer using this plugin then how we can do this. If anyone knows this then please upload your answer and give me it on ly email id.

  36. This plug-in is fine except if someone loses their password. I don’t know if it’s me, but the plug-in doesn’t seem to communicate with WordPress very well. For instance, James loses his password to my site. He requests that a new password be sent to him. James receives an email saying that he lost his password, but he should go to *blank* website to reset it. Unfortunately, there’s nowhere for James to go to retrieve/reset his password. Now, I could be wrong about this, but so far, I’ve found no way around this problem

    • It is compatible. The only reason why the plugin author hasn’t updated the plugin’s readme file is because they haven’t come out with new features yet. It works just fine.

      Admin

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.