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 logged-in, users see their account summary with links that allow them to manage their items and edit their profiles.
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.
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.
1. Draw a ten column cell.
2. Select the 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.
Let’s include the logout link:
13. In your first row, draw a two column cell.
14. Select the Visual Editor cell.
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.
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.
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.
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>
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.
“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.
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.
Let’s create a post group entitled “Logged in users only” that will group pages that are available for logged-in users.
1. Go to Toolset -> Access Control.
2. Switch to the Post Groups tab.
3. Add your first 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.
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.
For non-logged-in users, we want to provide a login form.
1. Navigate to Layouts.
2. Click Add new.
3. Draw a full width cell.
4. Choose the Visual Editor cell.
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.
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.
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.
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 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.
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.
The page entered in the reset_password_url attribute will include the [wpv-reset-password-form] shortcode.
Please note that for redirection to work on a multisite WordPress installation, you need to add the subdomains you are redirecting to, to the list of allowed subdomain. You can do this by going to the Toolset -> Settings page and clicking the Front-end Content tab. There, scroll to the Safe redirects section and add your subdomains individually, or use *.example.com to allow all subdomains of a given domain.
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.
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.
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.
Now, when the Lost password and Reset password pages are ready, you can add the former to your layout as a regular WordPress link.
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.
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.
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.
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:
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.
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:
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:
- 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.
Go to the CRED Course Support page and leave your comment. Agnes, the author of the course will be happy to help you.
In the next tutorial, we will build a frontend form for editing user profiles.