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

How to Add Front-End Login Page and Widgets in WordPress

Do you want to add a front-end login page and widgets in WordPress?

The default WordPress login page doesn’t provide the best user experience and can confuse your users. Adding a front-end login page lets your users log in directly from the front-end of your website.

In this article, we will show you how to add a front-end login page and widgets in WordPress.

How to add a front-end login page and widgets in WordPress (3 ways)

Why and When Do You Need Front-End Login in WordPress?

By default, the WordPress login page will show the WordPress branding and usually won’t match the design of your current WordPress website.

Default WordPress login page

This works for smaller WordPress blogs and websites.

However, if you have a membership site, online store, or another site where users can register and log in, then adding a front-end login page and widget offers a better experience for your users.

You can even customize this page with your own branding, or add a simple login form to your WordPress sidebar.

There are multiple ways you can add a front-end login page and login widget in WordPress. In this tutorial, we’ll show you the 3 easiest ways to do this.

Video Tutorial

Subscribe to WPBeginner

If you’d prefer written instructions, just keep reading.

Method 1. Add a Front-End Login Page and Widgets in WordPress with WPForms

WPForms is the best WordPress contact form plugin in the market used by over 4 million websites. It lets you easily create a custom front-end login page and login widget on your website.

To get started, you will need their User Registration addon which lets you create WordPress user registration and login forms.

Next, simply use the drag and drop form builder to create your login form, then add it to your site using the WordPress block editor or a form shortcode.

WPForms login form

For more details, see our guide on how to create a custom login page for WordPress.

Once you’ve created your user login form, you can also add this form to your WordPress sidebar or other widget areas.

WPForms login widget

All you have to do is drag the WPForms widget to any widget area of your site and select the login form.

For more details, see our guide on how to add a login form in your WordPress sidebar.

WPForms login widget display

Method 2. Add a Front-End Login Page in WordPress with SeedProd

SeedProd is the best WordPress drag and drop page builder in the market used by over 1 million websites.

It lets you create a completely custom login page that can match the design of your current website or be something unique.

SeedProd login page example

It’s very beginner-friendly and comes with a ton of professionally designed login page templates that you can use to build your login page.

All you have to do is choose a template and use the drag and drop builder to customize the page.

You can even design a completely custom front-end login page from scratch using a blank template.

SeedProd login page templates

For more details, see our guide on how to create a custom WordPress login page.

Method 3. Add a Front-End Login Page and Widgets in WordPress with Theme My Login

If you want to add a very simple front-end login page to your site, then you can use the free Theme My Login plugin.

First thing you need to do is install and activate the plugin. For more details, see our beginner’s guide on how to install a WordPress plugin.

Upon activation, the plugin will automatically create pages for login, logout, forget password, and registration.

You can navigate to Theme My Login » General and view the plugin settings.

First, you can set the login type. The ‘Default’ setting is the most secure since it asks for an email and password to log in.

Theme My Login settings

Next, you can choose your Registration settings.

We kept the default settings here since it requires both email and password to login.

You can also check the ‘Passwords’ box to let users create their own passwords and the ‘Auto-Login’ box which automatically logs in users after they register.

Theme My Login registration settings

After that, you can change your login and registration URLs in the ’Slugs’ settings.

These automatically create redirects. So, the standard “yoursite.com/wp-admin” login URL will redirect to “yoursite.com/login”.

Theme My Login URL slug settings

You can keep these URLs the same or change them.

Once you’re done making changes, make sure to click the ‘Save Changes’ button.

Save Theme My Login settings

You can’t add much more advanced functionality unless you upgrade to use their premium extensions.

Still, it is a good solution for users on a budget who want to create a simple front-end login page.

You can also add a login form to your WordPress widget areas using the included shortcode.

Simply navigate to Appearance » Widgets and drag the ‘Text’ widget to your sidebar.

Then, copy and paste the shortcode below. You can customize the widget by changing the title or adding more text. Don’t forget to click the ‘Save’ button when you’re done.

[theme-my-login]

Add Theme My Login widget

Now your users will see the login form on the WordPress sidebar or any other area of your site where you added the shortcode.

