Loading cart contents...
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!