Last updated on October 18, 2023

Divi testimonial slider

Don’t know where to add this snippet? Read our guide: How to add code snippets.

Create testimonial sliders in Divi.

The Divi theme is a popular WordPress theme that includes a built-in testimonial module. However, if you want to create a testimonial slider using the Divi theme, you’ll need to use some custom code. Here’s an example of how you can achieve this functionality:

function wpsnippets_divi_testimonial_slider() {
    ob_start();
    ?>
    <div class="testimonial-slider">
        <?php
        $args = array(
            'post_type' => 'testimonial',
            'posts_per_page' => -1,
        );
        $query = new WP_Query($args);
        if ($query->have_posts()) {
            while ($query->have_posts()) {
                $query->the_post();
                ?>
                <div class="testimonial">
                    <div class="testimonial-content">
                        <?php the_content(); ?>
                    </div>
                    <div class="testimonial-author">
                        <?php the_title(); ?>
                    </div>
                </div>
                <?php
            }
            wp_reset_postdata();
        }
        ?>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('divi_testimonial_slider', 'wpsnippets_divi_testimonial_slider');

This code snippet creates a custom shortcode [divi_testimonial_slider] that you can use to display a testimonial slider on your Divi-powered website. It uses the WP_Query class to retrieve testimonial posts and then loops through each post to display the testimonial content and author.

To use this code, simply add it to your theme’s functions.php file or a custom plugin file. After that, you can use the [divi_testimonial_slider] shortcode in any post or page to display the testimonial slider.

Note: This code assumes that you have a custom post type called “testimonial” set up in your WordPress installation. If you don’t have a custom post type, you can create one using the register_post_type() function.

Examples

Example 1: Creating a Testimonial Slider with Divi Theme

This example demonstrates how to create a testimonial slider using the Divi theme. The code example uses the built-in Divi testimonial module and customizes it to display a slider of testimonials.

[wpsnippets_testimonial_slider]

The code example uses a custom shortcode [wpsnippets_testimonial_slider] to display the testimonial slider. This shortcode can be added to any page or post in the Divi theme. The testimonial slider will automatically display the testimonials added in the Divi testimonial module.

Example 2: Customizing the Testimonial Slider

This example shows how to customize the testimonial slider by modifying the Divi testimonial module settings. The code example demonstrates how to change the number of testimonials displayed, the transition speed, and the navigation style.

[wpsnippets_testimonial_slider number="5" speed="1000" navigation_style="dots"]

The code example uses the [wpsnippets_testimonial_slider] shortcode with additional attributes to customize the testimonial slider. The number attribute sets the number of testimonials to display, the speed attribute sets the transition speed in milliseconds, and the navigation_style attribute sets the style of the navigation dots.

Example 3: Adding Custom CSS to the Testimonial Slider

This example shows how to add custom CSS to style the testimonial slider. The code example demonstrates how to change the background color, font size, and text color of the testimonials.

[wpsnippets_testimonial_slider css=".testimonial-slider { background-color: #f5f5f5; } .testimonial-slider p { font-size: 16px; color: #333; }"]

The code example uses the [wpsnippets_testimonial_slider] shortcode with a

attribute to add custom CSS styles to the testimonial slider. The CSS rules are applied to the .testimonial-slider class to change the background color, and to the p element to change the font size and text color of the testimonials.

Last updated on October 18, 2023. Originally posted on November 30, 2023.

Leave a Reply

Your email address will not be published. Required fields are marked *