How to create custom login and registration pages for your WordPress website

In my post about users in WordPress I showed you how to add new users to your website.

I also showed you how to allow anyone to become a user of your website simply by registering with their email address and desired username.

The downside of this is that when users want to login or register as a user, they must do so via the default WordPress admin login page that you use to login to the admin area. This can be a little confusing to new users as this login page features WordPress branding and doesn’t look like a part of your website. It’s also not exactly user friendly.

Fortunately, there are plugins that will allow you to create custom login and registration pages that look like a part of your website. They fit in seamlessly with your theme and they make it so much easier for people to register as a new user.

In this post I’ll show you how to create custom login and registration pages for your WordPress website using the Profile Builder plugin.

---

How to install the Profile Builder plugin

Firstly, we need to install a plugin called Profile Builder. It’s full name is User registration & user profile – Profile Builder, but we will just be calling it Profile Builder throughout this post.

Hover over Plugins in the left hand menu and click Add New.

On the plugins page, search for “profile builder” and you will see a plugin that looks like this:

Click Install Now and then when prompted to click Activate.

How to create new form pages

Once you have installed the Profile Builder it’s time to create your login pages. We won’t be creating them manually, but instead we will use the Profile Builder’s page generator.

To create these pages, hover over the new Profile Builder menu item and click Basic Information.

On the Basic Information page, click the Create Form Page button.

This will create three new pages:

• Login – for users to login to your WordPress website
• Register – for users to register with your WordPress website
• Edit Profile – allows users to edit their details

So now if a user wants to log in to your WordPress website, you can direct them to the new login page rather than the usual /wp-admin page that you use to login to WordPress. And if someone wants to register or edit their existing profile, they can visit these new pages instead of the usual WordPress login pages. The easiest way to link to these pages would be to add them to a menu. If you aren’t too familiar with menus, you should definitely take a look at this post.

I recommend previewing these pages so you can have a look at what they look like withing your theme. You may need to view the pages in a separate browser or in private mode to see what these pages look like when you aren’t logged in.

Here’s what the log in page looks like in the Twenty Seventeen theme:

This is what the register page looks like:

And finally, this is what the edit profile page looks like:

If you actually go to edit these pages you will see that they contain shortcode that create these forms. If you delete these shortcodes then the forms won’t appear on the page.

You can also customise these shortcodes so that certain actions are taken after someone fills in a form. For example, you can choose where someone is redirected to they register, or you can automatically register a user with a certain role. You can find out more about shortcodes for Profile Builder here.

How to create a recover password page

So we’ve seen that the login, register and edit profile pages are created by default. But some of you might want to create an additional page for recovering passwords if the user needs to reset their password.

To do this, start by creating a new page by hovering over Pages and clicking Add New.

Give your new page a title and then in the content area, insert the following shortcode:

[wppb-recover-password]

Your page might look a little something like this:

When you’re ready, click Publish.

Now, preview your new page. This is what it looks like on a website using the Twenty Seventeen theme:

How to customise your registration and edit profile forms

If you wish to customise your registration and edit profile forms then hover over Profile Builder in the left hand menu and click Form Field.

This will take you to a page that looks like this:

The table contains all the fields that appear in the registration and edit profile forms. It shows you what type of field they are and whether of not they are required. You can edit these fields by clicking Edit next to the field you want to edit. You can also delete field by clicking Delete.

To add a new field, click on Select an option.

Then, choose the type of field you want to add:

Finally, give your field a name and choose whether the field is required or not. When you’re done, click Add Field.

The Profile Builder Login widget

Something I really like about the Profile Builder plugin is that is comes with a widget that allows you to add the login form to a widgetised area.

To add this widget, hover over Appearance in the left hand menu and click Widgets.

Here you will see a new widget called Profile Builder Login Widget. Drag and drop this it into one of your widgetised areas.

You can give your widget a name and provide URLs that the user will be redirected to after they login. You can also provide the URL of the registration page URL and the password recovery page URL.

Here’s what the widget looks like in the sidebar of the Twenty Seventeen WordPress theme: