Having testimonials displayed on your client’s website is a always a nice bonus, and helps to highlight the brand’s personality and keep up with its audience.

The scope of this tutorial is to build a WordPress Testimonial Page Template with the help of WCK – Custom Fields and Post Type Creator plugin.

How you choose to do this is a matter of preference. You can opt for one of these options:

• choose from a list of plugins that make only testimonials;
• you can also use Custom Post Types, that attaches your testimonials to a particular page;
• or, our very own favorite, choose to get your hands on by using Custom Fields that are attached to a certain Page Template.

A WordPress Testimonial Page Template with WCK

For us, the most flexible and intuitive way to create a WordPress Testimonial Page is by using Custom Fields and create our own Page Template.  We’ll use the WCK – Custom Fields Creator to speed things up.

1. Creating the WordPress Testimonial Page

The first step of our tutorial is to create our page, from the Pages menu.

The page will be simply called ‘Testimonials’, and will be later used to display the client’s testimonials.

2. Building our Testimonial Custom Page Template

Next, we need to create our custom page template, in order to customize it with the proper fields.
When choosing the page template, we have to create our own template which will actually show this metabox created by us only on pages that have this particular page template.

So, let’s create a new template by entering our theme folder and create a new .php file called testimonials.php.

For the beginning we will only start with a template name inside a PHP comment, and after that insert the following piece of code for our custom page.

The custom page template we are about to create is based on the TwentyTwelve theme.
First you need to enter a template name and copy the page.php content over to testimonials.php

1

<!--?php /** * Template Name: Testimonials * Description: A Page Template for displaying Testimonials. */ get_header(); ?-->

The same logic applies even if you’re using a different theme, the only thing that might differ is the html structure.

Extra information on how to create your own page template can be found here.

3. Setting up WCK

The next step would be to download the WordPress Creation Kit plugin, install and activate it.

WCK will help us with the creation of the custom fields that we will attach to the Testimonials page template.

Right after activating the plugin, you’ll notice a new menu item called WCK. It has the following tabs: Start and Settings, Post Type Creator, Taxonomy Creator and Custom Fields Creator.

4. Adding and Editing a new Meta Box

Now that the page was created we need to add custom fields to it. For this we’ll use WCK – Custom Fields Creator. Click ‘Add new Meta Box’ and let’s start filling out the fields.

Adding a new Meta Box asks primarily to complete the Meta Box Arguments, as shown below. The argument ‘Meta Name’ has to be unique, and further attached to a page. We named it “testimonialsarea”.
For the ‘Repeater’ and ‘Sortable’ argument we will select yes, since we will want to add a variable number of testimonials to our page. From the page template dropdown make sure you select: Testimonials.

Next we can start adding the ‘Meta Box Fields’, which will actually hold our meta data.

For our WordPress Testimonial page we added the Name, Testimonial and Avatar custom fields. For this fields we have to fill in the Field Title, Field Type, Description, and if needed the ‘Required’option. As you’ve seen, when completing the ‘Field Type’ you’ll be able choose from a variety of custom fields: wysiwyg editor, upload, text, textarea, select, checkbox, radio.

Custom Fields are just some extra fields that display arbitrary extra information to a particular post or page. (See more about them here.)

Now, we just have to hit the ‘Publish’ button and go back to our Testimonial Page.

5. Adding Content to our Testimonials Page

Once on the Testimonials page make sure to select the “Testimonials” page template from the Page Attributes section.

After making this selection and clicking “Update” the Testimonials Box with the defined custom fields will appear beneath the wysiwyg editor box.

Now we can start inserting our data in these fields. Lets add three testimonials, by completing all our custom fields and clicking “Add Entry”.

Hitting the ‘Update’ button will save our information, but as you will see, nothing is displayed on our page in the front-end.

6. Listing our Testimonials

We’ll be able to get our testimonials displayed by adding the code below to our newly created page template. Make sure to include the following part in the testimonials.php file inside the loop.

As you can see, we have to make use of certain functions for our avatars to get displayed, because the uploads store only the ID, and the function we have to use is wp_get_attachment_image_src.

What’s there left to mention is the extra style of how our testimonials are displayed on our particular page. We will modify a bit our style.css sheet to design the custom fields and that should be pretty much it.

Before saving our final WordPress Testimonial Page, I removed the widgets for this page, for a clearer result, and may do this if you want.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

.tcontainer{
	width:239px;
	float:left;
	margin-right:20px;
	margin-bottom:20px;
	border:1px solid #ccc;
	border-radius:3px;
}
 
.tcontainer p{
	font-size:80%;
	padding:20px;
	margin:0;
}
 
.tcontainer .tcontent{
	min-height:280px;
}
 
.tcontainer .tname{
	font-size:100%;
	background:#fffce9;
	font-weight:bold;
	text-decoration:italic;
	text-align:center;
	border-top:1px solid #ccc;
}

This is it, you have created your very own WordPress Testimonial page powered by Custom Fields! This tutorial was meant to give you a better perspective on how WCK may come in handy in different development tasks.

The plugin’s functionality extends way more than what’s shown in this tutorial so if you have a particular project in mind where you think WCK may help make sure to leave a comment.

• Share:
• Facebook
• Twitter
• Linkedin