How to use WordPress Shortcode

 WordPress Shortcode Usage

Example 2 is the simplest version of WordPress Shortcode to execute.

Copy and Paste this onto your WordPress Theme’s functions.php file:

function donatebutton() { return '<a href="/donate/" class="donate-button">Donate!</a>'; } add_shortcode('donate', 'donatebutton');

Use this shortcode in your WordPress post/page’s content:

[donate]

The HTML output will be this:

<a href="/donate/" class="donate-button">Donate!</a>

Using a simple “[foo-bar]” shortcode can output an entire content block across multiple pages, making it easy to update.

More of a blockquote style usage of WordPress Shortcode, like in the first example, requires a little extra, but is still extremely easy to execute.

Copy and Paste this onto your WordPress Theme’s functions.php file:

function postrecap($atts, $content = null) { return '<span class="recap">'.$content.'</span>'; } add_shortcode("recap", "postrecap");

Use this in your WordPress post/page’s content:

[recap]A bit of text content[/recap]

The HTML output will be this:

<span class="recap">A bit of text content</span>

This exact code snippet was used on one of our client’s WordPress sites, AgendaWise, to great effect and made the blog a lot easier to maintain for the site owner. This allows the client to use a pre-built-custom blockquote, and cite someone with unique and consistant styling thanks to WordPress shortcode. It automatically detects if there’s a name and/or url being referenced. If there’s a name and a url, the WordPress Shortcode adds a styled link at the end of the quote, and if there’s a name but no url, it just adds a styled name at the bottom of the blockquote.

Use any of these in your WordPress post/page’s content:

[blockquote]Test content.[/blockquote]   [blockquote cite="John Doe"]Test content.[/blockquote]   [blockquote cite="John Doe" url="http://example.com/"]Test Content[/blockquote]

Copy and Paste this onto your WordPress Theme’s functions.php file:

function bc($atts, $content = null) { extract(shortcode_atts(array( "cite" => 'Unknown', "url" => 'url' ), $atts)); if ( $cite == 'Unknown' ) { return '<blockquote class="bc-full"><p>'.$content.'</p></blockquote>'; } elseif ( $url == 'url' ) { return '<blockquote class="bc-full"><p>'.$content.'</p><p class="bc-cite">- '.$cite.'</p></blockquote>'; } else { return '<blockquote class="bc-full"><p>'.$content.'</p><p class="bc-cite">- <a href="'.$url.'">'.$cite.'</a></p></blockquote>'; } } add_shortcode("blockquote", "bc");

The HTML output will any of these, respectively:

<blockquote class="bc-full"><p>Test content.</p></blockquote>   <blockquote class="bc-full"><p>Test content.</p><p class="bc-cite">-John Doe</p></blockquote>   <blockquote class="bc-full"><p>Test content.</p><p class="bc-cite">- <a href="http://example.com">John Doe</a></p></blockquote>

This technique could be very well combined with some of the concepts in example 2. Say, if you were to have a blog with multiple authors, you could use [twitter handle="brianpurkiss"] to output a custom styled Twitter follow button that plugs in the specified twitter handle. Again, the possibilites of WordPress shortcode are endless.

Wrap Up

WordPress’ Shortcode has vast amounts of untapped possibilities. It is extremely beneficial in allowing clients to add more complex content areas with no technical knowledge and great ease. WordPress shortcode can even be beneficial for those with lots of technical knowledge to better manage duplicate content areas.

Make website management easier – use WordPress Shortcode.