Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

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 easily 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.

This works for smaller WordPress blogs and websites.

Default WordPress login page

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 branding or add a simple login form to your WordPress sidebar.

That being said, let’s see how to easily add a front-end login page and login widget in WordPress. For this tutorial, we will show you the 3 easiest ways to do this, and you can you the links below to jump to the method of your choice:

Video Tutorial

Subscribe to WPBeginner

If you’d prefer written instructions, then 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 on the market, used by over 6 million websites. It lets you easily create a custom front-end login page and login widget on your website.

First, you’ll need to install and activate the WPForms plugin. For detailed instructions, please see our beginner’s guide on how to install a WordPress plugin.

Note: WPForms also has a free version. However, you’ll need the premium version of the plugin to unlock the User Registration addon.

Upon activation, visit the WPForms » Settings page from the WordPress admin sidebar to enter your license key.

You can get this key from your account on the WPForms website.

Enter WPForms license key

Once you’ve done that, head over to the WPForms » Addons page from the WordPress dashboard to locate the User Registration Addon.

Next, click the ‘Install Addon’ button to download and activate it on your website.

Install user registration and login forms addon

Upon the activation of the User Registration addon, head over to the WPForms » Add New screen from the admin sidebar to launch the form builder.

From here, start by typing a name for the form that you are about to create. After that, simply choose the ‘User Login Form’ template to start making your user login form.

Choose the user login form template

This will launch the template in the form builder where you will notice a form preview on the right and a column of available fields on the left.

Now, simply drag and drop the fields from the left column to create your login form. For more details, see our guide on how to create a custom login page for WordPress.

Once you are satisfied with your settings, just click the ‘Save’ button to store your changes.

WPForms login form

Add Login Form to a Page/Post

Now, to add your login form to a page or post, open the page/post of your choice in the WordPress block editor from the admin area.

Once you are there, click the ‘+’ button to open the block menu and add the WPForms block.

Add login form

After that, choose the login form that you created from the dropdown menu in the block itself.

Finally, click the ‘Publish’ or ‘Update’ button to store your settings.

Add Login Form to Website Sidebar

If you want to add the login form to your website’s sidebar, then visit the Appearance » Widgets page from the WordPress dashboard.

Here, click the ‘+’ button in the top left corner of the screen to open the block menu.

From here, you need to find and add the WPForms block to the sidebar.

Add WPForms block to the sidebar

Once you’ve done that, choose the login form from the dropdown menu in the block itself.

Finally, click the ‘Update’ button to store your settings. For more details, see our guide on how to add a login form in your WordPress sidebar.

Now, you can visit your WordPress site to view the login form in the sidebar.

WPForms login widget display

Add Login Form in Full Site Editor

If you are using a block-based theme, then you won’t be able to add your login to the website sidebar using the method above.

To add a login form in FSE, visit the Appearance » Editor page from the WordPress dashboard.

This will launch the FSE, where you have to click the ‘+’ button to open the block menu.

From here, locate and add the WPForms block to any place you like on your website.

Add the WPForms block in the FSE

After that, choose the login form that you created from the dropdown menu in the block itself.

Finally, click the ‘Save’ button to store your settings.

Bonus Tip: To further customize your login form, you can see our tutorial on how to style your WordPress forms.

Method 2: Add a Front-End Login Page in WordPress With SeedProd

SeedProd is the best WordPress drag-and-drop page builder on 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.

First, you’ll need to install and activate the SeedProd plugin. For details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, visit the SeedProd » Landing Pages screen from the WordPress admin sidebar and select the ‘Login Page’ option by clicking the ‘Set up a Login Page’ button.

Set up login page

This will direct you to the ‘Templates’ screen, where you can 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

Upon selecting a template of your choice, you’ll be asked to enter a Page Name. SeedProd will then use the page name as the URL for your login form landing page.

Once you’ve done that, click the ‘Save and Start Editing the Page’ button to continue.

Enter login page details

This will launch SeedProd’s drag-and-drop builder, where you’ll see a login page preview on the right with available fields on the left.

From here, you can add any block to the page by simply dragging it from the left menu and placing it anywhere you like.

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

Login Page in SeedProd

Once you are done designing your page, don’t forget to click the ‘Publish’ button in the dropdown menu at the top to store your settings.

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, you need to 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 the Theme My Login » General page from the admin menu 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 they require both email and password to log in.

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 are 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.

Add the Login Form to a Page/Post

Now, to add the login form created by Theme My Login, open a page/post in the WordPress block editor.

From here, click the ‘+’ button to open the block menu and add the Shortcode block to the page.

After that, add the following shortcode into the block:

[theme-my-login]

Add theme my login shortcode

Finally, click the ‘Update’ or ‘Publish’ button to store your settings.

Now, visit your website to view the login form.

Login page preview

Add Login Form to a Widget Area

You can also add a login form to your WordPress widget areas using the Theme My Login block.

Simply navigate to the Appearance » Widgets page and open the block menu by clicking the ‘+’ button.

From here, you must find and add the Theme My Login block to the widget area of your choice.

Add Theme My Login block to the widget area

After that, choose the form that you want to add from the dropdown menu in the block itself.

Finally, click the ‘Update’ button to store your settings. Now, visit your WordPress site to view the login form in the widget area.

Theme My Login block preview in the sidebar

Bonus: Add CAPTCHA in the WordPress Login Form

Once you have added a custom login form, it is a good idea to add CAPTCHA to it because this page is often a target for hackers and spammers.

Adding CAPTCHA can block spambots and secure your website. You can easily do this with WPForms.

The WPForms website

Upon plugin activation, simply visit the WPForms » Settings page from the WordPress dashboard and switch to the ‘CAPTCHA’ tab.

After that, select the ‘reCAPTCHA’ option as your CAPTCHA type.

Select CAPTCHA type in WPForms

Once you do that, you must visit the Google reCAPTCHA website to create a site key and secret key. These keys will help integrate reCAPTCHA on your WordPress site.

After adding these keys, simply edit the WordPress form that you created earlier and switch to the ‘Settings’ tab.

Then, select the ‘Spam Protection and Security’ option and toggle on the ‘Enable Google v3 reCAPTCHA’ switch. Next, click the ‘Save’ button to store your settings.

Enable the reCAPTCHA in the form

You have now successfully added CAPTCHA to your WordPress login form and made it completely secure. For more detailed instructions, you can see our tutorial on how to add CAPTCHA to WordPress login and registration forms.

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 guide to improve your website speed and performance.

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. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

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

40 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. 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

  3. 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 :(

  4. 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?

  5. 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.

  6. 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

  7. 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

  8. 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.

  9. 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?

  10. 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.

  11. 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.

  12. graham says

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

  13. 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?

  14. 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.

  15. 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.

  16. 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

  17. 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,

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.