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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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”.
You can keep these URLs the same or change them.
Once you’re done making changes, make sure to click the ‘Save Changes’ button.
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]
Now your users will see the login form on the WordPress sidebar or any other area of your site where you added the shortcode.
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.
Guy says
This plugin is no longer free.
It allows only the most basic functions now.
All the other stuff if set as extensions
WPBeginner Support says
Thank you for letting us know, we’ll be sure to take a look at it and update our article when able.
Admin
Ethan says
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
Bobby says
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?
Angela Baker says
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.
Arya says
Why recaptcha is not shown in login form?
Navi Singh says
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
Chantal says
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
Chantal says
I have resolved the issue, needed to tick anyone can register in general settings!
Doug Poffinbarger says
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.
Jeff says
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?
Mohammad Kashif says
Will it work with woocommerce?
WPBeginner Support says
Hi Kashif,
Yes, it will work with WooCommerce.
Admin
Mohammad Kashif says
Woocommerce already have login page. After install this plugin now i have two login page. How can i make one login page?
WPBeginner Support says
Hi Kashif,
You can disable the plugin and use WooCommerce login page.
Mohammad Kashif says
How can i redirect woocommerce login page to tml login page?
Rahul says
Can you add extra fields to the registration page? If so how? please any one can help me?
HELENANG says
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.
WPBeginner Support says
Hi,
You can use WPForms with user registration add on.
Admin
HELENANG says
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.
graham says
There seem to be quite a few comments on google that woocomerce and TML dont play well together any truth to that?
Don Tedlock says
I’m getting an extra, unformatted login and lost password link on my Registration form. How do I remove these links?
Samuel Nyamavor says
I’m getting an extra, unformatted login and lost password link on my Registration form. How do I remove these links?
ST says
Hi, do you know how to put the login within the Header instead of the sidebar? Thanks! (:
Christina says
I would like to know this too.
Saurabh Saneja says
Plugin automatically creates login page. Just add it to header menu.
Rachid says
It’s a shortcode inside a login page (page created by the plugin once you activited it), you can call the shortcode inside your header php file…(do_shortcode(“…”))
Diane says
Hi, is it possible to make the registration page available to admin only?
Tim says
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.
Christian says
Is it just me, or is that the wrong video?
WPBeginner Support says
Thanks for notifying us. We have added the correct video.
Admin
oliverosM says
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.
Matt says
Very Helpful – thank you!
Mike Squatrito says
Can you add extra fields to the registration page? If so how
Rahul says
hey you got this? i also want to add a new field in registration page.
Mr Darlington says
Impressive! Let’s check it out…
Leonard Rattini, CCP says
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
Rahul Maurya says
Is there any method to integrate register or log in using Facebook in this plugin?
Ochelh says
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,