I've moved! I've moved my online home to mikejolley.com, and thats where I'll be blogging primarily. This site will stay live for archive purposes :)

8 fun & useful shortcode functions for wordpress

shortcodes

‘Shortcodes’ are a feature of wordpress used for executing custom functions by inserting a small snippit of code into a post. For example, my download monitor plugin now uses shortcodes; by entering [download id="1"] into a post, the plugin will output a download link.

The shortcode syntax varies, here are some examples:

  • [shortcode]
  • [shortcode atribute="value"]
  • [shortcode]Text[/shortcode]

Shortcodes can be created to perform a handful of useful functions. To use any of the shortcodes in this post I recommend adding the functions to your functions.php theme file (create it if it does not exist!). Ill show shortcodes ranging from showing adsense to speaking pirate! (written for wordpress 2.7)

1. Get some bloginfo

Need to get your wordpress url or template url? Try this on for size:

1
2
3
4
5
6
7
function bloginfo_shortcode( $atts ) {
    extract(shortcode_atts(array(
        'key' => '',
    ), $atts));
    return get_bloginfo($key);
}
add_shortcode('bloginfo', 'bloginfo_shortcode');

Now you can output some bloginfo using [bloginfo key=""], for example [bloginfo key="template_url"] will output the path to your template directory. This page highlights the data you can grab using this custom shortcode.

Example output: http://blue-anvil.com/wp-content/themes/blueanvil

2. Integrate some Adsense Ads

Want to output some adsense ads in posts? Try this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function adsense_shortcode( $atts ) {
	extract(shortcode_atts(array(
	    'format' => '1',
	), $atts));
 
	switch ($format) {
		case 1 :
			$ad = '<script type="text/javascript"><!--
			google_ad_client = "pub-6928386133078955";
			/* 234x60, created 16/09/08 */
			google_ad_slot = "0834408702";
			google_ad_width = 234;
			google_ad_height = 60;
			//-->
			</script>
			<script type="text/javascript"
			src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
			</script>';
		break;
	}
	return $ad;
}
add_shortcode('adsense', 'adsense_shortcode');

Remember to replace the adsense code with your own from google. Now you can output an ad simply using [adsense].

Add additional ad formats to the switch statement and you can output other ad formats using, for example,  [adsense format="2"]. Nice eh?

3. Obfuscate an email address

This simple shortcode will munge/create a link to an email address to help prevent spam. Not 100% foolproof but better than nothing (and a good basis to expand upon if you want to enhance it).

1
2
3
4
5
6
7
8
function munge_mail_shortcode( $atts , $content=null ) {
 
	for ($i = 0; $i < strlen($content); $i++) $encodedmail .= "&#" . ord($content[$i]) . ';'; 
 
    return '<a href="mailto:'.$encodedmail.'">'.$encodedmail.'</a>';
 
}
add_shortcode('mailto', 'munge_mail_shortcode');

Use: [mailto]email@yourdomain.com[/mailto].

email@yourdomain.com

In the source the mail is shown as:

&amp;#101;&amp;#109;&amp;#97;&amp;#105;&amp;#108;&amp;#64;&amp;#101;&amp;#109;&amp;#97;&amp;#105;&amp;#108;&amp;#46;&amp;#99;&amp;#111;&amp;#109;

4. Show related posts (uses tags)

How about showing some related posts in your current post based on it’s tags? Lets do it!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
function related_posts_shortcode( $atts ) {
 
	extract(shortcode_atts(array(
	    'limit' => '5',
	), $atts));
 
	global $wpdb, $post, $table_prefix;
 
	if ($post->ID) {
 
		$retval = '
<ul>';
 
		// Get tags
		$tags = wp_get_post_tags($post->ID);
		$tagsarray = array();
		foreach ($tags as $tag) {
			$tagsarray[] = $tag->term_id;
		}
		$tagslist = implode(',', $tagsarray);
 
		// Do the query
		$q = "
			SELECT p.*, count(tr.object_id) as count
			FROM $wpdb->term_taxonomy AS tt, $wpdb->term_relationships AS tr, $wpdb->posts AS p
			WHERE tt.taxonomy ='post_tag'
				AND tt.term_taxonomy_id = tr.term_taxonomy_id
				AND tr.object_id  = p.ID
				AND tt.term_id IN ($tagslist)
				AND p.ID != $post->ID
				AND p.post_status = 'publish'
				AND p.post_date_gmt < NOW()
			GROUP BY tr.object_id
			ORDER BY count DESC, p.post_date_gmt DESC
			LIMIT $limit;";
 
		$related = $wpdb->get_results($q);
 
		if ( $related ) {
			foreach($related as $r) {
				$retval .= '
	<li><a title="'.wptexturize($r->post_title).'" href="'.get_permalink($r->ID).'">'.wptexturize($r->post_title).'</a></li>
';
			}
		} else {
			$retval .= '
	<li>No related posts found</li>
';
		}
		$retval .= '</ul>
';
		return $retval;
	}
	return;
}
add_shortcode('related_posts', 'related_posts_shortcode');

