Create a Testimonials section for your WordPress site – the Right Way!

I was recently given the task of updating the testimonials section of our company WordPress site. Imagine my disappointment to see a static page with a running list of paragraphs and author names. I said to myself, we can do way better.

Let’s take a glimpse of what we’re going to be building:

testimonials-3

We will be creating a Testimonials section using “Post Types” and “Custom Fields” which will work in any self hosted WordPress. Note that you may need a little bit of PHP and CSS skills.

The Problem with a Static Page:

The biggest issue I have with the static page is that you can’t use these entries in any other part of the site. For example, we have a small widget in our homepage that shows just a single testimonial. That means we have to duplicate these puppies in the static page and the homepage. Another problem is that each time you need to need to add an entry – the page becomes longer and longer. Pagination becomes a bit crazy. I guess you can use “Next Page” shortcodes – but still, a bit archaic. Lastly, it is quite cumbersome adding paragraphs and editing HTML for each entry.
Enter “Post Types”.

Why “Post Types” and “Custom Fields”

Creating your own Post types offer so many advantages. The most obvious is that you can continue to use the familiar WordPress “Add New” and “Edit Post” interfaces – whenever adding a new entry. This is because they ARE the same as your regular “Posts” – just a different “type”.

Another advantage is that you can define almost every element of this new Post Type such as a custom slug, exclude it from the menu, exclude it from search, have it’s own archive and single templates – almost every custom feature is definable. Read the WordPress docs for more information on these custom attributes.

Custom fields on the other hand, are key / value pairs we can use for each of our testimonials. In our case, we would need a “client” and a “company”. We will also make it real user friendly by creating “Meta Boxes” for them. You’ll see what I mean as we dive deeper. So are you ready to get started?

Let’s begin.

Step 1) Create the “Testimonials” Post Type

First step is to edit your current theme’s functions.php file. If it doesn’t have one, you need to create it and place it in your theme’s root folder. A functions.php file is the default file that stores all of your theme’s PHP functions. Add the code below, and I’ll explain what it does right after.

The meat of the above code is the “register_post_type” method. This function takes 2 arguments, the name of your Post type, as well as an array of settings that you can use to tweak your post type. As you can see, we are assigning a custom slug to the “rewrite” key, as well as excluding it from search results through the “exclude_from_search” key. For a detailed explanation of the settings you can use, consult the WordPress API.

Save your functions.php and log in to the admin. You will see a “Testimonials” section appears in the left menu. Go ahead and add some entries and you should see your testimonials fill up the right side – similar to “posts”.

testimonials-1

By now you should already see how powerful this type of functionality is. Let’s continue to the next step and add Meta Boxes for the needed Custom Fields.

Step 2) Create the Custom Fields / Meta Boxes

As mentioned before, we need a “Client Name” and “Company” field – to add to each of our testimonial. This is easily done through “Custom Fields”. But the default WordPress implementation is a bit tacky – so we need a better way of presenting it: this is done through “Meta Boxes”.

Let’s add the code below to our functions.php file:

So to explain the code above, we create three new functions. The first two are setting up the input fields. Function “my_add_meta_box()” is simply a wrapper for “add_meta_box()” which takes several parameters such as the title of the meta box, display name, the call back function (the other function), the post type etc.

The callback function my_meta_box_cb() is the HTML we output in our form. If you read carefully – it’s creating the labels and input fields, along with it’s default values and simply echoing it. Next is actually saving the values to the database.

We have my_save_meta_box(), which does several checks and exits if it doesn’t meet our requirements. Then we update / save through update_post_meta() methods.

Finally, we have a couple of actions – which hooks our functions to the WordPress internal methods.

Go ahead and click on a testimonial to edit. Notice our nicely formed meta boxes:

testimonials-2

Let’s set a featured image on a testimonial by setting a post thumbnail. Note that your theme has to support this feature in order for the “Featured Image” box to appear. Also, see in our code above that we are setting “thumbnail” as one of the values in the “supports” key – which adds this functionality to our post type.

Again, consult the WordPress API for more information on enabling post thumbnails in your theme.

Step 3) Create the Output: The Testimonial Archive

Now we’re getting to the fun part – presenting our data. Our company needs a running list of testimonials, along with the author thumbnail, name and company. So we’re jumping straight to this view (we’re not going to worry about the single view since it’s not necessary in our case).

Create a new file in your theme folder and call it “archive-testimonials.php”. Add the following loop inside your new file.

Note that the above code is just for the “loop” of your file. You need to add the other template tags such as getting the header and footer etc. The above is the same as any other loop in WordPress. The only way that it knows how to grab the “testimonials” is through the file name “archive-testimonials.php”.

