[Shortcode] Examples 4 – Quotes, Testimonials & Lists

• Tweet

Continuing with the ongoing series of posts on shortcode, here’s some examples of how you can fancy up your posts – or use styled elements in a post to emulate a ‘Squeeze Page’.

A Squeeze Page is one of those long pages full of fancy images, videos and testimonials that are designed to achieve one of two things – squeeze an email out of you, or sell you something. There are a lot of squeeze page templates you can buy, but quite often you can reproduce the elements of a squeeze page with simple shortcode. I’ll be releasing a product soon that’ll permit you to create a WordPress based squeeze page with shortcode. Sign up to my mailing list to be notified when this product is available for download.

Here are a few ideas for you to play with that will style your page a cut above the rest.

Fancy <blockquote>

Most WordPress themes offer a simple <blockquote> to fulfill a broad purpose and they aren’t overly content specific. Sometimes it’s important to jazz up these elements for enhanced quotes or testimonials.

First, this styled blockquote.

The code. Cut and paste the following into your theme’s functions.php file.

function my_quote($atts, $content = null) {
extract(shortcode_atts(array(
    'textcolor' => '#000000',
    'bgcolor' => '#fefef1',
    'bordercolor' => '#e5e5e5',
    'border' => '1px',
    'bordertype' => 'solid',
    'from' => ''
  ), $atts));
  // $byline = "<p align=\"right\"><strong><em>~ $from</em></strong></p>";
  return "<div style=\"background: url('images/bg-quote-home.png') $bgcolor no-repeat left top; color: $textcolor; border: $border solid $bordercolor; font-size: 1em; font-style: italic; margin: 10px auto; padding: 10px 20px 1px 60px; width: 420px\">$content<br><br><p align=\"right\"><strong><em>~ $from</em></strong></p></div>";
}
add_shortcode('myquote','my_quote');

Usage:

[myquote from=”Marty, Internoetics.com”]

You will require this image and you’ll have to update the image link in the above code. You will have to resize it in width to match up with the width of your blockquote. If you have problems – let me know.

Quotes as Testimonials

The importance of referenced testimonials cannot be stressed enough when it comes to selling products or services. A sample testimonial block is provided below.

The code. Cut and paste the following into your theme’s functions.php file.

function my_testimonial($atts, $content = null) {
extract(shortcode_atts(array(
    'img' => '',
    'name' => '',
    'website' => '',
    'alt' => 'testimonial'
  ), $atts));

if (isset($img)) {
	$img_style = "<p style=\"float: right; padding: 6px;\"><img src=\"$img\" height=\"60px\" width=\"60\" border=\"0\" alt=\"$alt\" /></a></p>";
}
if ($name != "") {
	$byline = "<br><p align=\"right\"><strong><em>~ $name, <a href=\"$website\">$website</a></em></strong></p>";
}
  return "<div style=\"color: #666; padding: 5px 0 5px 26px; font-size: 11px; background: url(http://www.internoetics.com/images/testimonials/blockquote.gif) no-repeat 5px 5px; border-top: 1px dotted; border-bottom: 1px dotted; margin: 10px 0;\">$img_style <i>$content</i> $byline</div>";
}
add_shortcode('testimonial','my_testimonial');

Usage:

[testimonial img=”http://www.internoetics.com/images/testimonials/marty-testimonial.jpg” name=”Marty” website=”http://www.internoetics.com” alt=Marty”]Content in here[/testimonial]

Styling your lists

Lists can be boring. Again, WordPress designers style lists to cater for the majority of posts that you’re likely to create. Sometimes, it’s important to give them some flare. Keep in mind that this is just one single example on how to style your unordered lists. I’ve got another post scheduled that will show you how to style them in countless different ways.

Examples:

Paste the following into your functions.php file.

function my_ticklist($atts, $content = null) {
	return '<div class="ticklist">'.$content.'</div>';
}
add_shortcode('ticklist', 'my_ticklist');

function my_crosslist($atts, $content = null) {
	return '<div class="crosslist">'.$content.'</div>';
}
add_shortcode('crosslist', 'my_crosslist');

… and paste the following into your css file.

.crosslist ul {
margin-left:50px;
list-style:none!important
}

.crosslist ul li{
list-style-type: none;
padding:5px 5px 5px 30px;
background: #fff url("http://www.YourDomain.com/images/cross.png") no-repeat center left;
}

.ticklist ul {
margin-left:50px;
list-style:none!important
}
.ticklist ul li{
list-style-type: none;
padding:5px 5px 5px 30px;
background: #fff url("http://www.YourDomain.com/images/tick.png") no-repeat center left;
}

Usage

[ticklist]<ul>
<li>This is item one</li>
<li>This is item two</li>
<li>This is item three</li>
</ul>[/ticklist]

Note that we have simple wrapped the shortcode around your existing list. Download the images used here.

More coming soon…

I hope this has helped you with some ideas. If there’s anything specific that you want, please let me know.

First Name: Your Email Address:

If you liked this article, you may also like:

1. Display Testimonials or Quotes from an XML File with WordPress Shortcode
2. [Shortcode] Examples [2]
3. [Shortcode] examples [3] – Text Boxes
4. Expandable ‘blind’ with shortcode
5. [Shortcode] Examples [1]