The “My account” page allows users to log into the site, edit their individual profiles, and manage resources (e.g., list, edit, and delete ads they created) directly from the front-end.

This page operates in two modes depending on whether a visitor is logged-in or not.

 When a user is not logged in, the “My account” page appears as a login page.

When a user is not logged in, the “My account” page appears as a login page.

When logged-in, users see their account summary with links that allow them to manage their items and edit their profile
When logged-in, users see their account summary with links that allow them to manage their items and edit their profile

When a user is not logged in, the “My account” page appears as a login page.

When logged-in, users see their account summary with links that allow them to manage their items and edit their profiles.

Building the “My account” page

Switching to Layouts
Switching to Layouts

In your CRED Training Site:

1. Navigate to Pages -> Add new.
2. Give your page a name (e.g., My account).
3. Click Save Draft.
4. Click Content Layout Editor.

The Layout Editor opens. You can now design your page using the drag-and-drop Layouts Editor.

Inserting user info and a logout link

In the first row of the first column, we will display the user’s login name, as well as his or her first and last name.
In the second column, we will include the logout link.

10 column cell
10 column cell

1. Draw a ten column cell.
2. Select the Visual Editor cell.

Visual Editor cell
Visual Editor cell

3. Type “You are logged in as.”
4. Click Fields and Views.
5. Locate the User Login field and insert it with the default values.
6. Add space.
7. Click Fields and Views again
8. Locate the User Name field and insert it with the default values.
9. Add space.
10. Click Fields and Views once again.
11. This time choose Last Name.
12. Click Create to finish adding your cell.

Two column cell
Two column cell

Let’s include the logout link:

13. In your first row, draw a two column cell.
14. Select the Visual Editor cell.

Logout Link shortcode
Logout Link shortcode

15. Click Fields and Views.
16. Locate the Logout Link and insert it with the default values.
17. Click Create to finish adding your cell.
18. Preview your layout.

Your page should look like the following.

My account page
My account page

Adding links to other pages

The “My account” page usually provides a set of links to other pages on which users can typically view and edit resources that they own.

 

My account page with links
My account page with links

We will add two links:

  • “Manage your ads”: this will link to a page listing all ads of the currently logged-in user.
  • “Edit profile”: this will link to a page on which the user can edit his or her profile.

new rows
new rows

1. Add two new rows to your layout.
2. In each row, include a Visual Editor cell.

The Edit profile and Manage your ads pages have yet to be created (check Part 9 and Part 5)

For now, you can include dummy links such as the following:

<a href=”#”>Manage your ads</a>
<a href=”#”>Edit profile</a>

Hint:
Feel free to add custom styling to your rows. Visit the Layout styling page to learn how you can add styling to your layouts.

The following show the classes we added to stylize the links in our demo site.

Styling: back-end view
Styling: back-end view

Styling: front-end view
Styling: front-end view

Hiding the “My account” page from visitors

“My account” page lists the information and recourse of the logged-in user. It means that the content should be hidden from visitors.

Let’s ensure the “My account” page is available only for logged-in users, while displaying the login form for visitors.

To hide the “My account” page from visitors, we will use the Post Groups feature of the Toolset Access plugin.

Post Groups group pages that share the same front-end access control. We will create a group called Logged in users only, which will include pages accessible only to logged-in users.

Bringing pages under Access control

Bringing pages under Access control
Bringing pages under Access control

To add pages to the Post Groups, the pages of our site must first be under Toolset Access control.

1. Navigate to Toolset->Access Control and ensure you are on the first tab, Post Types.
2. Click Pages.
3. Check the Managed by Access field.
4. Add checkboxes for all fields in the Read column.

All pages of your site will now be available for visitors by default. Later, we will restrict access to certain pages by using Post Groups.

5. Click Save.

The pages of your site are now managed by Toolset Access.

Creating a post group for pages restricted to logged-in users

Let’s create a post group entitled “Logged in users only” that will group pages that are available for logged-in users.

Post Groups
Post Groups

1. Go to Toolset -> Access Control.
2. Switch to the Post Groups tab.
3. Add your first group.

Adding a page to the group
Adding a page to the group

4. In the pop-up window that opens:
a. Give your group a name (e.g., Logged-in users only).
b. Add the My account page.

Begin entering the page’s title and the page should appear. If it does not. ensure your pages are managed by Access (see the previous step)
c. Click Add Group.

Restricting access
Restricting access

The logged-in-users-only group has been added.

5. Click on the group to expand it.

We want to have the “My account” page available for all roles except visitors.

6. Check Editor, Author, Contributor, and Subscriber.
7. Ensure the checkbox field for Guest is empty.
8. Save your group.

Visit your “My account” page on the front-end as a non-logged-in user. You should be directed to the “404 error (Page not found)” page.

We will now replace this error page with a login form.

Displaying a login form to visitors

Building a layout using a login form

Login form
Login form

For non-logged-in users, we want to provide a login form.

Login form layout
Login form layout

1. Navigate to Layouts.
2. Click Add new.
3. Draw a full width cell.
4. Choose the Visual Editor cell.

Inserting the Login Form
Inserting the Login Form

5. Click Fields and Views.
6. Locate and click the Login form button.

The Login Form dialog opens.

7. Retain the defaults offered and insert the shortcode.

The login form has now been added as the [wpv-login-form] shortcode.

