How to Build a Testimonial Grid Slider Plugin for WordPress

Posted on 19th June 2023

What is a testimonial grid slider?

A testimonial grid slider is a WordPress plugin that allows you to create a grid of testimonials that can be scrolled through. This is a great way to showcase testimonials from your customers on your website.

Why use a testimonial grid slider?

A testimonial grid slider is a great way to showcase testimonials from your customers. This can help build trust with potential customers and give them an idea of what your current customers think of your product or service.

How to create a testimonial grid slider

1. Install and activate the plugin

First, you need to install and activate the plugin. You can do this by going to the Plugins page in your WordPress dashboard and searching for “testimonial grid slider”.

2. Create a new testimonial

Next, you need to create a new testimonial. You can do this by going to the Testimonials page in your WordPress dashboard and clicking on the “Add New” button.

3. Enter the testimonial content

Now you need to enter the testimonial content. This includes the customer’s name, their testimonial, and a link to their website (optional).

4. Save the testimonial

Once you’re done, click on the “Publish” button to save the testimonial.

5. Repeat steps 2-4 for each testimonial

Repeat steps 2-4 for each testimonial you want to add to the grid.

6. Insert the testimonial grid into your post or page

Finally, you need to insert the testimonial grid into your post or page. You can do this by adding the shortcode [testimonial_grid] to the post or page.

Conclusion

That’s how you can create a testimonial grid slider plugin for WordPress. This is a great way to showcase testimonials from your customers on your website. The article should use industry standard grammar and punctuation.

Step 3: Set Up the Custom Post Type

Now that you have your files set up, it’s time to create the custom post type that will power your testimonials grid.

Custom post types are a way of creating new content types in WordPress. By default, WordPress comes with a few built-in content types – posts and pages being the most popular.

Creating a custom post type is a two-step process:

First, you need to register the post type using the register_post_type() function.

Second, you need to add some code to your theme’s functions.php file to tell WordPress how to display the custom post type on your site.

Let’s start by registering the post type.

Add the following code to your plugin file:

function create_testimonials_post_type() {

register_post_type( ‘testimonials’,

array(

‘labels’ => array(

‘name’ => __( ‘Testimonials’ ),

‘singular_name’ => __( ‘Testimonial’ )

),

‘public’ => true,

‘has_archive’ => true,

)

);

}

add_action( ‘init’, ‘create_testimonials_post_type’ );

This code does a few things:

It creates a new function called create_testimonials_post_type(). This function registers the testimonials post type using the WordPress register_post_type() function.

It tells WordPress to run the create_testimonials_post_type() function when the ‘init’ action is fired. The ‘init’ action is a WordPress hook that fires when WordPress is initializing.

Next, we need to add some code to our theme’s functions.php file to tell WordPress how to display the testimonials on our site.

Add the following code to your theme’s functions.php file:

function testimonials_init() {

$args = array(

‘public’ => true,

‘label’ => ‘Testimonials’,

‘supports’ => array( ‘title’, ‘editor’, ‘custom-fields’, ‘thumbnail’ ),

);

register_post_type( ‘testimonials’, $args );

}

add_action( ‘init’, ‘testimonials_init’ );

This code does a few things:

It creates a new function called testimonials_init(). This function registers the testimonials post type using the WordPress register_post_type() function.

It tells WordPress to run the testimonials_init() function when the ‘init’ action is fired.

Next, we need to add some code to our plugin file to display the testimonials on our site.

Add the following code to your plugin file:

function testimonials_shortcode() {

$args = array(

‘post_type’ => ‘testimonials’,

‘posts_per_page’ => 10

);

$loop = new WP_Query( $args );

while ( $loop->have_posts() ) : $loop->the_post();

the_title();

echo ‘

‘;

endwhile;

}

add_shortcode( ‘testimonials’, ‘testimonials_shortcode’ );

This code does a few things:

It creates a new function called testimonials_shortcode(). This function displays the testimonials on our site using the WordPress WP_Query class.

It tells WordPress to run the testimonials_shortcode() function when the [testimonials] shortcode is used.

Now that we have our testimonials post type set up, let’s move on to creating the testimonials grid.

Step 4: Create the Testimonials Grid

In this step, we’re going to use the WordPress loop to output our testimonials in a grid layout.

First, we need to create a new file in our plugin called loop-testimonials.php.

Add the following code to loop-testimonials.php:

‘testimonials’,

‘posts_per_page’ => 10

);

$loop = new WP_Query( $args );

while ( $loop->have_posts() ) : $loop->the_post();

the_title();

echo ‘

‘;

endwhile;

?>

This code does a few things:

It creates a new WordPress loop using the WP_Query class. This loop will query the testimonials post type and output the title and content for each testimonial.

It tells WordPress to run the loop when the [testimonials] shortcode is used.

Now that we have our loop set up, let’s add some CSS to style our testimonials grid.

Add the following code to your plugin’s CSS file:

.testimonials-grid {

display: flex;

flex-wrap: wrap;

}

.testimonials-grid .testimonial {

width: 33.33%;

padding: 20px;

}

This code does a few things:

It styles the testimonials grid using CSS Flexbox.

It styles the testimonials so that they are evenly spaced across the width of the screen.

Now that we have our grid set up, let’s add some code to our loop-testimonials.php file to output our testimonials in the grid layout.

Add the following code to loop-testimonials.php:

‘testimonials’,

‘posts_per_page’ => 10

);

$loop = new WP_Query( $args );

echo ‘

‘;

?>

This code does a few things:

It outputs the testimonials grid using the WordPress loop.

It styles the testimonials so that they are evenly spaced across the width of the screen.

And that’s it! You should now have a working testimonials grid on your WordPress site.

Step 5: Create the Testimonials Widget

In this final step, we’re going to create a widget that displays the testimonials on our site.

Widgets are a great way to add dynamic content to your WordPress site. They can be added to sidebars, footers, and other widget-ready areas on your site.

Creating a widget is a two-step process:

First, you need to register the widget using the register_widget() function.

Second, you need to add some code to your plugin file to tell WordPress how to display the widget on your site.

Let’s start by registering the widget.

Add the following code to your plugin file:

function register_testimonials_widget() {

register_widget( ‘Testimonials_Widget’ );

}

add_action( ‘widgets_init’, ‘register_testimonials_widget’ );

This code does a few things:

It creates a new function called register_testimonials_widget(). This function registers the testimonials widget using the WordPress register_widget() function.

It tells WordPress to run the register_testimonials_widget() function when the ‘widgets_init’ action is fired. The ‘widgets_init’ action is a WordPress hook that fires when WordPress is initializing the widgets subsystem.

Next, we need to add some code to our plugin file to tell WordPress how to display the widget on our site.

Add the following code to your plugin file:

class Testimonials_Widget extends WP_Widget {

public function __construct() {

$widget_ops = array(

‘classname’ => ‘testimonials_widget’,

‘description’ => ‘A widget that displays testimonials.’,

);

parent::__construct( ‘testimonials_widget’, ‘Testimonials Widget’, $widget_ops );

}

public function widget( $args, $instance ) {

echo $args[‘before_widget’];

if ( !