Testimonial Rotator themes install like any other plugin and the best place to start learning how it works is by downloading the sample theme.
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:
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.