Create a Client Account Page

Give your client an account page, so they can view their information.

This is possible for anyone who has downloaded UkuuPeople and  Toolset from (which includes Views).

Once you have UkuuPeople and   Views from Toolset (from installed, you can proceed with this tutorial. 

Create an account details View.

1. Create the Content Template

Navigate to Views > Content Templates and click on Add New.

Create a Name for your template.

Copy and paste the following code into your Edit Content Template area: 

<div class="contact-display-wrapper">
<div class="contact-image">[types field="contactimage" size="full" align="none"][/types]</div>
<h3>Welcome, [types field="display-name"][/types]</h3>
Your email: 
[types field="email"][/types]
Your Website:
<span class="purple">[types field="website"][/types]</span>
Your address: 
<span class="purple">[types field="streetaddress"][/types]
[types field="streetaddress2"][/types]
[types field="city"][/types], [types field="state"][/types] [types field="postalcode"][/types]</span>
Your primary phone no: <span class="purple">[types field="phone"][/types]</span>
Your mobile phone no: <span class="purple">[types field="mobile"][/types]</span>
Your preferred contact method: <span class="purple">[types field="privacy-settings" separator=", "][/types]</span>

And paste this into your Content Template CSS and JS area:

.contact-display-wrapper {float:left; position:relative; width: 100%; box-sizing:border-box; margin-bottom:20px; font-size:14px;}
.contact-image {float:left; position:relative; box-sizing:border-box: width:100%;margin-right:20px; margin-bottom:20px; }
.client-label {font-size:14px; font-weight:light;}
.purple {

And now go ahead and Publish it (or Create).

2. Create the View

Next Go to Views > View and click on Add New.

Select Display all results (the top option) and give your View the exact title: Client Account Page. This is so the custom Views shortcode I give you later matches this title.

Select Post types and UkuuPeople.

Configure the Query Filter as follows:

Click on Add a filter.

Scroll down to Custom Fields > wpcf email (this is the email field from UkuuPeople).

Leave (or set) the fields in the dialogue box to:         =, CHAR and Constant.

Paste "VIEW_PARAM(useremail)" into the final blank field. This will be used to define which post the View will query (we want it to query only the post linked to the logged-in human).

So the end result of the query section looks like this:

In the loop output area, paste this code: 

	<!-- wpv-loop-start -->
	<!-- wpv-loop-end -->
		[wpml-string context="wpv-views"]<strong>No items found</strong>[/wpml-string]

And paste this into the CSS Editor:

.client-wrapper {

Save your View.

Create a WordPress page or post named, "Client Account Page," or "Client Profile" by going to Pages (or posts) > Add New.

After adding the title to your page, select Fields and Views > Views and choose your Client Account Page view from the list of views.

Now you can click Publish your work. To see what it looks like, click on the View Page link.


In the page, insert your View like this:

[wpv-view name="Client Account Page" useremail='[wpv-current-user info="email"]']

Save your page.

“Everything you need to know about your humans in one spot.” 

Still need help? Ask a Question Ask a Question