fbpx
Call Email

Bootstrap 4 Carousel for Advanced Custom Fields with built in Reviews Schema

Here’s a clean and easy way to add a simple reviews slider to your WordPress website using Bootstrap Carousel, Advanced Custom Fields. The great thing about this snippet is that is has review schema built in so it will help your website with SEO.

Lady leaving star reviews on website with bootstrap carousel and advanced custom fields with review schema mark up

Screenshot of bootstrap carousel with ACF for testimonials with review schema mark up

What this code will do

This code is really for developers or people who are comfortable diving into the code of their website. Obviously it for WordPress Websites. It will allow you to add an unlimited amount of customer testimonials to your website that will rotate through on an endless loop using the Bootstrap Carousel.

Requirements

  • WordPress
  • Bootstrap 4 based theme
  • Advanced Custom Fields Pro
  • Access to your website via FTP

Why do you need a reviews slider with Schema Mark up?

Add third party reviews is a great way of getting your visitors to trust your business, taking them one step closer to the buying decision. We all use reviews these days – when was the last time you bought anything from Amazon without checking the reviews first? This code snippet will add a reviews loop to your site that is eye catching an easy to read and understand. Your website visitors will quickly scan your reviews as they scroll past and see that your customers are prepared to say good things about you. Your visitors will start to trust you and feel confident in approaching you to purchase your goods or services.

Where to put your reviews carousel

The best place for your reviews is after your main messages. The idea is that people will have got an understanding about what your business does and are still interested, so they are looking for more information. The reviews is a good way to give those who still aren’t 100% sure about you a little push over the edge towards becoming a customer.

It’s best to have the bootstrap carousel with reviews on the homepage, though you could put it on the footer so it appears on every page if you wish, though it’s better for SEO if this particular snippet only appears once. You should add individual reviews for your service and product pages so the search engines see a different set of reviews with their own mark up.

What is Schema Review Mark Up and why do you need it?

According to this post on Moz.com schema mark up, sometimes called Structured Data or Rich Snippets is:

“Schema.org (often called Schema) is a semantic vocabulary of tags (or microdata) that you can add to your HTML to improve the way search engines read and represent your page in SERPs.”

In layman’s terms it is invisible code on your web page that tells Google exactly what a piece of text is. The mark up follow strict rules and for reviews there are 5 elements in the ReviewRating mark up:

  1. Description – the body of the review
  2. Author – who wrote the review
  3. Date – date the review was written
  4. Rating Value – marks out of 5

This code now tells Google that you have positive reviews about your business and, in an ideal world, you will start to get those little gold stars under your listing on search results. Look at this screen shot for the search term ‘Jaguar Dealer’  one company has 5 stars under their listing, so immediately people can see that this is a trusted company, and it really does make the listing stand out, so searchers are more likely to click on the link.

Google search results showing one company that has stars under their listing from review schema mark up using Bootstrap Carousel

How this code works

This snippet of code adds a Bootstrap Carousel to your website that feeds from an Advanced Custom Fields section in the WordPress Dashboard. I use the Options page in ACF. Note – I’ve missed off the date section of the mark up, I felt it’s not necessary, and the Rating Review is not editable – I figured people would only be putting 5 star reviews on their websites. I wanted this to be as simple to use as possible, especially if you are a developer who will eventually hand the site over to your client who may not be that experienced with WordPress and running websites in general.

The Review Section Header

The header section where it says “What our customers say about WordPress Theme Library” automatically adds the blog name after “What our customers say about… ” . You can change this in the code on line 10 where it says:

<?php bloginfo( 'name' ); ?>

1 – Is your WordPress website build on Bootstrap 4?

If not, don’t bother! You can install Bootstrap on your website but it’s a bit extreme just to run one bit of code. If you are dead set on installing this snippet here’s the link to download Bootstrap.

2 – Install Advanced Custom fields

You will need ACF pro installed on your website – you can get it here.

3 – Add the ACF Options Page to your site

You can just copy and past this bit of code into the functions.php file in your WordPress Theme

if( function_exists('acf_add_options_page') ) {
  
  acf_add_options_page();
  
}

4. Install the Custom Fields

I’ve exported the field so you can import them into ACF – down load the file here.

acf-hero.json

5. Add this code to your homepage via FTP code editor

Add this bit of code where you want your reviews carousel to go in your front-page.php template

<!-- Testimonial Section ***************************************** -->

<section class="container bg-dark text-white text-center text- p-5 testimonial h-100" itemscope itemtype="http://schema.org/Review">

<!-- Heading -->
  <div class="row">
    <div class="col">
    <p class="h2">Reviews</p>
    <p><div itemprop="itemReviewed" itemscope itemtype="http://schema.org/Thing">
      What our customers say about  <span itemprop="name"><?php bloginfo( 'name' ); ?></span><br>
    </div></p>
      </div> <!-- End Col  -->
   
  </div> <!-- End Row -->
<!-- End Heading -->

<!-- ACF Bootstrap Carousel ***************************************** -->

<?php if ( have_rows( 'reviews', 'option' ) ) : ?>


<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">

  <?php $i = 0; ?>
        <?php while ( have_rows( 'reviews', 'option' ) ) : the_row(); ?>


            <div class="carousel-item <?php echo $i==0 ? 'active' : ''; $i++; ?>">
              <div class="row h-100 align-items-center">
                  <div class="col-md-8 offset-md-2 testimonial-inner align-self-center">


                  <div itemprop="reviewRating" itemscope="" itemtype="http://schema.org/Rating">
        <p class="my-5"><span itemprop="description"> <?php the_sub_field( 'review_text' ); ?></span></p>
        <span class="d-none" itemprop="ratingValue">5</span>
    </div>

                    <div itemprop="author" itemscope="" itemtype="http://schema.org/Person">
                        <span itemprop="name"><?php the_sub_field( 'review_name' ); ?></span>
                    </div>

                    
                  </div> <!-- End Col -->
              </div> <!-- End Row -->

            </div> <!-- End Carousel Item -->

  <?php endwhile; ?>
  </div> <!-- End Carousel Inner -->

  <!-- Controls -->
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

  <!-- End Controls -->

</div> <!-- End Carousel -->

<?php endif; ?>


</section>

<!-- End Testimonials section *********************************** -->

That’s all folks! Easy, eh? Hopefully you now have everything you need to add a simple reviews slider that will boost your site’s SEO using the Bootstrap Carousel and Advanced Custom Fields.

Business photo created by photoroyalty – www.freepik.com