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.
A very basic output is as follows.
Of course, you can add a link in the attribution area.
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:
The last example uses a quote from our QOTZ API. Usage:
[bmquote][qotz][/bmquote]. The result:
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]
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).
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.
- 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
emtags inside the shortcode.