The Simplicity of Using WordPress Shortcode

How to Use WordPress Shortcode

It’s a common phenomenon to see a designer’s website in a design class several levels above that of it’s clients web design work. While there are many factors that can play into this occurrence, one in particular is very common. Designers/developers know more about code, whereas many clients don’t try at all to learn any. That is a huge component in making it difficult for those who build WordPress websites to make top notch sites for clients. There are certain site components that require additional code custom to each usage in order to function. Thus, for many jobs, additional code means more advanced components are off limits for client work, limiting the site’s possibilities.

However, it is possible to use WordPress Shortcode to output complex snippets in a simple manner so that people with no HTML/CSS background can output any pre-determined code snippet.

WordPress Shortcode has a wide variety of applications and can be extremely beneficial for website managers of all ranges of technical backgrounds.

What is WordPress Shortcode?

Example 1

[container]Lorem ipsum dolar sit amet[/container]

With that shortcode, you can output whatever you want on your WordPress website. You can build anything – any amont of HTML, CSS, Javascript, PHP, or anything else you may want. The possibilities are endless.

Example 2

The simplest, yet most overlooked, example of using WordPress Shortcode can be extremely simple or extremely complex.

This:

[donate]

Can output this:

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

This simple technique utilizing WordPress shortcode can output pre-built complex, or simple, code snippets. This one is great for having pre-built content areas that are used on multiple pages and/or articles. It’s less code to maintain and allows you to update all of the pages by editing a single code snippet. Very similar to WordPress’ file structure, but using WordPress shortcode gives you more versatility and applications.

Example 3

The most common example of WordPress’ Shortcode can be derived from BBCode.

This:

[img title="Example Logo"]http://example.com/images/logo.png[/img]

Can output this:

<img src="http://example.com/images/logo.png" alt="Example Logo" />

BBCode, essentially a different form of WordPress Shortcode common on forums, uses the above snippet to output an image. While this isn’t all that different than the tag, it is simpler enough that, as a general rule, website managers who aren’t very technically savvy have an easier time grasping shortcode than actual html.

Even though it’s an extremely simple concept, the possibilities are endless and WordPress shortcode can open up a whole new world for your client work.

How to use WordPress Shortcode

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.

Follow wpLifeGuard

« Back to Blog