Magic. Now use [related_posts] to show 5 related posts, or [related_posts limit="x"] to show a number of your choosing. Example:

5. Add a simple paypal donation link

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function donate_shortcode( $atts ) {
    extract(shortcode_atts(array(
        'text' => 'Make a donation',
        'account' => 'REPLACE ME',
        'for' => '',
    ), $atts));
 
    global $post;
 
    if (!$for) $for = str_replace(" ","+",$post->post_title);
 
    return '<a class="donateLink" href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business='.$account.'&item_name=Donation+for+'.$for.'">'.$text.'</a>';
 
}
add_shortcode('donate', 'donate_shortcode');

Replace the default ‘account’ with your paypal email address, and output using [donate]. Remember you can override the default ‘text’ too in the shortcode. You can style this link with css (as ive done) easily.

Make a donation

6. Output a google powered chart

Pass this shortcode some data and it will convert it into a graph generated by google charts api. First I’ll show it in action. I want to show some info about my traffic to Blue Anvil from analytics; I will show it in a pie chart:

Traffic Sources

Code: [chart data="41.52,37.79,20.67,0.03" bg="F7F9FA" labels="Reffering+sites|Search+Engines|Direct+traffic|Other" colors="058DC7,50B432,ED561B,EDEF00" size="488x200" title="Traffic Sources" type="pie"]

The shortcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
function chart_shortcode( $atts ) {
	extract(shortcode_atts(array(
	    'data' => '',
	    'colors' => '',
	    'size' => '400x200',
	    'bg' => 'ffffff',
	    'title' => '',
	    'labels' => '',
	    'advanced' => '',
	    'type' => 'pie'
	), $atts));
 
	switch ($type) {
		case 'line' :
			$charttype = 'lc'; break;
		case 'xyline' :
			$charttype = 'lxy'; break;
		case 'sparkline' :
			$charttype = 'ls'; break;
		case 'meter' :
			$charttype = 'gom'; break;
		case 'scatter' :
			$charttype = 's'; break;
		case 'venn' :
			$charttype = 'v'; break;
		case 'pie' :
			$charttype = 'p3'; break;
		case 'pie2d' :
			$charttype = 'p'; break;
		default :
			$charttype = $type;
		break;
	}
 
	if ($title) $string .= '&chtt='.$title.'';
	if ($labels) $string .= '&chl='.$labels.'';
	if ($colors) $string .= '&chco='.$colors.'';
	$string .= '&chs='.$size.'';
	$string .= '&chd=t:'.$data.'';
	$string .= '&chf='.$bg.'';
 
	return '<img title="'.$title.'" src="http://chart.apis.google.com/chart?cht='.$charttype.''.$string.$advanced.'" alt="'.$title.'" />';
}
add_shortcode('chart', 'chart_shortcode');

Other examples:

Code: [chart data="0,12,24,26,32,64,54,24,22,20,8,2,0,0,3" bg="F7F9FA" size="200x100" type="sparkline"]

Macbook Fund

Code: [chart data="40" bg="F7F9FA" labels="Mula" colors="058DC7,50B432,ED561B,EDEF00" size="488x200" title="Macbook Fund" type="gom"]

7. Show a google map with a marker on it

