How To Create A Custom Login Page For WordPress: 5 Easy Methods

Fed up with the built-in WordPress login form? It works fine when you’re the only one who needs to log in. But if you let other people register at your site, you might be looking to create a custom WordPress login form to offer a better, more branded user experience.

Web Hosting

If that’s the case, you have plenty of options for how to create a custom login page for WordPress. And I’m about to show them to you!

In total, here’s what I’ll cover. How to…

  • Add a login form to any page with a shortcode or using a sidebar widget. You’ll also be able to redirect users to a custom page after they log in.
  • Add social login buttons anywhere on your site via a shortcode or sidebar widget
  • Customize the native WordPress login page (wp-login.php)

And whenever possible, I’ll try to stick to free plugins!

Method 1: Clean Login Plugin (Free)

There used to be a popular custom login page plugin called Theme My Login. However, in June 2018, that plugin suddenly started charging money for all kinds of features that were previously free (not cool!), which forced me to look for some Theme My Login alternatives for this post.

After playing around with a few different plugins, I settled on the free Clean Login plugin and the plugin in the next section as the two best options.

Clean Login gives you simple shortcodes that help you add the following forms/information anywhere on your site:

  • Login form
  • Register form
  • Restore password form

There’s also a basic frontend profile management shortcode if you want to let users manage their profiles, though you don’t have to use that feature.

To use the plugin, just install and activate it. Then, simply add the [clean-login] shortcode wherever you want your custom login form to appear:

how to create a custom login page for wordpress with clean login

learn wordpress wplift icon

Article continues after this block

You may also like these related articles

If you go to Settings → Clean Login, you can also choose to redirect users to a specific page after they log in (or log out):

custom redirect

All in all, pretty easy to use!

Get Clean Login

Method 2: Login With Ajax Plugin (Free)

Login With Ajax is another stellar free option and a great Theme My Login alternative.

It lets you add a custom login form to WordPress using either a shortcode or a widget (there’s also a PHP option for developers).

Here’s what I like about this option:

First, because it uses AJAX, there are no screen refreshes, which is a neat effect (there’s also a fallback in case AJAX doesn’t work).

Second, you can not only set up custom redirects for after a user logs in, but you can also set up different redirect rules depending on a user’s role.

To get started, install and activate the free plugin. Then, you can add your login page using either:

  • The Login With Ajax widget
  • The [login-with-ajax] shortcode

As you can see, it’s a bit wider than the Clean Login plugin and lacks the box/shadow around the form by default:

login with ajax example

If you want to change the width, it’s a pretty easy CSS fix – just adjust the width of the .lwa class.

You can also set up your custom redirect rules by going to Settings → Login With Ajax:

redirect by user role

And another nice thing that Login With Ajax lets you do is set up a custom email that users get after registering, if you’re using the custom registration page functionality.

Get Login With Ajax

Method 3: Use The Elementor Pro Login Widget ($49)

If you use the Elementor page builder and have Elementor Pro, you already have access to a custom login page tool via the Login widget.

Again – this widget is only available with Elementor Pro (read our review). But once you have that, you can easily add a login form anywhere on your site by using the Login widget (you can even embed this in your sidebar by using the Embed Anywhere feature in Elementor Pro).

To use it, just drag over the Login widget and style it using the Elementor side panel:

elementor pro login widget

You can also use the Additional Options section in the Content tab to set up a custom redirect after a user logs in:

elementor pro login redirect

This is probably the most flexible way to create and style a custom login page – you’ll just need to pay for Elementor Pro to use it.

Get Elementor Pro

Method 4: Add Social Login With Nextend Social Login (Free)

So far, I’ve just shown you how to add a basic custom login page. But what if you want to make it custom…’er with something like social login?

If so, you can use the Nextend Social Login plugin to add social login anywhere on your site using either shortcodes or the included widget.

And like the other plugins, you’re also able to set up custom redirects for after a user logs in.

I’m not going to give you any tutorial for this section because I’ve already covered how everything works in my detailed Nextend Social Login review. So if this method intrigues you, make sure to check that post out!

social login

Get Nextend Social Login

Method 5: Customize The Native WordPress Login Page

Finally, I want to touch on the fact that there are lots of free plugins that can help you customize the native WordPress login page, rather than needing to create your own login page.

These plugins let you re-skin the wp-login.php page while preserving all the same functionality. Typically, you’ll be able to change:

  • The default WordPress logo into your own logo
  • Colors and backgrounds
  • Form labels and placeholders

And some plugins also give you other options.

If you’re interested in this approach, check out our post on the best custom login page plugins.

Final Thoughts On How To Create A Custom WordPress Login Page

If you want to create a custom login page form that you can embed in your content or sidebar, both Clean Login and Login With Ajax are great options.

Each plugin not only lets you add a login form anywhere on your site, they can also help you set up custom redirects to send visitors to the right spot after they log in.

Additionally, if you’re one of the many angry Theme My Login users, they both make great Theme My Login alternatives.

If you already use Elementor Pro on your website (like WPLift does), you don’t need any external plugin because you can already use the flexible Login widget. And like the previous two plugins, Elementor Pro lets you set up a redirect for after a user logs in.

Finally, if you want to add social logins to any spot on your site, Nextend Social Login gives you both shortcodes and widgets. And if you’d prefer to stick with the native WordPress wp-login.php page, you can also find plenty of plugins to help you customize its style.

Now over to you – have any other questions about how to create a custom login page for WordPress? Leave a comment and we’ll try to help you out!

Colin Newcomer

Colin Newcomer

Colin Newcomer is a freelance writer and long-time Internet marketer. He specializes in digital marketing, WordPress and B2B writing. He lives a life of danger, riding a scooter through the chaos of Hanoi. You can also follow his travel blog.

3 thoughts on “How To Create A Custom Login Page For WordPress: 5 Easy Methods

  1. Method 6 – plugin WP-Recall
    1. Free for login
    2. addition addon-s (total 200+, free over 70)
    3. sesponsible & adaptive
    4. clean design
    5. great frontend user profile
    6… it expands with new functionality

    p.s. TML decided to earn a million. Greedy and dishonest

  2. Alternativ use nativ WordPress Functions and leave plugin trash!

    1. Create a page, endpoint or what you want
    2. use the WordPress method wp_signon() like in your functions

    get_error_message();
    }

    // run it before the headers and cookies are sent
    add_action( ‘after_setup_theme’, ‘custom_login’ );

  3. ups i’m cropped

    function custom_login() {
    $creds = array();
    $creds[‘user_login’] = ‘example’;
    $creds[‘user_password’] = ‘plaintextpw’;
    $creds[‘remember’] = true;
    $user = wp_signon( $creds, false );
    if ( is_wp_error($user) )
    echo $user->get_error_message();
    }
    // run it before the headers and cookies are sent
    add_action( ‘after_setup_theme’, ‘custom_login’ );

Comments are closed.