Navigation überspringen
Jetzt Kaufen
Startseite » Course lessons » Creating Custom Login Forms in WordPress

Creating Custom Login Forms in WordPress

To create a seamless experience for the site users, you can use Toolset to create custom login pages.

On this page

What you’ll need

Besides Toolset Blocks and Toolset Types plugins, you need to have the Toolset Access plugin installed in your site.

Create a template for the login form

When non-logged-in users reach the „My Account“ page, we want to provide a login form.

Custom login form
  1. Go to Toolset → Content Templates.
  2. Create a new template. Name it Login Form and don’t assign it to any post type.
  3. Add the Fields and Text block to this template.
  4. Click the Add Field or View button.
  5. Locate and click the Login form button.
  6. The Login Form dialog opens. Leave the default options and click to insert the shortcode.

You can’t get a preview of the form on the backend as it can only works from the front-end.

Template for non-logged-in users

You will display this template to non-logged-in users instead of the “My Account” page.

Set the login form to appear only for visitors

Now, you need to configure the login form template to appear on the “My account” page for users that are not logged in.

  1. Navigate to Toolset → Access Control.
  2. Click the Post Groups tab.
  3. Create a group Logged-in users only.
  4. In the Guest row, deselect the checkbox in the Read column. Then, click the pencil icon and a pop-up dialog will appear.
  5. Select Show Content Template. Here, for users with restricted access, you can select a template to display instead of the page content.
  6. Choose Login Form, which is the name of the layout we just created.
  7. Click the Set errors button to save your changes.
  8. Save your post group.
Setting the login form template location to appear on the “My account” page

Insert the link to the „Lost password“ page

Now, the “My Account” page should show the login form for the users that are not logged in.

Login form for non-logged-in users

To help users in case they forget their password, you can set up the „Lost password“ page. Once you have it, simply link to it from the Content Template we created previously for the login form.

Reset your password link

Hide pages from users and menus

To complete our “My Account” page project, we offer one final suggestion. Some pages apply only to visitors, for example „Lost password“, „Reset password“, and „Create account“.

It’s best to hide these pages from all logged-in users, thus making them available only for guests.

When you hide pages from users by using Post Groups, they will also automatically be hidden for these users in the menus.

Learn how to do this in our lesson about hiding pages from menus and users in WordPress.

Redirect users after they log in

After logging into the site, users should end up on a meaningful page. On directory or membership sites, taking them to their account page makes sense.

You can easily do this by using an additional plugin. In our example, we’ll use the LoginWP (Formerly Peter’s Login Redirect) plugin to accomplish this. After installing the plugin, do the following:

  1. Go to the LoginWP → Redirections page and click the Add New button at the top.
  2. In our case, we want to add a redirect for a specific user role. In the Rule Condition dropdown, select User Role and then use the dropdown next to it to select the specific role.
  3. In the Login URL field, enter the page you want users to end up at after logging in.
  4. In the Logout URL field, enter the page you want users to end up at after logging out.
  5. Click the Save Rule button to confirm your selection.
Setting up a redirection rule for a specific role using the LoginWP plugin

At the next login, users with the selected role will go to the specified URL.

Dario
Updated
Dezember 28, 2022
Senden Sie Feedback an unser Dokumentationsteam