How to Create Testimonial Slider in Gutenberg (without Plugin)

Tired of the same old static testimonials gathering dust on your website? Would you like to add some compelling social proof to your website so that your visitors are genuinely captivated? Look no further!

This tutorial unlocks the secrets of crafting a fascinating testimonial slider within the WordPress Gutenberg editor without relying on a single plugin.

Forget fumbling with third-party installations and bloated interfaces. We’ll harness the power of native Gutenberg blocks and custom code to sculpt a slider that showcases your glowing reviews in stunning style.

Steps to Create Testimonial Slider in Gutenberg (without Plugin)

Step 1: Add the Code Snippet to the functions.php File

First, we will add the PHP snippet to the functions.php file.

On your WordPress dashboard, go to Appearance > Theme File Editor. You can find Theme File Editor under the Tools menu if you’re using a block theme.

Once you enter the Theme File Editor page, select the functions.php file. Afterward, paste the PHP snippet below at the end of the function file content. Next, update the theme file by clicking the Update File button.

function ti_custom_javascript() {
    ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
$(document).ready(function() {

$('.next-btn').click(function() {
  var currentSlide = $('.wpb-slide.wpb-active-slide');
  var currentSlideIndex = $('.wpb-slide.wpb-active-slide').index();
  var nextSlideIndex = currentSlideIndex + 1;
  var nextSlide = $('.wpb-slide').eq(nextSlideIndex);
  currentSlide.fadeOut("fast");
  currentSlide.removeClass('wpb-active-slide');
  if (nextSlideIndex == ($('.wpb-slide:last').index() + 1)) {
    $('.wpb-slide').eq(0).fadeIn("fast");
    $('.wpb-slide').eq(0).addClass('wpb-active-slide');
  } else {
    nextSlide.fadeIn("fast");
    nextSlide.addClass('wpb-active-slide');
  }
});

$('.prev-btn').click(function() {
  var currentSlide = $('.wpb-slide.wpb-active-slide');
  var currentSlideIndex = $('.wpb-slide.wpb-active-slide').index();
  var prevSlideIndex = currentSlideIndex - 1;
  var prevSlide = $('.wpb-slide').eq(prevSlideIndex);

  currentSlide.fadeOut("fast");
  currentSlide.removeClass('wpb-active-slide');
  prevSlide.fadeIn("fast");
  prevSlide.addClass('wpb-active-slide');
});

});
    </script>
    <?php
    }
    add_action('wp_head', 'ti_custom_javascript');

Note: If you are afraid of breaking your site after adding the new function to the functions.php file, you can create a child theme or custom plugin. Read here to learn more.

Step 2: Add the Custom CSS

Next, we will add the additional CSS to your WordPress site.

On your WordPress dashboard, go to Appearance -> Customizer -> Additional CSS. Copy the CSS snippet below and paste it into the input field. If you use a block theme, you may need to enable the theme customizer first.

Here is the CSS snippet you can use:

.wpb-slide{
 display: none !important;
}
.wpb-active-slide {
  display: block !important;
}
.wpb-slide h3 {
    display: inline;
}
.wp-container-17.wp-block-buttons.eplus-wrapper {
    margin-top: -35px;
}
.wpb-slide .wp-block-column:last-child img {
    height: 475px;
    width: 475px;
    object-fit: cover;
}

.slide{
    display: none !important;
   }
   .active-slide {
     display: block !important;
   }
   .slide h3 {
       display: inline;
   }
   .wp-container-17.wp-block-buttons.eplus-wrapper {
       margin: 0 auto;
   }
   .slide .wp-block-column:last-child img {
       height: 700px;
       width: 700px;
       object-fit: cover;
   }

Once you finish adding the CSS snippet, apply it by clicking the PUBLISH button.

Step 3: Create the Testimonials Slider

Once you add the custom PHP and CSS code, now it’s time to create the content (testimonial slider). We will start everything from scratch, so create a new post type (page/post).

1st Slide

• Add the Group Blocks

First, add the Group block to the content area. Next, set the size of the block as you desire. For this example, we set it to 700 px for both sides (content and wide).

Next, please add another Group block inside the Group block you’ve just added. Afterward, assign the CSS classes wpb-slide and wpb-active-slide to the group.

• Add the Columns Block

Inside the wpb-slide wpb-active-slide group, add the Columns block with a single column.

• Add the Image Block

Here, we will add an Image block to make it a photo of the person who gave the testimonial. You can upload an image file by picking one from your media library or adding one with a URL.

Once you add an image to the block, style up your image as you prefer. For this example, we set the align to Center, Rounded style, and 110px for both the width and height of the image.

• Add the Heading Blocks

Next, we will add two Heading blocks; the first block will be filled with the name of the testimonial giver, and the second will contain their occupation.

• Add the Slider Buttons

First, add the Columns block with two columns and the Button block inside each column. We will use the buttons as a trigger to slide the testimonial. The left side is for the previous slide, and the right side is for the next slide.

Next, we’re going to add the icon to the buttons. There are many ways to do that. For this example, we will simply go to the Copy Glyphs, select your liking icon, and paste it to the buttons.

Next, add the CSS class for each button, prev-btn for the previous button and next-btn for the next button.

• Add the Testimonial Text

Add the Paragraph block, then write the testimonial text accordingly.

• Add the Inline Star Rating

To add an inline star rating, actually we have separate post covering how to add inline star rating in WordPress, you may need to read that post if you want to add the star rating to your testimonial slider.

2nd Slide

Now, it’s time to create the second testimonial slide.

• Duplicate the Group Block and Revise the CSS Class

Duplicate the Group with the classes wpb-slide wpb-active-slide. Once you duplicate the group, you first need to revise the CSS classes of the Group block to wpb-slide.

• Modifying the Slider Content

Once you duplicate the group block and revise the CSS class, you can update the second slide by replacing the image and text.

That’s it. Repeat this step for the third slide and your subsequent testimonial slide. To see the result, you can preview your testimonial slider page by clicking the Preview button. Don’t forget to save or publish your page if you want to.

The Button Line

With a little bit of custom code (PHP and CSS) and the power of native Gutenberg blocks, you can easily showcase your glowing reviews in an eye-catching and visually appealing manner. Your visitors will now experience a captivating journey through authentic social proof, making your website more compelling and trustworthy.

Embrace the simplicity of this approach and let your testimonials shine with a seamless and plugin-free slider. This article demonstrates how easy it is to create the testimonial sider in Gutenberg was the one without the help of any plugins. Say goodbye to the hassle of third-party installations and bulky interfaces.