Theme My Login sidebar widget display

We hope this article helped you add a front-end login page and widgets in WordPress. You may also want to see our expert picks of the best membership plugins for WordPress and our ultimate WordPress security guide to improve the security of your login pages and widgets.

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

39 CommentsLeave a Reply

  1. This plugin is no longer free.
    It allows only the most basic functions now.
    All the other stuff if set as extensions

    • Thank you for letting us know, we’ll be sure to take a look at it and update our article when able.

      Admin

  2. Excellent video voice over perfect very professionnal THANK YOU! The only problem is the video is outdated. The plugin developer made is plugin from free to paid! So we have no access to what you explained :(

  3. Hi, I have a problem that I don’t have the pages. I add their ‘Actions’ but it doesn’t shows anything in the Primary menu.
    I download & installed it.
    What should I do?

  4. This video is very well done. Thank you for explaining everything so well.

    I was using WP Default login for people to register for my site, but now that isn’t working for some reason. Will this plug in work instead? I don’t want to change any of my admin login, just need a way for the public to register.

  5. Hi dear,

    how to enable to any user for post directly there after a login there. if some suitable plugin is avaliable for user post please help me to do that.

    Thanks

  6. Hi. I have followed your instructions on my WP blog, and the front log in/registration page comes up. But when some one tried to register, it comes up with an error saying “User registration is currently not allowed.”
    I have it set up for new user approval.

    Can you please help me understand what I have done wrong and how I can get it working.
    thanks

  7. That was very helpful and well done. Any idea how to add a login authentication in the middle of a post? Instead of downloading a freebie to capture email subscribers, I’d like to require subscription or login in order to “read more” of a given post. This has been really hard to find via google searches. Ideally, it would be a tiny inline form or popup at the end of the truncated article and once they subscribed or logged in, they would automatically see the rest of the article and any others while subscribed.

  8. Hello, how do i remove some sections from the user profile page?
    The name and type of the form is shown to users on their profile page; please how do i address this?

  9. I can see that TML provides quite a lot of functionality.
    I am simply looking for a login option which will return the user to the page they have come from on our website instead of their profile page. Is there a simpler plugin you would recommend to do just that w/o the chance of conflicting with other plugins? Thanks.

  10. Does This My Login work well with Simple Access Control plugin which provides private access to certain pages of the website?
    Does it conflict with the Security provided by the WordFence Security plugin, e.g., Lockout for a certain amount of time after a number of unsuccessful login attempts?
    Thanks.

  11. There seem to be quite a few comments on google that woocomerce and TML dont play well together any truth to that?

  12. I’m getting an extra, unformatted login and lost password link on my Registration form. How do I remove these links?

    • I’m getting an extra, unformatted login and lost password link on my Registration form. How do I remove these links?

  13. Is there a way to add a contact form that saves history with this plugin?

    Essentially they would login, they would see an “order form” they could then place an “order”, it would email someone there order. But it would also save their order history so that they could re order items.

    Even if you could point me in the right direction, that would be super helpful!

    Thanks.

  14. why is it that every one puts in their title how to do something and it ends up being a plugin setup and not what it says i was expecting something else but it seems every body does the same its easy saying how to make something when its just only a plugin.
    Well its a nice article any way.

  15. Firstly, I do want to commend you for your help to understand WP.

    However, as most apps tend to do, and your teaching to accomplish, as well: you headline with a “How to…” complex caption. I prefer to see a headline to include a single noun and single verb that explains “why” I need to do something. Then in its body’s detail instructions, it’s there that tells me “how” to satisfy its “single-purpose” why-objective.

    All application sources need to understand, theirs is not the only one we users use. As their “How to’s,” to explain, it’s not always clear what is to be satisfied, and for sure its how-to actions to execute, is not a simple step down bing-bing and done, procedure function.

    My 30-years in computer application design is my platform to make this statement. Leonard Rattini, CCP

  16. Hello,

    Very nice tuto. I’de like to add login/logout link to my top menu, this link should switch between login and logout depending if the user is logged in or not. Is it possible to do this with TML and how ?

    Regards,

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.