Want to show a map and/or a marker on it? You’ll need a Google Maps API key for this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
function googlemap_shortcode( $atts ) {
    extract(shortcode_atts(array(
        'width' => '500px',
        'height' => '300px',
        'apikey' => 'REPLACEME',
        'marker' => '',
        'center' => '',
        'zoom' => '13'
    ), $atts));
 
    if ($center) $setCenter = 'map.setCenter(new GLatLng('.$center.'), '.$zoom.');';
    if ($marker) $setMarker = 'map.addOverlay(new GMarker(new GLatLng('.$marker.')));';
 
    $rand = rand(1,100) * rand(1,100);
 
    return '
    	<script src="http://maps.google.com/maps?file=api&v=2.x&sensor=false&key='.$apikey.'" type="text/javascript"></script>
 
	    <script type="text/javascript">
		    function initialize() {
		      if (GBrowserIsCompatible()) {
		        var map = new GMap2(document.getElementById("map_canvas_'.$rand.'"));
		        '.$setCenter.'
		        '.$setMarker.'
		        map.setUIToDefault();
		      }
		    }
		    initialize();
	    </script>
    ';
 
}
add_shortcode('googlemap', 'googlemap_shortcode');

To display a map just enter [googlemap] replacing center/marker/zoom co-ordinates with whatever you like.

Code: [googlemap zoom="13" center="52.66389056542801, 0.1641082763671875" marker="52.66389056542801, 0.1641082763671875" width="488px"]

8. Talk like a pirate

Just for fun we can convert a section of text into pirate speak using the following shortcode (inspired by/taken from Pirate for drupal and the text filter suite pirate filter).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
function pirate_talk_shortcode( $atts , $content=null ) {
 
      $patterns = array(
        '%\bmy\b%' => 'me',
        '%\bboss\b%' => 'admiral',
        '%\bmanager\b%' => 'admiral',
        '%\b[Cc]aptain\b%' => "Cap'n",
        '%\bmyself\b%' => 'meself',
        '%\byour\b%' => 'yer',
        '%\byou\b%' => 'ye',
        '%\bfriend\b%' => 'matey',
        '%\bfriends\b%' => 'maties',
        '%\bco[-]?worker\b%' => 'shipmate',
        '%\bco[-]?workers\b%' => 'shipmates',
        '%\bpeople\b%' => 'scallywags',
        '%\bearlier\b%' => 'afore',
        '%\bold\b%' => 'auld',
        '%\bthe\b%' => "th'",
        '%\bof\b%' =>  "o'",
        "%\bdon't\b%" => "dern't",
        '%\bdo not\b%' => "dern't",
        '%\bnever\b%' => "no nay ne'er",
        '%\bever\b%' => "e'er",
        '%\bover\b%' => "o'er",
        '%\bYes\b%' => 'Aye',
        '%\bNo\b%' => 'Nay',
        '%\bYeah\b%' => 'Aye',
        '%\byeah\b%' => 'aye',
        '%\bare\b%' => 'be',
        '%\bDrupalists\b%' => 'Bucaneers',
        '%\bthere\b%' => 'thar',
        '%b\bnot\b%' => 'nay',
        '%\bdesign\b%' => 'bounty',
        '%\bonline\b%' => 'on the plank',
        '/and\b/' => "an'",
        '/ious\b/' => "i'us",
        "%\bdon't know\b%" => "dinna",
        "%\bdidn't know\b%" => "did nay know",
        "%\bhadn't\b%" => "ha'nae",
        "%\bdidn't\b%"=>  "di'nae",
        "%\bwasn't\b%" => "weren't",
        "%\bhaven't\b%" => "ha'nae",
        '%\bfor\b%' => 'fer',
        '%\bbetween\b%' => 'betwixt',
        '%\baround\b%' => "aroun'",
        '%\bto\b%' => "t'",
        "%\bit's\b%" => "'tis",
        '%\bwoman\b%' => 'wench',
        '%\bwomen\b%' => 'wenches',
        '%\blady\b%' => 'wench',
        '%\bwife\b%' => 'lady',
        '%\bgirl\b%' => 'lass',
        '%\bgirls\b%' => 'lassies',
        '%\bguy\b%' => 'lubber',
        '%\bman\b%' => 'lubber',
        '%\bfellow\b%' => 'lubber',
        '%\bdude\b%' => 'lubber',
        '%\bboy\b%' => 'lad',
        '%\bboys\b%' => 'laddies',
        '%\bchildren\b%' => 'little sandcrabs',
        '%\bkids\b%' => 'minnows',
        '%\bhim\b%' => 'that scurvey dog',
        '%\bher\b%' => 'that comely wench',
        '%\bhim\.\b%' => 'that drunken sailor',
        '%\bHe\b%' => 'The ornery cuss',
        '%\bShe\b%' => 'The winsome lass',
        "%\bhe's\b%" => 'he be',
        "%\bshe's\b%" => 'she be',
        '%\bwas\b%' => "were bein'",
        '%\bHey\b%' => 'Avast',
        '%\bher\.\b%' => 'that lovely lass',
        '%\bfood\b%' => 'chow',
        '%\bmoney\b%' => 'dubloons',
        '%\bdollars\b%' => 'pieces of eight',
        '%\bcents\b%' => 'shillings',
        '%\broad\b%' => 'sea',
        '%\broads\b%' => 'seas',
        '%\bstreet\b%' => 'river',
        '%\bstreets\b%' => 'rivers',
        '%\bhighway\b%' => 'ocean',
        '%\bhighways\b%' => 'oceans',
        '%\binterstate\b%' => 'high sea',
        '%\bprobably\b%' => 'likely',
        '%\bidea\b%' => 'notion',
        '%\bcar\b%' => 'boat',
        '%\bcars\b%' => 'boats',
        '%\btruck\b%' => 'schooner',
        '%\btrucks\b%' => 'schooners',
        '%\bSUV\b%' => 'ship',
        '%\bairplane\b%' => 'flying machine',
        '%\bjet\b%' => 'flying machine',
        '%\bmachine\b%' => 'contraption',
        '%\bdriving\b%' => 'sailing',
        '%\bunderstand\b%' => 'reckon',
        '%\bdrive\b%' => 'sail',
        '%\bdied\b%' => 'snuffed it',
        '/ing\b/' => "in'",
        '/ings\b/' => "in's",
      );
      foreach ($patterns as $pattern_search => $pattern_replace) {
        $content = preg_replace($pattern_search, $pattern_replace, $content);
      }
      return $content;
 
}
add_shortcode('pirate', 'pirate_talk_shortcode');

