Adding a Login, Registration & Password Reset Tab Widget to WordPress Sidebar

By default, the default login, registration and password reset form in WordPress is located outside websites built with it.

In this tutorial, we will learn how to build a WordPress tab widget consisting of a custom login, registration and password reset form that can be added to WordPress sidebar as a drag-and-drop widget.

To jump ahead of this tutorial, below is a demo and code of the tab widget.

See the Pen Multi Tab Widget by Agbonghama Collins (@collizo4sky) on CodePen.

Without further ado, let’s get started with the tab widget development.

Getting Started

I’m not going to walk us through the steps in building the tab widget; feel free to poke around the source code. Rather, we’ll learn how to covert the tab widget into a working, functional login, registration and lost password form widget for WordPress.

I assume you have ProfilePress installed and activated.

With the plugin installed, click the Forms & Profiles plugin menu, then the Add New button.

Select “Shortcode Builder”,  enter a name for the form, select “Melange” as the form type and finally select “DO IT YOURSELF” to initiate the building process.

Copy the HTML code of the tab widget to the Structure editor.

And then replace the input fields with their respective shortcode equivalents like so:

Paste the CSS stylesheet of the tab widget to the CSS tab section.

Note: the errors generated by login, registration and password reset forms powered by ProfilePress are respectively wrapped in div containers with class names as follows profilepress-login-status, profilepress-reg-status, profilepress-reset-status, hence the classes in the widget style sheet.

To customize the notice displayed when a user successfully created an account, add the following to the Registration Success field.

<div class="lucidSuccess">Registration Successful.</div>

To customize the notice displayed on successful processing of a password reset by a user, add the following to the Password Reset Success field.

<div class="lucidSuccess">Check your e-mail for further instruction</div>

Finally, hit the Save Changes button to save the widget.

To add the tabbed login, registration and password reset form widget to WordPress, go to Appearance >> Widgets

Drag the ProfilePress Form widget to a desire widget area of your sidebar; select the tab widget from the select drop-down and save.

Preview your site and you should see the widget displayed in the sidebar of your site.

If you buy a copy of ProfilePress, you will automatically get this tab widget available for free.