How can I create a client Account Page?

Give your client an account page to 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.

a. Create the Content Template

Navigate to Views > Content Templates.

Copy and paste the following code into your View Template Content 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 {

Name it Client Account Page and save it. 

b. Create the View

Now Go to Views > View:

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:

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."

In the page, insert your View like this:

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

Save your page.

Still need help? Ask a Question Ask a Question