Blog, WordPress, WordPress Shortcode

Simple Quotes in WordPress with Shortcode

The shortcode on offer isn't much different to our textbox or blockquote code, except its purpose is to showcase a quote or testimonial with a fancy-pants background. While we intend to share more useful examples in the future, this quick article is an example shared on Internoetics in early 2011 (now redirecting here).

There's a multitude of ways you can render quotes and testimonials on your page; consider this post nothing more than an example that'll give you a little nudge in the right direction.

The Result

A very basic output is as follows.

I fear the day when things I've never said will end up as picture quotes on the Internet.

Albert Einstein

Of course, you can add a link in the attribution area.

Scientific analysis suggests that 90% of all statistics are made up, the remaining 30% are just wrong.

Marty, BeliefMedia

To render the Einstein quote, I've used the shortcode of [bmquote from="Albert Einstein"]I fear the day when things I've never said will end up as picture quotes on the Internet.[/bmquote].

This quote is just to demonstrate how the image blends into the page with a longer quote:

Religion has convinced people that there's an invisible man... living in the sky, who watches everything you do every minute of every day. And the invisible man has a list of ten specific things he doesn't want you to do. And if you do any of these things, he will send you to a special place, of burning and fire and smoke and torture and anguish for you to live forever, and suffer and burn and scream until the end of time. But he loves you. He loves you and he needs money.

George Carlin

The last example uses a quote from our QOTZ API. Usage: [bmquote][qotz][/bmquote]. The result:

"It is truer to say that martyrs create faith more than faith creates martyrs." — Miguel de Unamuno

Usage

Use as follows: [bmquote from="Albert Einstein"]I fear the day when things I've never said will end up as picture quotes on the Internet.[/bmquote]

WordPress Shortcode

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin.

You must alter YourDomain to your own URL, and reference the background image accordingly (only after you've followed the important image instructions below).

<?php

Simple Quotes in WordPress with Shortcode

http://www.beliefmedia.com/simple-quotes-wordpress

function beliefmedia_simple_quote($atts, $content = null) {

$atts = shortcode_atts(array(

'padding' => '10px 15px 1px 65px', /* Top, Right, Bottom, Left */

'width' => '420px',

'textcolor' => '#000000',

'bgcolor' => '#fefef1',

'bordercolor' => '#e5e5e5',

'border' => '1px',

'bordertype' => 'solid',

'fontstyle' => 'italic',

'from' => ''

), $atts);

return '<div style="background: url(http://www.YourDomain.com/images/bg-quote-home.png) ' . $atts['bgcolor'] . ' no-repeat left top; color: ' . $atts['textcolor'] . '; border: ' . $atts['border'] . ' solid ' . $atts['bordercolor'] . '; font-size: 1em; font-style: ' . $atts['fontstyle'] . '; margin: 10px auto; padding: ' . $atts['padding'] . '; width: ' . $atts['width'] . '">

<div>' . do_shortcode($content) . '</div>

<div>

</div>';

}

add_shortcode('bmquote','beliefmedia_simple_quote');

AS you can see, virtually every aspect of the quote text box can be customized. However, to use this code, there are a number of steps that have to be taken, including sizing the image correctly.

Resize the image to the width as it will appear on the page. If you want the width of the quote to be 450 pixels, for example, create a new image with that size (you can use our template image for guidance).
You must adjust the padding. In the shortcode it's defined as '10px 15px 1px 65px'. There's also the attribute of width (420px). It's the left and right padding (in bold), and the width that need to add up to the width of your image. The 65px is the left padding, the 15px is the right padding, and the width is the area in the middle for text.

Considerations

You may of course create your own background image. Download our example image here.
While we've used italics inside the quote, you can revert to normal text by removing the em tags inside the shortcode.

+ Consider our Textbox Shortcode for Corporate Quotes

While not designed specifically for quotes, our textbox shortcode is often sufficient - particularly for corporate quote.

Download

Title: Simple Quotes in WordPress with Shortcode
Description: Simple Quotes in WordPress with Shortcode. Old code from Internoetics.
Download • Version 0.2, 706.0B, zip, Category: WordPress Shortcodes

■ ■ ■

Download our complimentary 650-page guide on marketing for mortgage brokers. We'll show you exactly how we generate billions in volume for our clients.