How to Add Testimonials to WordPress with Meta Box
Tags: wordpress, testimonial, metabox
Published: 2021-04-13 06:59:33

<p>Testimonial is a very popular feature on every business website. Adding testimonials to the homepage can considerably increase the credibility of your company and products, making it much more professional. Besides, you can also take advantage of it to add important keywords to the website.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p><img class="aligncenter" src="https://i.imgur.com/JMn7boJ.png" alt="Add Testimonials / reviews to the homepage of the WordPress website." width="1900" height="998" /></p>

<p><em><span style="text-decoration: underline;">Tip</span>:</em> a tutorial video is included at the end of this post.</p>

<p>To effortlessly and quickly add testimonials, Meta Box plugin as well as its solution, MB Testimonials, is a powerful tool for you.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p><a href="https://metabox.io/plugins/mb-testimonials/">MB Testimonials</a> is a ready-to-use solution available in the Meta Box lifetime bundle only. It gives you 7 pre-built templates and a lot of settings to set up your testimonials without touching any line of code.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>Let's get started. We only have 4 steps to go:</p>

<!-- /wp:paragraph -->

<!-- wp:heading -->

<h2>Step 1: Install Meta Box and MB Testimonials</h2>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>As I have said, MB Testimonials is only available in the lifetime bundle of Meta Box. If you haven't got one yet, don't worry, please click <a href="https://metabox.io/pricing/">here</a>.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>After purchasing, log in to your account on <a href="https://metabox.io/">metabox.io</a> in <a href="https://metabox.io/my-account/">My Account</a> and download the MB Testimonials solution, then install and activate it on your website.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>Keep in mind that you have to install Meta Box framework from <a href="https://wordpress.org/plugins/meta-box/">wordpress.org</a> to use MB Testimonials.</p>

<p><img class="aligncenter" src="https://i.imgur.com/joxvG7n.png" alt="Install Meta Box plugin and MB Testimonials solution." width="989" height="500" /></p>

<!-- /wp:paragraph -->

<!-- wp:heading -->

<h2>Step 2: Add Content to Testimonials with MB Testimonials</h2>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>After installing MB Testimonials, you will have a <strong>Testimonials </strong>menu in <strong>Dashboard</strong>. Go there and click <strong>Add New </strong>to create a new post.</p>

<p><img class="aligncenter" src="https://i.imgur.com/RyEZSdf.png" alt="Add a new testimonial / review with MB Testimonials solution" width="831" height="882" /></p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>Note that in each Testimonial post, you can add many reviews from different users.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>Add the content of each testimonial here:</p>

<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","sizeSlug":"large"} -->

<div class="wp-block-image">

<figure class="aligncenter size-large"><img class="aligncenter" src="https://i.imgur.com/G59IyjZ.png" alt="Add the content for the testimonial / review on the back end of WordPress website." width="1600" height="784" /></figure>

</div>

<!-- /wp:image -->

<!-- wp:paragraph -->

<p>A testimonial includes 2 irreplaceable contents: user name and user reviews. However, to make testimonials more credible and trustworthy, you should also add positions and images of the reviewers, attached a link if available, etc.</p>

<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","sizeSlug":"large"} -->

<div class="wp-block-image">

<figure class="aligncenter size-large"><img class="aligncenter" src="https://i.imgur.com/b2Onf2x.png" alt="Add positions and images of the reviewers." width="1586" height="929" /></figure>

</div>

<!-- /wp:image -->

<!-- wp:paragraph -->

<p>Click <strong>Add more </strong>to add other testimonials, or click <strong>Remove </strong>to delete testimonials.</p>

<p><img class="aligncenter" src="https://i.imgur.com/byK1mL6.png" alt="Add other testimonials / reviews to your WordPress website" width="1585" height="908" /></p>

<!-- /wp:paragraph -->

<!-- wp:image -->

<figure class="wp-block-image"></figure>

<!-- /wp:image -->

<!-- wp:paragraph -->

<p>Notably, you can drag and drop to arrange testimonials easily like in the gif below:</p>

<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","sizeSlug":"large"} -->

<div class="wp-block-image">

<figure class="aligncenter size-large"><img class="aligncenter" src="https://i.imgur.com/Ytwl4TC.gif" alt="Drag and drop to arrange testimonials easily with MB Testimonials solution of Meta Box." width="1603" height="929" /></figure>

</div>

<!-- /wp:image -->

<!-- wp:paragraph -->

<p>Next, let's customize testimonials' display and layout.</p>

