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

If you allow vistitors to register and login to your WordPress website then you might want to create custom registration and login pages that blend in with your theme. Let me show you how!

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.

Add new plugin in WordPress | HollyPryce.com

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

Profile Builder plugin for creating custom registration pages in WordPress | HollyPryce.com

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.

Profile Builder Basic Information page | HollyPryce.com

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

Create form pages with Profile Builder | HollyPryce.com

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
Form pages created with Profile Builder | HollyPryce.com

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:

Login page in Twenty Seventeen | HollyPryce.com

This is what the register page looks like:

Register page in Twenty Seventeen | HollyPryce.com

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

Edit profile page in Twenty Seventeen | HollyPryce.com

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.

Login page shortcode | HollyPryce.com

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.

Add new page in WordPress | HollyPryce.com

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


Your page might look a little something like this:

Recover password page | HollyPryce.com

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:

Recover password form in Twenty Seventeen | HollyPryce.com

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.

Profile Builder Form Fields page | HollyPryce.com

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

Manage form fields with Profile Builder | HollyPryce.com

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.

Add a new form field | HollyPryce.com

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

Add a new form field | HollyPryce.com

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

Add a new form field | HollyPryce.com

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.

Widgets in WordPress | HollyPryce.com

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.

Profile Builder Login Widget | HollyPryce.com

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

Login form widget in sidebar of Twenty Seventeen | HollyPryce.com

Pin for later?