Building a Custom Testimonial Slider for WordPress

Posted on 19th June 2023

WordPress is a popular content management system (CMS) that helps you easily create and manage a website. One of the advantages of using WordPress is that there are many plugins available that allow you to add different features and functionality to your website.

In this tutorial, we will show you how to build a custom testimonial slider plugin for WordPress. A testimonial slider is a great way to showcase customer testimonials or reviews on your website.

What You Will Need

Before you begin this tutorial, you will need the following:

• A text editor (we recommend using Atom)
• A local development environment set up on your computer (learn how to set up WordPress on WAMP or set up WordPress on XAMPP)

Creating the Plugin

First, you will need to create a new folder for your plugin. This folder can be named anything you like, but we will name it testimonial-slider.

Inside this folder, you will need to create a new file and name it testimonial-slider.php. This file will contain the code for your plugin.

In the code above, we have created a new plugin called “Testimonial Slider”. We have also added some basic information about the plugin, such as the plugin name, description, version, author, and license.

We have also created a new class called Testimonial_Slider. This class will contain all the code for our plugin.

Lastly, we have initialized the plugin by creating a new $testimonial_slider object.

Creating the Shortcode

Next, we will need to create a shortcode for our testimonial slider. A shortcode is a WordPress-specific code that allows you to do complex things with very little code.

In our case, we want to be able to insert our testimonial slider into any post or page on our WordPress website. We can do this by creating a shortcode.

To create the shortcode, we will need to add the following code to our testimonial-slider.php file:

‘testimonial’,
‘posts_per_page’ => -1,
) );

// Check if testimonials exist
if ( ! $testimonials ) {
return ‘No testimonials found’;
}

// Load the view
require_once plugin_dir_path( __FILE__ ) . ‘views/testimonial-slider.php’;
}

}

// Initialize the plugin
$testimonial_slider = new Testimonial_Slider();
?>

In the code above, we have registered our shortcode with the name testimonial_slider. We have also created a callback function that will be executed when the shortcode is used.

This callback function will retrieve all the testimonials from our WordPress website and then load the testimonial-slider.php view file.

Creating the Testimonial Post Type

Next, we need to create a custom post type for our testimonials. This will allow us to easily add and manage testimonials on our WordPress website.

To create the custom post type, we will need to add the following code to our testimonial-slider.php file:

array(
‘name’ => ‘Testimonials’,
‘add_new_item’ => ‘Add New Testimonial’,
‘edit_item’ => ‘Edit Testimonial’,
‘view_item’ => ‘View Testimonial’,
),
‘public’ => true,
‘supports’ => array( ‘title’, ‘editor’, ‘thumbnail’ ),
) );
}

}

// Initialize the plugin
$testimonial_slider = new Testimonial_Slider();
?>

In the code above, we have registered our custom post type with the name testimonial. We have also added some labels for our custom post type.

Creating the Testimonial Metabox

Next, we need to create a custom metabox for our testimonials. This metabox will allow us to add a customer name, company name, and URL for each testimonial.

To create the custom metabox, we will need to add the following code to our testimonial-slider.php file:

array(
‘name’ => ‘Testimonials’,
‘add_new_item’ => ‘Add New Testimonial’,
‘edit_item’ => ‘Edit Testimonial’,
‘view_item’ => ‘View Testimonial’,
),
‘public’ => true,
‘supports’ => array( ‘title’, ‘editor’, ‘thumbnail’ ),
) );
}

// Register the testimonial metabox
public static function register_testimonial_metabox() {
add_meta_box( ‘testimonial_metabox’, ‘Testimonial Details’, array( __CLASS__, ‘render_testimonial_metabox’ ), ‘testimonial’, ‘normal’, ‘high’ );
}

// Render the testimonial metabox
public static function render_testimonial_metabox( $post ) {
// Get the data
$name = get_post_meta( $post->ID, ‘_testimonial_name’, true );
$company = get_post_meta( $post->ID, ‘_testimonial_company’, true );
$url = get_post_meta( $post->ID, ‘_testimonial_url’, true );

// Nonce field
wp_nonce_field( ‘testimonial_metabox_nonce’, ‘testimonial_metabox_nonce’ );

// Metabox HTML
require_once plugin_dir_path( __FILE__ ) . ‘views/testimonial-metabox.php’;
}

}

// Initialize the plugin
$testimonial_slider = new Testimonial_Slider();
?>

Now that we have our testimonials, we need to display them on our website. We can do this by creating a custom WordPress testimonial slider.

To create a custom WordPress testimonial slider, you will need to first create a custom post type for your testimonials. You can do this by adding the following code to your functions.php file:

function create_testimonial_post_type() {
 
    register_post_type( 'testimonial',
    // CPT Options
        array(
            'labels' => array(
                'name' => __( 'Testimonials' ),
                'singular_name' => __( 'Testimonial' )
            ),
            'public' => true,
            'has_archive' => true,
            'rewrite' => array('slug' => 'testimonials'),
        )
    );
}
// Hooking up our function to theme setup
add_action( 'init', 'create_testimonial_post_type' );

This code will create a new custom post type called “Testimonials” that we can use to store our testimonials.

Next, we need to create a custom taxonomy for our testimonials. This will allow us to categorize our testimonials and display them on our website using a custom testimonial slider.

function create_testimonial_taxonomy() {
 
    register_taxonomy(
        'testimonial_category',
        'testimonial',
        array(
            'label' => __( 'Testimonial Categories' ),
            'rewrite' => array( 'slug' => 'testimonial-category' ),
            'hierarchical' => true,
        )
    );
}
add_action( 'init', 'create_testimonial_taxonomy' );

This code will create a new custom taxonomy called “Testimonial Categories”. We can use this taxonomy to categorize our testimonials.

Once you have created your custom post type and taxonomy, you can begin adding testimonials to your website. To do this, simply go to the “Testimonials” section of your WordPress admin panel and click “Add New Testimonial”.

Give your testimonial a title, and then enter your testimonial text in the main content area. You can also add a featured image for your testimonial. This image will be used in the testimonial slider.

Once you have entered your testimonial text, you can then select a “Testimonial Category” for your testimonial. This will determine which testimonial slider your testimonial will be displayed in.

Once you have added your testimonials, you can then display them on your website using a custom testimonial slider. To do this, you will need to add the following code to your WordPress theme:

[testimonial_slider]
 
[testimonial_slider category="testimonial-category-slug"]

Replace “testimonial-category-slug” with the slug of the testimonial category you want to display.

This code will display a testimonial slider for all testimonials in the “Testimonial Category” you specified. The testimonial slider will rotate through each testimonial in the category, and will display the testimonial’s featured image, title, and text.