8. Click Create to finish creating the cell.
9. Save your layout.

You will now use this layout for display instead of the “My account” page when accessed by non-logged-in users.

Setting the login form layout to appear on the “My account” page for visitors

Post Groups
Post Groups

1. Navigate to Toolset -> Toolset Access.
2. Switch to the Post Groups tab.
3. Click the Logged-in users only group.
4. Click the pencil icon in the Guest row.

A pop-up window opens.

Selecting the Login form layout
Selecting the Login form layout

5. Select Show Template Layout. Here, for users with restricted access, you can select a layout to display instead of the page content.

6. Choose Login Form, which is the name of the layout we just created.
7. Click Set errors to save your changes.
8. Save your post group.

Testing the “My account” page for non-logged-in users

Visit your “My account” page on the front-end as a non-logged-in user where you should see the login form.

Log into your site to test the form.

Login form
Login form

Creating the “Lost password” page

Lost password link
Lost password link

Login pages usually include a link to the “Lost password” page, where users can enter their email to request a password reset.
Using Toolset plugins, you can create this kind of page yourself. For this tutorial, you will generate two pages. One page will include the password reset form, used to change the password.

The screenshot that follows shows the process of resetting your password.

Resetting password
Resetting password

Lost password page
Lost password page

Toolset provides two shortcodes that help you create custom Lost password and Reset password pages easily.

1. Create the Lost password page (Step 1 in the previous image)
This can be a regular WordPress page that includes the Forgot password form shortcode.
[wpv-forgot-password-form reset_password_url=’http://yoursite.com/reset-password/’]
The page entered in the reset_password_url attribute will include the [wpv-reset-password-form] shortcode.

Reset password page
Reset password page

2. Create the Reset password page (Step 3 in the previous image).
Again, this can be a regular WordPress page that includes the Reset password form shortcode.
[wpv-reset-password-form redirect_url=’http://yoursite.host/my-account/’]

The user will redirected to the page entered in the redirect_url attribute after resetting the password. In our case, this is the “My account” page.

Both shortcodes are available in the user interface. Simply click Fields and Views.

Forgot password form and Reset password form shortcodes
Forgot password form and Reset password form shortcodes

The Forgot password form inserts the [wpv-forgot-password-form] shortcode. Include this shortcode in the Lost Password page.

The Reset password form inserts the [wpv-reset-password-form] shortcode. Include this shortcode in the Reset Password page.

Inserting the link to the Lost password page into the Login form layout

Now, when the Lost password and Reset password pages are ready, you can add the former to your layout as a regular WordPress link.

Inserting the link to the Lost password page into the Login form layout
Inserting the link to the Lost password page into the Login form layout

1. Open your Login form layout for editing.
2. Add a new row with a Visual Editor cell.
3. Add a regular link to the Lost password page.
4. Visit your My account page as a non-logged-in user to test the process of resetting the password.

Adding a link to the registration page

Let’s include one more link to our Login form layout. This will be the link to the Create account page we created in Part 6, which allows new users to sign up for the site.

Adding a link to the registration page
Adding a link to the registration page

1. Open your Login form layout for editing.
2. Add a new row with the Visual Editor cell.
3. Enter the following text:

New user? Please register first.

4. Convert this text to a link to the Create account page.
5. Visit your My account page as a non-logged-in user to test the process of resetting the password.

Hiding pages from logged-in users

To complete our My account page project, we offer one final suggestion.

Some pages apply only to visitors. Our training sites include the following pages:
Lost password
Reset password
Create account

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

To accomplish this, create a new Post Group that groups these pages. Check the group so that it is available for Guest users only. Please refer to the screenshot that follows.

Hiding pages from logged-in users
Hiding pages from logged-in users

Feel free to create a new layout that will display for other users. In our demo site, we called this layout “For guest only” that included the following content:

“For guests only” layout will appear if a logged-in users tries to visit a page meant for visitors only.
“For guests only” layout will appear if a logged-in users tries to visit a page meant for visitors only.

Hiding restricted pages from navigation

Please note that when you are hiding pages from some users by using Post Groups, they will automatically disappear from your navigation.

Compare the menus for non-logged-in and logged-in users shown as follows:

Navigation for logged-in users
Navigation for logged-in users

Navigation for non-logged-in users
Navigation for non-logged-in users

Summary

  • Using Toolset, you can build the My account page with different content displayed for logged-in and non-logged-in users.
  • To restrict certain pages only to privileged users, use the Post Group feature of Toolset Access.
  • Hiding/showing pages with the Post Group feature will be automatically reflected in the appearance of these pages in your navigation.
  • You can design a dedicated layout that will be displayed for unprivileged users instead of the default 404 error page.
  • Toolset provides some helpful shortcodes to fully customize the My account/login page:
    • Use the User login, First name, and Last name shortcodes to display information about users currently logged-in.
    • Use the Logout link shortcode to include a link that will log out a user and redirect him or her to another page.
    • Use the Login Form shortcode to display a login form.
    • Use the Forgot Password Form and the Reset Password Form shortcodes to create the Lost Password and Reset password pages.

Need help? Questions?

Go to the CRED Course Support page and leave your comment. Agnes, the author of the course will be happy to help you.

What’s next

In the next tutorial, we will build a frontend form for editing user profiles.

Part 8: Building forms for user profile editing