Create Dynamic Testimonials in WordPress

   Daniel Stadeli

Guest post

April 1, 2020
4

The value of Testimonials for a Business

Testimonials will build credibility for your product or service. Rather than giving a long winded sales pitch yourself, let your customers recommend what you offer. In this socially interconnected world, many buyers rely more on what others say about you than what you say about yourself. Testimonials definitely help your sale when the buyer is undecided or torn between different vendors. It can be that recommendation that makes the balance tip in your favor!

Looking for a full-depth tutorial video?

Jump straight to the video!

What makes a good testimonial?

The best testimonial is the one that attacks a pain point of your typical customer, one that shares an honest experience of how your product or service solved their problem or helped them be more productive. Besides being short it needs a title and shows the name, position, and company. Use a picture to put a face to the person who wrote the piece. If you can get them to record a short audio or video, it will make it so much better. Testimonials that include facts and figures will further support your marketing claims with hard evidence from third parties.

Sample Testimonials

Let’s look at some examples of good testimonials and highlight the strong point each one makes:

Attacking the Pain Point 

An IT Manager of Intuit (tax software) explains how Slack helps his teams to solve problems faster and feel more connected despite the physical distance between the staff. This will appeal to any IT manager in charge of remote teams whose pain point is inefficient teamwork through physical separation. This testimonial also offers a link at the bottom to read the full story, so people can read the complete case study.

Pain Point: physical separation of remote team members and inefficiencies this may bring

Solution: with Slack remote teams solve problems much faster, they feel like being in the same room

Testimonial from Intuit on the website of Slack
Testimonial from Intuit on the website of Slack

Short and honest

Dribble features a testimonial page that shows dozens of honest and straightforward user reviews. The vast majority of writers are grateful designers that found more work simply by being on the platform. It’s clear that these testimonials are not altered or edited which inspires trust. Since they are also short and to the point, the viewers will read several of them and may be encouraged to sign up for this service themselves.

Pain Point: Freelance designers not having enough work

Solution: Dribble offers designers a platform to showcase their work and find plenty of new contracts

Dribble features dozens of short testimonials
Dribble features dozens of short testimonials

Showing face

BioClarity is a company that offers organic skin care products. On the Clear Skin System landing page, they feature 3 very personal testimonials with photo and video.

Testimonial section with photos and personal videos found on BioClarity.com
Testimonial section with photos and personal videos found on BioClarity.com

All three customers show their contact information below their testimonial which gives it a really strong support.

Pain Point: people with skin problems are skeptical due to many creams that make big promises and show little to no results.

Solution: 3 people who actually used the products, talk positively in a video about the results and put their name and contact information at the bottom. 

Numbers don’t lie

HubSpot is an all-in-one marketing platform that makes the claim to support an increase in leads, conversion rates, and sales. Any business looking to improve their marketing efficiency will be interested to see actual testimonials supporting those claims with real numbers.

HubSpot testimonials include hard numbers to proof one of their claims
HubSpot testimonials include hard numbers to proof one of their claims

Pain Point: Having high marketing expenses with little results to show for

Solution: A platform that works for other customers and they have numbers to prove it.

How to add testimonials to your site

Now it’s time to choose a suitable method to implement testimonials on our website. There are two fundamentally different approaches: static vs. dynamic testimonial systems. 

Ready-to-use testimonial blocks will insert a static testimonial section or slider on your website.

A static testimonial is edited directly on the part of the website where it is used
A static testimonial is edited directly on the part of the website where it is used

This is fine if you are just starting out or it needs to happen quickly. But if you want to do it right and add the same testimonials to different parts of your website, static testimonials can work against you. What if a client asks you to take down their testimonial? You will have to go through every page and slider on your site to find out if that testimonial is used there, then edit the page and replace the piece.

And as you collect newer and better testimonials, you will need to manually replace the same text and photos over and over. Does a system with dynamic testimonials sound more appealing now? 

A dynamic testimonial system is much more flexible and versatile and offers many benefits: 

  • access a centralized place to create, edit and delete testimonials
  • reuse testimonials on different parts of your website
  • search and filter testimonial database from the front end
  • add any additional fields you need, like title, website, category or tags
  • create sliders or single testimonial sections
  • randomize testimonials for every page visit
  • allow users to submit testimonials on the front end of your website with Toolset Forms
  • categorize testimonials and show them within the context where they have the most impact, eg. next to the product or service they mention
Dynamic testimonial system which we want to create in this tutorial
Dynamic testimonial system which we want to create in this tutorial

Building a dynamic testimonial system

Let’s build a dynamic testimonial system for our website using Toolset. Be sure to have the  Toolset Types and Toolset Blocks plugins installed.

Prefer to follow a written tutorial? Read on!

