How to Create a Custom Testimonial Rotator Theme

Testimonial Rotator themes install like any other plugin and the best place to start learning how it works is by downloading the sample theme.

Download Sample Theme


If you build a theme and want to sell it in my store, please contact me.


Creating a ‘Custom’ Theme

When working through the sample theme, the first thing you should do is change out all the instances of ‘example’ to your desired name. For this Help Guide we are going to call the new layout ‘custom’ for all the examples.

Main .php File

Inside the main .php file, which should now be called testimonial-rotator-custom.php, you’ll want to change the class from TestimonialRotatorExample to TestimonialRotatorCustom, and change the initiation at the bottom to:

$TestimonialRotatorCustom = new TestimonialRotatorCustom();

Inside the main _construct you’ll want to change the wrapper class of your custom rotator, this will allow you to easily target your new theme with your custom css. In the example it looks like this:

// EXTRA CLASSES
function hg_testimonial_rotator_extra_wrap_class_example( $default, $template_name, $id )
{
  return ($template_name == "example") ? ' example-wrap ' : $default;
}
add_filter('testimonial_rotator_extra_wrap_class', 'hg_testimonial_rotator_extra_wrap_class_example', 10, 3 );

You’ll want to change it to this:

// EXTRA CLASSES
function hg_testimonial_rotator_extra_wrap_class_custom( $default, $template_name, $id )
{
  return ($template_name == "custom") ? ' custom-wrap ' : $default;
}
add_filter('testimonial_rotator_extra_wrap_class', 'hg_testimonial_rotator_extra_wrap_class_custom', 10, 3 );

The CSS is next in the main .php file. There is a ‘scripts’ function that hooks in the CSS. You need to make sure you change the name of the file in your plugin and also here:

function scripts()
{
  wp_enqueue_style( 'testimonial-rotator-custom', plugins_url('/testimonial-rotator-custom.css', __FILE__) );
}

The Main Hook

At the bottom of the main php file is the most important hook. This hooks your new theme into the array of themes available when the user is selecting the theme from the edit rotator page. It is simply an array of arrays with the key being the ‘slug’ (if you wish) of the new theme:

return array_merge( $themes, array( 
	'custom' => array(
			'title' => 'Custom', 
			'icon' => plugins_url( '/example.png', __FILE__) )
));

The two variables that need to be set are the title of the rotator, this is simply displayed underneath the icon in the edit rotator page. To make changing the icon easier, I have make a .psd file with all the common elements:

Testimonial Rotator Icons

Templates

The plugin should have a sub-folder called exactly ‘templates’ so the main plugin knows where to look for the loop-testimonial.php and single-testimonial.php files.

The loop file is called when a rotator is being created. This is a similar idea to the standard WordPress archive page functionality. The single is used when viewing a single testimonial page.

The different elements are available in the example and have comments saying what each part is. You can rearrange these to fit your custom layout needs.

CSS

The CSS file should be pretty standard. The main thing to note is the every selector starts with the new ‘slug’ created in the Hook above: .testimonial_rotator.template-custom. This makes sure themes target each rotator correctly.