WordPress Testimonial Shortcode

I have been searching for a long time for a good plugin to display testimonials but to no avail. I just wanted something really simple so I made my own and thought I would share it. You can see it on my homepage. No javascript, nothing fancy just CSS and HTML.

It requires:

Square images
PHP in your functions.php
CSS in your stylesheet
Some Syntax

The PHP

This goes in your theme’s functions.php file, to be found in the theme directory.

/*—————————————————————————————————————————*/
/* Testimonial Shortcode - Chikaboo Designs
/*—————————————————————————————————————————*/

function testimonial($atts, $content = null) {
 extract(shortcode_atts(array(
 "client" => 'Default Client',
 "image" => 'http://www.yourwebsite.com/DirectoryForDefaultImage',
 ), $atts));
 return '
 <div class="testimonial">
 <div class="image">
 <img class="image-circle" src="'.$image.'"/>
 </div>
 <div class="text">
 <p class="quote">'.$content.'</p> 
 <p class="client">'.$client.'</p>
 </div>
 <div class="clear"></div>
 </div>';
}

add_shortcode("testimonial", "testimonial");

The CSS

This goes in your theme’s stylesheet, alo to be found in the theme directory. The media query is mobile first 🙂

.testimonial {
 padding:20px 0;
 }

 .testimonial .image-circle {
 width:100%;
 max-width:200px;
 height:auto;
 border-radius: 50%;
 margin:auto;
 display: block;
 margin-bottom:20px;
 }

 .testimonial .clear {
 clear:both;
 }

 .testimonial .text {
 text-align:center;
 }

 .testimonial .text p {
 margin-top:0;
 }

 .testimonial .text .quote {
 font-style: italic;
 }

 @media (min-width:768px) {

 .testimonial .image {
 width:20%;
 margin-right:3%;
 float:left;
 }

 .testimonial .text {
 width:76%;
 float:left;
 text-align: left;
 }
 }

The Syntax

[[testimonial]]testimonial text here[[testimonial]]

It takes the attributes:
Client
Project

eg.

[[testimonial client="Harry Potter"]]testimonial text here[[testimonial]]

Feel free to ask to leave comments, ask questions or suggest improvements!