The styling for our Markup above

Now to achieve our round author thumbnails and containers, we need to add some CSS Magic. In your theme’s CSS file (usually called styles.css), append the code below:

As you can see from our code above, each CSS rule is prefixed by “post-type-archive-testimonials”. This is default behavior by WordPress, which is to append this class to the archive page of your custom Post type. This is very useful especially if you want to organize your CSS files efficiently.

This also opens up many possibilities including writing your CSS in an Object Oriented fashion. But that’s an entirely different topic.

Save your css file and navigate to your http://yoursite.com/testimonials. You should see our HTML and styles in full effect.

Let’s move on to creating a custom widget to show in different parts of our page such as the homepage.

Step 4) Create a Homepage Widget

So now we have data. We are successfully display them it a running list – which is the main “testimonials” page. Now we can use that same list – and display it in other sections of our site. I’ve seen this implemented in the sidebar, but in our case – we’re putting it in our homepage (since we’re using a custom home page template).

Now I know I mentioned “widget”, but I’m not really going to build an actual WordPress widget – which you can reuse anywhere in your site (which is the best way to do it by the way). But for the sake of this tutorial – which is getting too long, I’m simply going to output it in the page.

For a tutorial on how to create a WordPress widget based on your Post Type – I have a separate tutorial for that.

Now, in your homepage template (or sidebar, footer etc) – paste the following code:

The code above is simply HTML with a combination of PHP. The meat of this code is WP_Query() – which is a WordPress class that deals with special queries to the database. In our case, we want our post type “testimonials”, we only want 1 and we want the order to be “random”.

Note the $args array that sets up all of those requirements. Then we create an object called $testimonilas from the WP_Query() class – which we then execute like a normal WordPress loop.

Styles for our widget

Now that we have our widget that pulls just a single testimonial, we also want this presented it a different way than our archive page. Let’s paste the code below into our CSS file:

Save your CSS file and view your site homepage (or wherever you plugged the widget code in). If all is successful, you should see a box like below:

testimonials-4

Note that the heading for this widget links to our “testimonials” archive page. Also, you also need to consider making them responsive by using a solid framework such as Bootstrap.

Conclusion

I think that covers it. We now have a working system on adding new testimonials to our company site. Now this task can be assigned to the editors of the site. All they have to do is add new entries – as if they were adding posts (which they’re already familiar with).

Oh, I almost forgot – the thumbnails for the client faces have to be a square. This is to make the perfect round shape – and make sure their faces are in the middle.

21 Comments

  1. Hi..this is so great. But I have problem.
    I want to put all testimonial list on homepage.

    I have tried to make testimonials.php and call the archieve with

    But it’s only show 1 testimonial. I want to show all testimonials in the homepage. How can I do that?

    Reply
    • Sorry for the late response. But yes you can definitely do that – since the testimonials are a custom post type that you can query. As a matter of fact – see “Step 4” above – I’m already using WP_Query to query the post type = just don’t put a limit on the it.

      Reply
  2. How to show all testimonials in one page? for example in single post file. I have tried your tutorial, but it’s only show 1 testimonial per page

    Reply
  3. I have added the loop to a new template file of my theme, and re-named the file to archive-testimonial.php, then set a testimonial page with that template, but nothing is loading.

    Reply
  4. I found this code after doing all the previous steps

    although I added 3 testimonials

    Testimonials

    ‘posts_per_page’ => 1,
    ‘orderby’ => ‘rand’
    );
    $testimonials = new WP_Query( $args );
    // The Loop
    if ( $testimonials->have_posts() ) {
    while ( $testimonials->have_posts() ) {
    $testimonials->the_post(); ?>

    No testimonials found

    Reply
  5. Hi Michael, great tutorial.
    I need to show more than one page of testimonials using the post page navigation. I can display multiple testimonials on a single page but the navigation always includes all posts, not just the testimonials.
    Any ideas or suggestions on how to resolve this would be appreciated?
    Thanks in advance.

    Reply
  6. Hi Michael,
    I copied step 1 and step 2 into my functions.php and when I saved the changes, I got server error 500 and I cannot access my site at all. Any suggestions on how to fix that?

    Reply
  7. Thanks for sharing excellent informations. Your web site is very cool. I’m impressed by the details that you’ve on this website. It reveals how nicely you understand this subject. Bookmarked this website page, will come back for extra articles. You, my pal, ROCK! I found simply the info I already searched everywhere and simply could not come across. What an ideal website.

    Reply

Leave a Comment.