I deployed a site recently that made use of the Testimonials WordPress plugin. This plugin adds a CRUD interface to the WP dashboard where you can add/edit/delete customer testimonials. They can then be displayed in posts or pages using shortcodes. There’s a lot of parameters for the shortcodes but (somewhat strangely) there’s no apparent way of giving a particular instance of a testimonial a CSS class or ID. So there’s no easy way to style a testimonial on a given page of the site. This is particularly annoying if you want the testimonial bigger on a particular page for marketing reasons.

Now, a little aside here, I did PAY for the commercial version of the plugin. I shot off a couple of support emails to the author in the first couple of days of use and he completely didn’t answer one of them (he linked me to a FAQ page that didn’t answer my question), but he did answer a second question. However, when I asked him about the custom CSS class or ID for a testimonial he initially didn’t understand the question (which could have been entirely my fault) and then suggested I PAY for more support if I wanted his help. Now given that I had only just paid for the plugin a week or two before hand I thought that was a little rich. So, needless to say that’s the last email he’ll ever get from me, time to work this out myself.

I picked apart the HTML generated by the testimonial shortcodes. Each one is contained in a DIV with the CSS ID like .post-6666 where 6666 is the ID of the testimonial. The actual body text of the testimonial is contained in a <p> in the parent DIV.  All I needed to do was inject some CSS into the particular page where I needed a different style for the testimonial.  Turns out it’s not too hard.  Just add the following to your child theme functions.php file.

add_action( 'wp_head', 'custom_include_script' );

function custom_include_script()
{
   if(is_page( 'some-page-name' ))
   {    
    ?>
	<style type="text/css">.post-6666 p {font-size: 18px;font-weight: 500;font-style: italic;}</style>
    <?php  
   }		
}

The PHP Is pretty simple to understand. We’ve added an action to the wp_head call. The action checks if the page is the page we are interested in, if it is then it echoes out the CSS for the particular testimonial DIV. Hey presto different text size for the testimonial on a particular page.