Wrap any content you want to translate in [pirate][/pirate].

The sky’s the limit!

Usin' shortcodes ye can write yer own functions an' output pretty much anythin' ye want. Go play!

The wordpress documentation for the shortcode API can be found here. Smashing magazine also had a useful post on shortcodes you can read.

Found this post useful? Why not buy me a coffee!

Related Entries

25 Responses to “8 fun & useful shortcode functions for wordpress”

RSS feed for comments on this post.

  1. Will says:

    Aha, me hearties! Excellent post Mike. I particularly enjoyed the pirate shortcode if you couldn’t tell :P

    Comment made on March 14, 2009 at 9:22 pm

  2. Many says:

    Great post indeed ! Funny and useful as you said :D

    Thanks for those.

    Comment made on March 15, 2009 at 12:57 pm

  3. Clemens says:

    Congratulations, awsome post! Especially the related posts and the Google interfaces are very useful.
    I don’t like the idea of putting the functions into your theme’s function.php, though – if you switch to a different theme, the shortcodes aren’t parsed anymore, but I guess that’s more of a wordpress design problem than your fault.

    Comment made on March 15, 2009 at 2:41 pm

  4. Mike Jolley says:

    @Clemens: Not so much a problem unless you change themes all the time; although I don’t think theres anything to stop you from writing your own special plugin containing all the shortcode functions – that will work across all themes.

    Comment made on March 17, 2009 at 12:48 pm

  5. George Serradinho says:

    Thanks for the shortcodes, I have added the donate one. I somehow thought it would be more technical but you made it so easy.

    Comment made on March 19, 2009 at 9:23 am

  6. BeyondRandom says:

    Very nice resource! I like the donate one and will probably have to integrate that in my blog this weekend. Thanks for sharing.

    Comment made on March 26, 2009 at 3:40 pm

  7. Elliot says:

    Great shortcode, I’m using it at http://www.ilovecolors.com.ar/ilc-thickbox-wordpress-plugin-to-display-images/
    I’ve added a bit of markup and text to the $retval variable.
    I like the fact that it is a shortcode so I’m free to apply it whenever I want. However, when I get sometime off I will create a meta checkbox for the sidebar in order to enable/disable related posts for a particular post instead of writing the shortcode.

    Comment made on March 30, 2009 at 8:22 pm

  8. Kampanye Damai Pemilu Indonesia 2009 says:

    Glad I stumbled into this article! I have you bookmarked to check out new stuff you post.

    Comment made on April 14, 2009 at 1:42 am

  9. Kate Mag says:

    Love this post, especially pirate shortcode :-) . Thank you so much

    Comment made on April 22, 2009 at 4:24 am

  10. Ashley says:

    That is pretty cool, i wasn’t aware we could do all this with short codes. Thanks for the quick tut, i will sure look to find more!

    Comment made on June 1, 2009 at 4:31 am

  11. will says:

    Shortcodes are just too cool for school!!!

    Comment made on July 6, 2009 at 12:48 pm

  12. .Phibez says:

    Man I love your site.. great article on shortcodes.. I am no programmer, just know enough to do some damage.. more of a conceptual designer.. anyhow the information you provided here will make my life a lot easy.. thanks for sharing and keep up the uber site development..

    Peace

    Comment made on July 9, 2009 at 5:02 am

  13. LCDHDTV says:

    Thanks for the shortcodes, I have added the donate one. I somehow thought it would be more technical but you made it so easy.

    :)

    Comment made on August 15, 2009 at 5:39 pm

  14. Anthony says:

    Just tried all these, shortcodes rock! That pirates hot – can I have his phone number?

    Comment made on November 5, 2009 at 12:32 pm

  15. Short Code says:

    Thanks for the short codes!

    Comment made on November 18, 2009 at 7:56 pm

  16. DailyManila says:

    Excellent post! Thank you for the short codes! I love the Google Chart and AdSense integration.

    Comment made on December 22, 2009 at 4:14 am

  17. Mihai O. says:

    Great article! I like the one with the pirate language :) )

    Comment made on February 8, 2010 at 11:49 pm

  18. Special Tips .co.cc says:

    how to make 2 different adsense shortcode?

    coz I don’t know how to make the second adsense shortcode. Thanks

    Comment made on March 2, 2010 at 12:20 am

  19. Dimas says:

    The email shortcode is a great tip, I also like the google charting, ill have to play with that one!

    BTW what plugin are you using for your source code callouts?

    Comment made on March 23, 2010 at 2:13 am

  20. Mike Jolley says:

    @Dimas: Code is shown using WP-Syntax

    Comment made on March 23, 2010 at 2:08 pm

  21. ron says:

    Thanks for your tips !

    Comment made on April 26, 2010 at 9:08 am

  22. smart blogging says:

    great your tips and im succes for use shortcode :)

    Comment made on July 1, 2010 at 8:58 am

  23. mvd says:

    I found your related post script at catswhocode.com and changed it to output featured images(thumbs) instead /or/and text links.

    Comment made on October 7, 2010 at 8:46 pm

