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.