<!-- /wp:paragraph -->

<!-- wp:heading -->

<h2>Step 3: Customize Testimonials' Display and Layout</h2>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>When scrolling down you will see the <strong>Display </strong>tab which has 7 built-in templates for testimonials.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>This is an outstanding feature of MB Testimonials in comparison to other plugins. It helps you to immediately apply the built-in templates to testimonials without any adjustment.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>The templates are illustrated in the list below:</p>

<p><img class="aligncenter" src="https://i.imgur.com/gtgzutL.png" alt="Choose from 7 pre-made templates of MB Testimonials solution." width="1616" height="849" /></p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>When going to <strong>Click here</strong>, you will see the code of the template you have just chosen. You can customize and add <a href="https://metabox.io/series/custom-fields/">custom fields</a> to the template using HTML, or delete the code and create a new one.</p>

<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","sizeSlug":"large"} -->

<div class="wp-block-image">

<figure class="aligncenter size-large"><img class="aligncenter" src="https://i.imgur.com/WvGa4ox.gif" alt="Customize and add custom fields to the review template using HTML." width="1588" height="912" /></figure>

</div>

<!-- /wp:image -->

<!-- wp:paragraph -->

<p>In the <strong>Styling </strong>tab, you can customize other parameters of testimonials, for example, width, number of columns, slider's mode, ... There are a variety of options for you to make your testimonial more stunning.</p>

<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","sizeSlug":"large"} -->

<div class="wp-block-image">

<figure class="aligncenter size-large"><img class="aligncenter" src="https://i.imgur.com/WVCHFEi.png" alt="Customize other parameters of testimonials / reviews" width="1595" height="873" /></figure>

</div>

<!-- /wp:image -->

<!-- wp:paragraph -->

<p>After adding and customizing, just click <strong>Publish</strong> to get your work done.</p>

<!-- /wp:paragraph -->

<!-- wp:heading -->

<h2>Step 4: Display Testimonials on the Front End</h2>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>Once you click <strong>Publish</strong>, the plugin will give you a shortcode of the Testimonials post you just made.</p>

<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","sizeSlug":"large"} -->

<div class="wp-block-image">

<figure class="aligncenter size-large"><img class="aligncenter" src="https://i.imgur.com/s1cdfZg.png" alt="Use this shortcode to display the testimonials at any position on the WordPress website." width="1600" height="706" /></figure>

</div>

<!-- /wp:image -->

<!-- wp:paragraph -->

<p>Use this shortcode to display the testimonials at any position that you want.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>For example, I inserted my shortcode to a new page:</p>

<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","sizeSlug":"large"} -->

<div class="wp-block-image">

<figure class="aligncenter size-large"><img class="aligncenter" src="https://i.imgur.com/JW6Q6Ye.png" alt="Insert the shortcode to the front end of WordPress website." width="789" height="382" /></figure>

</div>

<!-- /wp:image -->

<!-- wp:paragraph -->

<p>And this is the result that I got on the front end:</p>

<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","sizeSlug":"large"} -->

<div class="wp-block-image">

<figure class="aligncenter size-large"><img class="aligncenter" src="https://i.imgur.com/k3Pg8Na.gif" alt="The testimonials / reviews display on the front end." width="1570" height="612" /></figure>

</div>

<!-- /wp:image -->

<!-- wp:paragraph -->

<p>There your work is done! Very simple, isn't it?</p>

<h2>Tutorial Video</h2>

<p>We made a video for this tutorial, you may want to watch it:</p>

<p>https://youtu.be/gNjQwRfI3kY</p>

<!-- /wp:paragraph -->

<!-- wp:heading -->

<h2>Last Words</h2>

<!-- /wp:heading -->

<!-- wp:paragraph -->

<p>With MB Testimonials solution, adding testimonials to WordPress websites becomes super easy. You just need to take some minutes to get everything finished. Even non-expert users can use it smoothly. Additionally, as you can see, this solution includes 7 built-in templates and allows you to conveniently customize a lot of other factors.</p>

<p>In addition to MB Testimonials, Meta Box has other useful solutions, you can refer to them <a href="https://metabox.io/product-category/solutions/">here</a>.</p>

<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<p>Meta Box plugin not only helps you add and manage custom fields but also has numerous practical and interesting apps. To get to know more about the apps and custom fields of Meta Box, don't forget to read our upcoming tutorials on <a href="https://metabox.io/blog/">metabox.io</a>.</p>

<!-- /wp:paragraph -->