The comments are closed.

About this site

Blue Anvil is the online web design journal & portfolio of , a web designer from Norfolk, England. Read More »
MiniCard Theme for WordPress
  • Featured work - More

    • Beefjack
    • Integrity
    • theotaku.com
  • Latest Tweet - More

    • @pippinsplugins Thanks. We're rewriting all those queries anyway (queryposts uh oh)
  • Out of the blue - More

    • Download Monitor 3.3.5 Tagged for release

      The latest update to Download Monitor for WordPress has been released; this version comes with a many fixes and some new features, such as improved sorting. For full details view the readme; you can grab the plugin here.

    • Closing the Forums

      Just posting to let current users know that I’m closing the forum on Blue-Anvil. This is mainly due to spam-registrations getting out of hand and being a general nuisance. I will be posting good topics as FAQ items within posts if applicable.

      Please note that you can still post and get help for my plugins/themes by posting on the wordpress.org website.

    • Show off your MiniCard!

      Are you a user of the WordPress MiniCard theme? Its been downloaded over 14,000 times so far!

      If you have used it as-is, made your own child-theme or done something creative with it, please show off your MiniCard’s in the comments, I’d love to see how the theme is being used!

    • Spam Stopper updated for WordPress 3.0

      My Spam Stopper plugin has been updated for WordPress 3.0 (version 3.1.3) – you can grab it here. Sorry this update took longer than my other plugins but this one gets less lovin’ – if you want to change that feel free to donate, spread the word, or rate it on the WordPress.org plugin page.