The following table shows the big picture of where these plugins are needed. We will not cover front-end submission in this tutorial, but for now, we will just create the testimonials through the back end.

Overview of Testimonial Process and Toolset Components
Overview of Testimonial Process and Toolset Components

Create a new Custom Post Type

Firstly we will build a new custom post type (CPT) called testimonials. Since these are Toolset basics, we won’t cover every detail here, but you can follow the CPT Training Course which is available for all Toolset clients and teaches the essentials.

For this step, we will use the Toolset Types Plugin. Go to Toolset → Post Type → Add New, fill in the fields as shown in the image below, then click Save Post Type. 

Add New Post Type: Testimonials
Add New Post Type: Testimonials

The new Custom Post Type appears in the menu right away. How easy was that? It does not contain all the fields we need yet, so this will be our next task.

New Post Type Testimonials in the Menu
New Post Type Testimonials in the Menu

Add new Custom Fields

The following image shows the custom fields that need to be set up, so if you already know how to do that, you can skip ahead. Note that the Author’s name and the actual testimonial text will be stored in the post title and content respectively. These are standard WordPress fields available for every post type and there is no need to set them up with Toolset. We only need to remember this fact once we need to display these fields.

List of custom fields for testimonials CPT to be set up in Toolset
List of custom fields for testimonials CPT to be set up in Toolset

In the Toolset → Dashboard you will find the new custom post type. Click on Add Custom Fields. A new Field Group will automatically be created in the background, which is used to group the new fields together and not mix them up with other custom fields we might have in WordPress. For creating the first field, you will be presented with a screen to select one of 20 different field types available:

Available Field Types
Available Field Types

Let’s create the upload field for the author’s image first. Click on Field Type Image and fill in the Field name (1) and optionally the Description (2).

New Custom Field example - Author Image
New Custom Field example – Author Image

Use the + Add New Field button (3) to add all the other custom fields in their respective type (see field list above). You only need to set the field type and field name.

Once you are done, click on the blue Save Field Group button on the right. That’s it, your new custom post type, with all the fields that you need, is ready.

Create some testimonials

Now we are ready to add a few testimonials before we build the front end of the site (this will allow us to see how everything looks). Go to Testimonials → Add New. It’s the same process as adding a WordPress post, but you will see the new custom fields (2). The field group title which was automatically generated before is seen under (1). (You can edit this title under Toolset → Custom Fields). Once you’re done, click Publish (3).

Add new testimonials to our custom post type
Add new testimonials to our custom post type

Show the testimonials on the front end

Now need to edit the page where we want to add the dynamic testimonials. Let’s assume for a minute that ours is a landing page for a pink drone. Insert a Block and search for Toolset → View

Insert a new block: Toolset View
Insert a new block: Toolset View

Create a new View called Testimonials…

Create New Toolset View
Create New Toolset View

…and check the new post type Testimonials. For View Loop Style select Grid and set the layout to 3 columns.

Check Testimonials post type
Check Testimonials post type
Select Grid View Loop Style
Select Grid View Loop Style

In the View Loop we need to design the structure of one testimonial (1) which Toolset will repeat as many times as we want (2). We need to insert a block for each element in the loop:

  • Author’s Image (3)
  • Testimonial Content (4)
  • Author’s Name, Position, and Company (5)
The Testimonial View Loop needs to be designed
The Testimonial View Loop needs to be designed

Let’s start by adding an image block for the author’s image. Select Yes for use a Dynamic Source, since we need the image to be displayed dynamically to match the author of the testimonial. Use the settings below and you will see the images fill in on the page.

Dynamic Source Image settings
Dynamic Source Image settings
Image source field
Image source field

Set the image size to Thumbnail 150 x 150 px and the border radius to 75 to make the image round:

Border radius
Border radius
Round image thumbnail
Round image thumbnail

Below the thumbnail, we insert a regular image block (non-Toolset) for the quotation mark and below that a Toolset Single Field Block to show the dynamic Post Content, which corresponds to the text of the testimonial:

Single field settings for the Post Content
Single field settings for the Post Content
Quote preview
Quote preview

The next block type will be Toolset Fields and Text. This is used to mix dynamic fields with static text inside the same block. In the WYSIWYG editor write any characters you need (like a comma and space to separate the position and company) and insert the dynamic fields by using the Add Field or View icon. 

Toolset Fields and Text block
Toolset Fields and Text block
Adding individual custom fields
Adding individual custom fields

We are done with the content, now let’s make a grey background color for each testimonial by clicking the cogwheel on the top right → Style Settings → Background Color. Also in the same section set the padding to 25px all around.

Set Background Color for the View Loop
Set Background Color for the View Loop

You can tweak the appearance by switching an individual block to HTML edit mode or by using CSS. Note that once you edit the HTML you cannot switch back without losing your edits.

