How do I display my data on a (private) front-end page?

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

Many users want to display their view on a private front-end web page, allowing logged-in organization staff to interact with the data without accessing the wp-admin dashboard.

Good news, you can use Views (from Toolset Plugins) to display your data front end, our favorite tool for creating front end views of WordPress data . 

I'm going to show you how to create this simple directory for private (or public) display:

(Mobile view):

You can download Types and Views here:  http://wp-types.com/. This front end display tool is well worth the investment.

After installing Views by Toolset Plugins, Go to Views > Content Templates

Click on Add new Content Template:

Name your view. I've named mine Humans Single, because content templates display a single item (you query the items for the loop after you make the content template by creating a view).

Paste this code into your body content field (You can also the Fields and Views button in the image above to select your contact fields from a list before you style them I'm just going to give you the whole block of code):

<div class="contact-display-wrapper">
[types field="contactimage" size="medium" align="none" resize="pad" padding_color="#FFF" class="contact-image"][/types]
<div class="contact-fields">
<h3>[types field="display-name"][/types]</h3>
[types field="email"][/types]
[types field="streetaddress"][/types][types field="streetaddress2"][/types]
[types field="city"][/types], [types field="state"][/types]
</div>
</div>
Paste this css into the css editor: 
.contact-display-wrapper {float:left; position:relative; width: 50%; border-sizing:border-box; margin-bottom:20px;}
.contact-fields {position:relative; float:left; width:auto; box-sizing:border-box; margin-top:0;}
.contact-image {float:left; position:relative; box-sizing:border-box: width:50%;margin-right:20px; margin-bottom:20px; }
@media screen and (max-width:500px) {
  .contact-display-wrapper  {width:100%;}
}

So your page looks like this:

Save your Content Template.
Navigate to Views > Views.
Click Add new View.
Select "Display all results" and name your view. I've named mine My Humans.
Under the Query section, select UkuuPeople as your post type.
Under Ordering Select Field - Last Name and Ascending:

Optional: Go to the filters section, and filter by which Ukuu Humans you want to display. For example, you could be displaying your internal company directory. 
Filter by Tribes:
Select which tribe, in my case, I used Demo. Select your Tribe and click Save.

Under the Loop section, click Loop Wizard
Selected Unformatted display.
From the fields selector, select your content template - Humans Single and click Finish.
Your final output will look like this.
Save your view.
Insert your view in post or page. Whether you set the post or page to private in WordPress, the data will be private unless an admin sets all UkuuPeople contacts to public. For this demonstration, I used a private post with private data for front end logged-in users. 
To insert your view, click Fields and Views.
Click on View.
Select your View from the View list. 
That's it. You can now save and view your post. 

Still need help? Ask a Question Ask a Question

Related Articles