Let Users Sign In and Recover Passwords On The Front-End Of Your WordPress Site

Earlier this month, Rae published a great post on how to fully customize and brand your site’s login page.

If you only have 15 minutes though, there is an alternative and that’s to add front-end login, registration and password recovery directly into your site’s pages and sidebars.

Weekend WordPress Project logo
Use widgets and shortcodes to brand your sign-in, register and forgotten password functions.

The problem with the builtin sign-in, register and password recovery forms are that they carry the WordPress branding and don’t look anything like your site.

Whilst you can do some amazing things with the sign-in page, there is a quicker path to branding these pages as your own and that’s to have all the action take place in a page of your website.

Sidebar Or Page (Widget Or Shortcode)?

Your first decision is to decide whether you want to allow login from a sidebar (a widgetized area). This will be mostly dictated by your theme layout and perhaps also how your theme responds when viewed on smaller devices such as tablets and mobiles.

Many themes either move sidebars to the footer or drop them altogether on the smaller screens which is not going to be too useful if that’s where your sign-in form is.

The alternative is to use a new or existing page. Unlike widgets this won’t make the form available on every page, of course, but does mean that you don’t have to worry about the form disappearing on those small devices.

Adding A Sign-in Widget

Screengrab of the tabbed widget widget
A perfect widget except for
hard-coded phrasing.

There are many, many widgets out there that will put a sign-in form and more into a widgetized area but as is the case, no one plugin seems to be perfect. That said, I like these two:

Why aren’t they perfect? Well Tabbed Login Widget is great except that there are no settings to configure, so if you don’t like any of the headings or text, you can’t easily change it. On the plus side it does support signing in, registering (if enabled) and password recovery all from the widget.

Sidebar Login does a simple job, very well. It is highly configurable, even allowing user profile fields such as First Name to be merged into the widget display when a user has signed in but sign-in is all it does with the forgotten password link, for example, using the built-in WordPress page.

To use, just install either plugin and then go to Appearance > Widgets and drag the widget to the appropriate sidebar and, in the case of Sidebar Login, configure.

Using A Shortcode On An Existing Page

If you want to go down the page and shortcode path then Profile Builder is an excellent choice.

Once installed, this plugin provides the following 4 shortcodes:

  • [wppb-edit-profile] – to grant users front-end access to their profile (requires user to be logged in)
  • [wppb-login] – to add a front-end login form
  • [wppb-register] – to add a front-end user registration form
  • [wppb-recover-password] – to add a password recovery form

You can configure how these shortcodes behave through the plugin’s settings page which is accessed via Users > Profile Builder, including goodies such controlling which fields appear on the edit profile and registration page and whether to allow users to use their email address to sign-in instead of their username (always a good idea, I would suggest).

Screenshot of WordPress page with sign-in, register and recover password forms shown.
All the forms you need for front-end user management.

Profile Builder also has a premium version that comes with plenty more options.

To present a form to your visitors, you just need to add the appropriate shortcode to a page’s content.

And you’re done. A quick and relatively easy way to make the core functions of sign-in, register and forgotten password look as though they actually belong to your site.