Switch block to HTML for advanced editing

Dynamic Testimonials at your disposal

Check out the front end; the result looks beautiful! You have a sophisticated and completely customizable dynamic testimonials system that you can easily insert on any webpage or post.

Dynamic testimonials view built with Toolset Blocks
Dynamic testimonials view built with Toolset Blocks

Modify the results of the View Block

In order to control which results from the “testimonial database” are shown on this page, you can use the settings on the sidebar. These settings are managed in the top-level View block settings (2). For convenience, you can use the Block Navigator (1) to select the top-level View block.

Block Navigator
Block Navigator
Sidebar settings for View Block
Sidebar settings for View Block

Sidebar settings

  1. Content Selection: select post type (testimonials)
  2. Pagination: Set items per page with a Previous/Next Link
  3. Ordering Settings: set sorting field and direction (ascending/descending)
  4. Limit and offset: limit results, eg. show only 3 testimonials, offset: skip the first x records
  5. Custom Search: refresh method if we had a search field (n/a)
  6. Custom JS and CSS: CSS or JavaScript you wish to apply to this block
  7. Query Filter: Filter the results by a given criteria

Harvest the full potential of dynamic testimonials for your site

The real power of dynamic content lies in presenting it to the viewer in exactly the right context, where it will trigger the maximum emotional response. In our case, we want to show only testimonials about drones on the page where we sell our drone. 

We must create a category field where we can categorize each testimonial. WordPress calls such a field taxonomy and Toolset offers the possibility to create custom taxonomies for each custom post type. This is perfect! Follow these simple steps to make this site really roaring!

  1. Create a Custom Taxonomy. Go to Toolset → Dashboard and click Add custom taxonomy:
Create custom Taxonomy from Dashboard
Create custom Taxonomy from Dashboard
Setup New Custom Taxonomy: Testimonial types
Setup New Custom Taxonomy: Testimonial types

You need to actually add some values to your category (taxonomy) before you can use it, this is easiest done through the backend:

Add taxonomy values: Drones
Add taxonomy values: Drones
  1. Assign each testimonial to a category. Go through each testimonial and assign it to a category. The following testimonial is undoubtedly related to drones:
Assign taxonomy Drone to testimonial post
Assign taxonomy Drone to testimonial post
  1. Add Query Filter from the sidebar: On the landing page edit the view and click on +Add a filter
Add Query Filter to the landing page
Add Query Filter to the landing page
  1. Set Filter Criteria for the query filter. We want to filter all testimonials (results) by the new taxonomy called Testimonial types.
Set Filter by to the custom taxonomy Testimonial types
Set Filter by to the custom taxonomy Testimonial types
  1. Set the taxonomy to be filtered. Check Drone (1) to only see testimonials that have a taxonomy of drone on the landing page. Of course in another scenario, you could also check multiple values. Then click Save (2) and Publish the page.
Select taxonomy value to be filtered
Select taxonomy value to be filtered
  1. Check results: They are stunning! We now only see testimonials related to drones at the bottom of our landing page for the pink drone. How awesome is that?
Filtered results, showing only testimonials in the Drone taxonomy
Filtered results, showing only testimonials in the Drone taxonomy

We’re done!

Thanks for sticking it out to the end! This concludes our tutorial on dynamic testimonials in WordPress. Why don’t you leave a comment if this was helpful and if you have any other ideas where you plan to use dynamic content over static information on your website projects? Your sites will start to rock!

 

Comments 4 Responses

  2. Hi Daniel,

    Thank you for the great tutorial – I also commented on your video. I have a few questions:
    1. Is it possible to have it so the testimonial con be completed via a toolset form that can only be filled by a logged in toolset created user – this is to enable visitors to login, and submit the testimonial form fully from the client side?
    2. Could the new testimonial entry form be inserted on the product page making it easier to request and get product testimonials?
    3. Could the product taxonomy be automatically “prefilled” in the form based on the product page the form is embedded in so if there are a lot of products the user does not mistakenly select the wrong product taxonomy particularly if they are filling the form from a product page.
    4. Is it possible to calculate and display the a few rating metrics like High Rating, Low Rating, and Average Rating somewhere on the page?

    Thanks so much – I look forward to learning more!

    • Hi Andrew,
      Great questions!
      1. yes. Use Toolset Forms to create the front end form and with Toolset Access you can make the form available to a particular user role
      2. Depends on the theme, I know with Divi you can modify the product template and add anything you want on the product page.
      3. You would need to write code to achieve that
      4. This would be an interesting challenge to build it with Toolset (blocks/view). In SQL you have these metrics (function) on a column of data (low/high/avg) to get what you want. You could have a look at this thread: https://toolset.com/forums/topic/calculate-average-from-custom-field/