How to Build a Testimonial Rotator Plugin for WordPress
Posted on 19th June 2023
If you’re running a business website on WordPress, chances are you want to showcase testimonials from your happy customers. A testimonial rotator plugin is a great way to do this, and in this tutorial, we’ll show you how to build one.
What is a Testimonial Rotator Plugin?
A testimonial rotator plugin is a WordPress plugin that allows you to display testimonials from your customers in a rotating fashion. This is a great way to showcase your happy customers on your website, and it can also help increase conversion rates.
Why Use a Testimonial Rotator Plugin?
There are a few reasons why you might want to use a testimonial rotator plugin on your WordPress website.
- It’s a great way to showcase your happy customers.
- It can help increase conversion rates by social proof.
- It can help reduce the amount of space that testimonials take up on your website.
How to Build a Testimonial Rotator Plugin
Now that we’ve covered why you might want to use a testimonial rotator plugin, let’s take a look at how to build one.
Step 1: Create the Plugin Files
The first thing you need to do is create a new directory for your plugin. For this example, we’ll call it “testimonial-rotator”.
Next, you need to create two files in this directory: testimonial-rotator.php and testimonial-rotator.js.
The testimonial-rotator.php file will be the main plugin file, and it should contain the following:
The testimonial-rotator.js file will be used to load the testimonials into the rotator. It should contain the following:
jQuery(document).ready(function($) {
// Load the testimonials into the rotator
$.ajax({
url: ‘https://example.com/testimonials.json’,
dataType: ‘json’,
success: function(data) {
// Loop through the testimonials
for (var i = 0; i < data.length; i++) {
// Add the testimonial to the rotator
$('#testimonial-rotator').append('
‘);
}
}
});
});
The testimonials.json file is a file that contains all of the testimonials that you want to display in the rotator. It should look something like this:
[
{
“name”: “John Doe”,
“content”: “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada lorem maximus mauris scelerisque, at rutrum nulla dictum. Ut ac ligula sapien. Suspendisse cursus faucibus finibus.”
},
{
“name”: “Jane Doe”,
“content”: “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada lorem maximus mauris scelerisque, at rutrum nulla dictum. Ut ac ligula sapien. Suspendisse cursus faucibus finibus.”
},
{
“name”: “John Smith”,
“content”: “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada lorem maximus mauris scelerisque, at rutrum nulla dictum. Ut ac ligula sapien. Suspendisse cursus faucibus finibus.”
}
]
Step 2: Create the Testimonial Rotator Widget
Next, you need to create the testimonial rotator widget. This widget will be responsible for displaying the testimonials in the rotator.
Create a new file called testimonial-rotator.php in the plugin directory and add the following:
__( ‘A testimonial rotator widget for WordPress.’, ‘text_domain’ ), ) // Args
);
}
/**
* Front-end display of widget.
*
* @see WP_Widget::widget()
*
* @param array $args Widget arguments.
* @param array $instance Saved values from database.
*/
public function widget( $args, $instance ) {
extract( $args );
echo $before_widget;
if ( ! empty( $instance[‘title’] ) ) {
echo $before_title . apply_filters( ‘widget_title’, $instance[‘title’] ). $after_title;
}
echo ‘
echo ‘
‘;
echo $after_widget;
}
/**
* Back-end widget form.
*
* @see WP_Widget::form()
*
* @param array $instance Previously saved values from database.
*/
public function form( $instance ) {
if ( isset( $instance[ ‘title’ ] ) ) {
$title = $instance[ ‘title’ ];
}
else {
$title = __( ‘Testimonials’, ‘text_domain’ );
}
?>
<label for="get_field_name( ‘title’ ); ?>”>
<input class="widefat" id="get_field_id( ‘title’ ); ?>” name=”get_field_name( ‘title’ ); ?>” type=”text” value=”” />
Step 3: enqueue the JavaScript File
Next, you need to enqueue the testimonial-rotator.js file in the testimonial-rotator.php file.
Add the following code to the testimonial-rotator.php file:
function testimonial_rotator_scripts() {
wp_enqueue_script( ‘testimonial-rotator’, plugins_url( ‘testimonial-rotator.js’, __FILE__ ), array( ‘jquery’ ), ‘1.0’, true
If you want to add a testimonial rotator to your WordPress site, there are a few different ways to do it. You could use a plugin like Testimonial Rotator, or you could code it yourself.
If you choose to code it yourself, there are a few things you’ll need to do. First, you’ll need to create a custom post type for testimonials. You can do this by adding the following code to your functions.php file:
array(
‘name’ => __( ‘Testimonials’ ),
‘singular_name’ => __( ‘Testimonial’ )
),
‘public’ => true,
‘has_archive’ => true,
)
);
}
add_action( ‘init’, ‘create_testimonial_post_type’ );
?>
This will create a new post type called “Testimonials” which you can add to your WordPress site.
Next, you’ll need to create a custom field for the testimonial author. You can do this by going to the “Custom Fields” section of your WordPress admin panel and adding a new field called “testimonial_author”.
Once you’ve created the custom field, you can add it to your testimonial posts by going to the “Testimonials” section of your WordPress admin panel and clicking on “Add New Testimonial”. In the “Testimonial Author” field, you can enter the name of the person who gave the testimonial.
Finally, you’ll need to display the testimonials on your website. You can do this by adding the following code to your theme’s template file:
‘testimonial’,
‘orderby’ => ‘rand’,
‘posts_per_page’ => 3
);
$testimonials = new WP_Query( $args );
if ( $testimonials->have_posts() ) :
while ( $testimonials->have_posts() ) : $testimonials->the_post();
?>
This code will display three randomly selected testimonials on your website.
You can also add a testimonial rotator to your WordPress site using a plugin like Testimonial Rotator. Testimonial Rotator is a free plugin that allows you to easily add testimonials to your website.
Once you’ve installed and activated the plugin, you can add testimonials to your website by going to the “Testimonials” section of your WordPress admin panel and clicking on “Add New Testimonial”.
In the “Testimonial Author” field, you can enter the name of the person who gave the testimonial.
Finally, you can display the testimonials on your website by adding the following code to your theme’s template file:
This code will display the testimonials on your website using the default settings.
You can also customize the way the testimonials are displayed by going to the “Settings” section of your WordPress admin panel and clicking on “Testimonial Rotator”.
From here, you can change the number of testimonials to display, the order in which they’re displayed, and whether or not to display the testimonial author’s name.
Testimonial Rotator is a great way to add testimonials to your WordPress site. It’s easy to use and it allows you to easily customize the way the testimonials are displayed.
