Displaying testimonials from past clients on your website can be a great way of building trust with potential clients.
If you are WordPress user and you have the Jetpack plugin installed then you may or may not know that the plugin has a custom content types feature, and one of the custom content types that comes with the free version of Jetpack is testimonials.
Once activated, the testimonial custom content type allows you to create testimonials and display them on your website as easily as creating a new post or page.
This is a particularly great feature if you are a developer building a custom theme for a client who wants an easy, hassle free way to add testimonials to their website.
In this post I’ll show you how to create and display testimonials using the testimonials custom content type setting that comes with the Jetpack plugin.
1 | Install and set up Jetpack
If you haven’t already installed the Jetpack plugin and set it up then you will need to do this first. It’s a free plugin that brings over many of the tools and features available on WordPress.com to a self-hosted WordPress website.
I have shared a full tutorial on how to set up Jetpack which you can read here.
2 | Activate the testimonials custom content type
Once you have install and activated Jetpack, you will need to activate the testimonial custom content type setting.
To do this, hover over Jetpack in the left hand menu and click Settings.
On the settings page, scroll down until you see the Custom content types section. To activate the testimonials custom content type, just click the switch button next to Testimonials. It will turn blue once it’s activated.
And that’s it! You have now activated Jetpack’s testimonials feature.
3 | Create your testimonials
To create your first testimonial, hover over the new Testimonials item in the left hand menu and click Add New.
This will take you to a page which looks a lot like the new page or post page…
Instead of entering a title like you would if you were creating a post or a page, you should enter the name of the customer or the client that the testimonial is from. Then in the main content section, paste in or type up the testimonial that you would like to display.
You can also assign a featured image to your testimonial if you wish, or even an excerpt if the testimonial is particularly long.
When you’re done, click Publish.
4 | View your testimonials
After you have saved your testimonial as a draft or after you have published it, take a look at the permalink structure of your testimonial. It should look a little something like this:
(With YOUR-URL being your domain and TESTIMONIAL-NAME being the name you have given to your testimonial. )
If you check out https://YOUR-URL.com/testimonial/ you will be able to see a full archive of your testimonials.
This is what a testimonial looks like on my website when using my current theme:
(What a quality example of a testimonial!)
If you are familiar with the WordPress template hierarchy then you will know that this testimonials page will use the archive.php template to display the content, and if there isn’t an archive.php template present in your theme folder then it will use the index.php template. This is why testimonials page looks exactly like my blog page.
If you wanted to create a specific template for your testimonials page, you would need to create a new file in your theme folder called archive-testimonial.php.
Similarly, if you wanted to create a specific template for your individual testimonial pages, you would need to create a new file in your theme folder called single-testimonial.php.
You can easily change the number of testimonials that are displayed on this page. To do this, hover over Settings in the left hand menu and click Writing. Then scroll down to the bottom of the page when you will see a section called Your Custom Content Types, and the option to change the number of testimonials that are displayed.
5 | Use a shortcode to display your testimonials
You can also display testimonials within a post or a page using a shortcode. The shortcode you need to use is simply:
[testimonials]
This is what the testimonials look like on my website without any further customisation:
You can actually customise the appearance of your testimonials by adding attributes to your shortcode:
Columns
By default, testimonials are set to be displayed in 1 column, but you can change this with the columns attribute. For example, the following shortcode will display the testimonials in two columns:
[testimonials columns=2]
Content
By default, the content of the testimonial will be displayed. If you have provided an excerpt, the excerpt will be displayed rather than the full content.
However, if you have provided an excerpt but you want to display the full content, you can use the display_content attribute and set it to full:
[testimonials display_content=full]
If you don’t want to display any content, use the display_content attribute but set it to false:
[testimonials display_content=false]
Featured image
By default, the featured image (if you have assigned one) will be displayed. If you don’t want it to be displayed then you can use the image attribute and set it to false:
[testimonials image=false]
Number of posts to display
By default, all your testimonials will be displayed when you use the shortcode. If you want to specify the number of testimonials that are displayed you can use the showposts attribute:
[testimonials showposts=5]
Ordering
By default, testimonials will display in ascending date order, but you can switch them to display in descending order using the order attribute and setting it to DESC:
[testimonials order=DESC]
You can also sort testimonials using a different criteria using the orderby attribute. To sort testimonials by author, set the orderby attribute to author:
[testimonials orderby=author]
To sort by date, set it to date:
[testimonials orderby=date]
To sort by the title of the testimonial, set it to title:
[testimonials orderby=title]
And finally, to display the testimonials in a random order, set it to rand:
[testimonials orderby=rand]
To style your testimonials further you will need to add some CSS. Make sure if you are editing a pre-made that you create a child theme if you haven’t done so already.
But wait! There’s more…
If you enjoyed this post and want more insights in to working with a web developer then you’re in luck!
Every week I share advice, stories and behind the scenes snippets with my email community, and I’d love for you to join us.
Pin for later?
