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 WP-Types.com (which includes Views).

Once you have UkuuPeople and   Views from Toolset (from WP-Types.com) 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>
</div>

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 {
    color:#AA63FC;
}

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-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
		<wpv-loop>
		</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		[wpml-string context="wpv-views"]<strong>No items found</strong>[/wpml-string]
	[/wpv-no-items-found]
[wpv-layout-end]

And paste this into the CSS Editor:

.client-wrapper {
  float:left; 
  position:relative;
  margin-bottom:20px;
}

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