Advertisement
General

Resource Roundup! 20 Creative Shortcodes To Use In Your Projects

by

WordPress introduced shortcodes waaay back in version 2.5 as a great way of adding theme-specific styling through a simple-to-use tag in your post editor, or in your theme's coding. We can command some awesome features through shortcodes, both useful and just plain exciting (for geeks anyway!). Today, we're going to take a look at some creative implementations of the Shortcode API.

Introduction

We'll be going over how to use the Shortcode API soon here on Wptuts, but be sure to check out the codex in the meantime. It's also worth noting that there's a pretty interesting debate raging over the "ethics" of using shortcodes inside themes... to be clear, what we'll be covering here aren't rehashings of basic HTML elements (like using a [b] shortcode to replicate <b>) - instead, all of the following shortcodes allow users to include complex information into a post without a ton of custom coding.


1. Google Docs Viewer

PDFs are used on the web for a range of reasons, mainly documentation, but unfortunately, some less-knowledgeable computer users might become frustrated when they are constantly prompted to install a viewer app. Luckily, Google Docs has a built-in PDF viewing feature which allows for just this. This plugin, courtesy of Noscope offers the ability to add a link to a Google Docs viewer, just by entering the link to the PDF in the shortcode's single parameter.

function pdflink($attr, $content) {
	if ($attr['href']) {
		return '<a class="pdf" href="http://docs.google.com/viewer?url=' . $attr['href'] . '">'.$content.'</a>';
	} else {
		$src = str_replace("=", "", $attr[0]);
		return '<a class="pdf" href="http://docs.google.com/viewer?url=' . $src . '">'.$content.'</a>';
	}
}
add_shortcode('pdf', 'pdflink');

In fact, do a few tweaks, and this shortcode turns into a viewer for other file types, such as PowerPoint presentations and Word documents. Users will be able to save these files into their Google Docs library, should they want to, to save, print and edit.

Usage

This particular shortcode is very easy to use with a single parameter needed: the link to your PDF.

[pdf=http://manuals.info.apple.com/en_US/Enterprise_Deployment_Guide.pdf]Link text.[/pdf]

The result is a link like this.


2. Embed Google Adsense Ads Anywhere

Blogging can be a lucrative career, but it requires some form of monetization to be sustainable financially. A lot of bloggers do this through advertising, normally from Google. This very simple shortcode allows a blogger to drop in a single, parameter-less shortcode into a post to add an ad, courtesy of WpRecipes.

function showads() {
    return '<script type="text/javascript"><!--
google_ad_client = "your client id";
google_ad_slot = "your ad slot id";
google_ad_width = width;
google_ad_height = height;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
';
}

add_shortcode('adsense', 'showads');

If you don't use Google ads, it's very simple to just paste in your own ad code and maintain the same, simple usage.

Usage

In order to add an ad into a post, simply add the shortcode below and move on. It's insanely simple.

[adsense]

3. Add Private Notes to Posts

If you work with others on your blog, communication can vital. By simply dropping in the following shortcode with your message, administrators of the blog will see it, whilst any other visitor will not. The forth line also wraps your note in a "note" class, allowing you to style it to blend into your blog. Once again, this particular shortcode is courtesy of WPRecipes.

function sc_note( $atts, $content = null ) {
	 if ( current_user_can( 'publish_posts' ) )
		return '<div class="note">'.$content.'</div>';
	return '';
}

add_shortcode( 'note', 'sc_note' );

Usage

Simply wrap your note in the [note] sortcode

[note]Your note text[/note]

4. Obfuscate an Email Address

No-one likes spam, and putting your email address up on your public website hardly helps. However, putting up your email address might be needed and, luckily, you can opt to use this shortcode to avoid encountering the stream of spam from it.

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');

Usage

This shortcode effectively just encodes your email address into HTML characters, instead of just plain text, so it's not 100$% foolproof. Nevertheless, it is a good step forward and can be done by simply wrapping your desired email address in the [mailto] tag like in the example below.

[mailto]myemail@example.com[/mailto]

5. Add Google Maps With Little Effort

A lot of WordPress themes ship with a YouTube tag - or one from a similar service - that just means adding videos is as easy as hitting a button and pasting in the video ID. Thanks to this Digging into WordPress shortcode, we can easily add in a Google-powered map, just by pasting in the URL provided on the map page.

function fn_googleMaps($atts, $content = null) {
   extract(shortcode_atts(array(
      "width" => '640',
      "height" => '480',
      "src" => ''
   ), $atts));
   return '<iframe width="'.$width.'" height="'.$height.'" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'.$src.'"></iframe>';
}
add_shortcode("googlemap", "fn_googleMaps");

Usage

There's only three shortcode attributes to use here: width, height and URL. The first two are pretty self-explanatory and, when not used, default back to the width and height values set in the code above (which you can of course modify). The final, required attribute is the URL, available by clicking the "Link" button on the Google Maps website.

[googlemap width="600" height"360" src="http://google.com/maps/?ie=..."]

6. Embed an RSS Feed

Our next entry is from Smashing Magazine, and enables your blog to embed an RSS feed through a single shortcode by playing with the built-in WordPress RSS tools. Quite frankly, this is one awesome shortcode, and is possible with the need for only two parameters.

include_once(ABSPATH.WPINC.'/rss.php');

function readRss($atts) {
    extract(shortcode_atts(array(
	"feed" => 'http://',
      "num" => '1',
    ), $atts));

    return wp_rss($feed, $num);
}

add_shortcode('rss', 'readRss');

Usage

In this case, all you need is your RSS feed's URL in the "feed" attribute, and the number of posts you want to show in the "num" one.

[rss feed="http://feeds.feedburner.com/webdesigntutsplus" num="3"]

7. Twitter Share button

Twitter introduced an official sharing button a while back, that allows logged-in users to share posts in a few clicks to the microblogging service. It's farily simple to add one into your theme, but it must reside in a theme file, in a static location. This useful shortcode from iLERTECH allows you to add a Tweet button to your post with a single-letter shortcode.

function twitter( $atts, $content=null ){
/* Author: Nicholas P. Iler
 * URL: http://www.ilertech.com/2011/07/add-twitter-share-button-to-wordpress-3-0-with-a-simple-shortcode/
 */
 
    extract(shortcode_atts(array(
        'url' => null,
        'counturl' => null,
        'via' => '',
        'text' => '',
        'related' => '',
        'countbox' => 'none', // none, horizontal, vertical
 
    ), $atts));
 
    // Check for count url and set to $url if not provided
    if($counturl == null) $counturl = $url;
 
    $twitter_code = <<    <script src="http://platform.twitter.com/widgets.js" type="text/javascript"><!--mce:0--></script>
<a class="twitter-share-button" href="http://twitter.com/share"></a>
HTML;
 
    return $twitter_code;
 
}
add_shortcode('t', 'twitter');

Usage

There's two uses for this shortcode. The simplest form is demonstrated below, that adds the counter-less button into your post.

[t url='get_permalink();']

That was simple, no? If you want to add a counter, it's only a parameter away and can be done in either of the vertical or horizontal configurations.

[t countbox="horizontal/vertical"]

Finally, this last example lets you define which related accounts show up after you've tweeted, hopefully to help you grab yourself a few more followers.

[t related='connorturnbull: Author, envatowebdesign: Sister Site']

8. Display Content to Registered Users Only

An increasing trend is opting to disclose content only to registered members, sometimes on a premium basis. WordPress has a great user system, with the potential to grow through a range of available plugins so this shortcode can be requisite of your circumstances. By simply using this shortcode, any content that falls between the tags will only be available to those currently logged in.

If your worried about your feed, this shortcode will also put hide the content there, so no loophole is to be found.

add_shortcode( 'member', 'member_check_shortcode' );

function member_check_shortcode( $atts, $content = null ) {
	 if ( is_user_logged_in() && !is_null( $content ) && !is_feed() )
		return $content;
	return '';
}

Usage

As you may (or rather, should) be able to tell from the shortcode function above, the [member] tag will render any content that resides between it invisible to users that are not logged in, or viewing the feed.

[member]My super secret content.[/member]

9. Display Related Posts

Related posts are a great way of influencing visitors to read more of your content, by bouncing them about your many archives. You can implement this into your theme, but this shortcode makes little work of it and allows it to be controlled and manipulated right from within the shortcode's attributes.

Be careful though, this is a slightly longer function than our previous entries, and all thanks to WP Mods.

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;
}

Usage

You will be able to insert your related post just by using the first shortcode example below. Alternatively, you can limit the number of rendered post links by setting a limit attribute, like what has been done in the second example.

[related_posts]
[related_posts limit="num"]

10. Display Last Image Attached to Post

This is an interesting shortcode that allows you to render the last image attached to the post through a shortcode. Sure, WordPress has a featured image feature, but that doesn't always work for what you want to achieve, and may be needed twice. Luckily, this function allows you to upload an image and have it automatically appear in any location you want, as long as it is the last to do so.

function sc_postimage($atts, $content = null) {
	extract(shortcode_atts(array(
		"size" => 'thumbnail',
		"float" => 'none'
	), $atts));
	$images =& get_children( 'post_type=attachment&post_mime_type=image&post_parent=' . get_the_id() );
	foreach( $images as $imageID => $imagePost )
	$fullimage = wp_get_attachment_image($imageID, $size, false);
	$imagedata = wp_get_attachment_image_src($imageID, $size, false);
	$width = ($imagedata[1]+2);
	$height = ($imagedata[2]+2);
	return '<div class="postimage" style="width: '.$width.'px; height: '.$height.'px; float: '.$float.';">'.$fullimage.'</div>';
}
add_shortcode("postimage", "sc_postimage");

Usage

As with pretty much all the shortcodes you've seen today, this one joins them in the listings for "Simplest Shotcodes Ever". The tag can be used alone, or with a specified size and float attribute to customize it to it's extent, as shown below.

[postimage size="num" float="left/right"]

11. Embed a Google Chart

Blue Anvil bring us an awesome shortcode for embedding a really fun type of media. Nope, it's not a YouTube video, nor any kind of HTML5 or Flash effect. In fact, it's charts.

Sure, charts might be boring. But to a web developer they're not, due to the high customization achievable through the Google Charts API, that can now be molded into a shortcode for ease-of-use. The experience in using this shortcode is still fairly laborious in comparison to some of the others, but it saves a lot of time in the long run, if you want to use these types of charts regularly.

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');

Usage

In order to use this shortcode, it's advisable you have some background knowledge of how the Google Charts API works. If possible, have a browse around the documentation beforehand, to get a feel for how it works.

Once you gain some knowledge, the parameters should be fairly easy to fill in, such as the data values and labels. Others, such as colors, background color, size, title and type are pretty self explanatory and should not induce any additional difficulty.

[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"]

12. Disable WordPress Formatting

In some cases, you may want to display text that is rendered in a negative way automatically by WordPress. This plugin/shortcode removes the automatic formatting WordPress executes by removing the built-in filters added to your call of "the_content".

function my_formatter($content) {
	$new_content = '';
	$pattern_full = '{(\[raw\].*?\[/raw\])}is';
	$pattern_contents = '{\[raw\](.*?)\[/raw\]}is';
	$pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE);

	foreach ($pieces as $piece) {
		if (preg_match($pattern_contents, $piece, $matches)) {
			$new_content .= $matches[1];
		} else {
			$new_content .= wptexturize(wpautop($piece));
		}
	}

	return $new_content;
}

remove_filter('the_content', 'wpautop');
remove_filter('the_content', 'wptexturize');

add_filter('the_content', 'my_formatter', 99);

Usage

Usage is relatively simple and requires only for one to wrap his text in the [raw] shortcode.

[raw]My unformatted text[/raw]

13. Show Blog Statistics

A lot of blogs love to show off how many posts have been authored under their name, or how many comments, or some other statistic. This WP Code Snippets shortcode function allows an author to call a range of interesting statistics by adding the shortcode into their post or page. Plus, it can be used in conjunction with the previous shortcode that hides content to all but admins, to show information like number of pending comments or those in the spam queue.

add_shortcode('wcs_count', 'wcs_count_shortcode_handler');
 
function wcs_count_shortcode_handler($atts)
{
    // extract parameters
    $parms = shortcode_atts(array(
        'type' => 'posts',
        'format' => 'true',
        'extra' => '1',
        ), $atts);
 
    $type = strtolower($parms['type']);
    $format = strtolower($parms['format']);
    $extra = $parms['extra'];
 
    // process t/f options
    $b_format = false;
    if (($format == 'yes') || ($format == 'y') ||
        ($format == 'true') || ($format == '1'))
    {$b_format = true;}
 
 
    // exit
    return wcs_get_count($type, $b_format, $extra);
}


function wcs_get_count($type='posts', $format='1', $extra='1')
{
    // TYPES:
    // posts, posts_by_author, pages, tags, categories
    // users, ms_users, blogroll, blogroll_categories, commenters
    // comments, comments_pending, comments_spam, comments_pingback
    // comments_by_user, comments_by_nicename, comments_by_email
    // comments_per_post
 
    // $extra is used with:
    // posts_by_author, comments_by_user, comments_by_nicename, comments_by_email
    // comments_per_post
 
    // init
    global $wpdb;
    $type = strtolower($type);
    $count = 0;
 
    // process
    switch($type)
    {
        case 'posts': // published
        $count = wp_count_posts('post');
        $count = $count->publish;
        // options: publish, future, draft, pending, private, trash, auto-draft, & inherit
        break;
 
        case 'posts_by_author': // use $extra for user/author id
        case 'posts_by_user':
        $query = "SELECT COUNT(*) FROM $wpdb->posts ";
        $where = "WHERE post_type='post' AND post_status='publish' AND post_author='$extra'";
        $count = $wpdb->get_var($query . $where);
        // alternative method is: count_user_posts()
        break;
 
        case 'pages': // published
        $count = wp_count_posts('page');
        $count = $count->publish;
        break;
 
        case 'tags':
        $count = wp_count_terms('post_tag');
        break;
 
        case 'categories':
        $count = wp_count_terms('category');
        break;
 
        case 'users':
        $count = count_users();
        $count = $count['total_users'];
        break;
 
        case 'ms_users': // multi-site
        $count = get_user_count();
        break;
 
        case 'blogroll':
        $query = "SELECT COUNT(*) FROM $wpdb->links ";
        $where = "WHERE link_visible='Y'";
        $count = $wpdb->get_var($query . $where);
        break;
 
        case 'blogroll_categories':
        $count = wp_count_terms('link_category');
        break;
 
        case 'commenters':
        $query = "SELECT COUNT(DISTINCT comment_author) FROM $wpdb->comments ";
        $where = "WHERE comment_approved='1' AND comment_type=''";
        $count = $wpdb->get_var($query . $where);
        break;
 
        case 'comments':
        $query = "SELECT COUNT(*) FROM $wpdb->comments ";
        $where = "WHERE comment_approved='1' AND comment_type=''";
        $count = $wpdb->get_var($query . $where);
        break;
 
        case 'comments_pending':
        $query = "SELECT COUNT(*) FROM $wpdb->comments ";
        $where = "WHERE comment_approved='0' AND comment_type=''";
        $count = $wpdb->get_var($query . $where);
        break;
 
        case 'comments_spam':
        $query = "SELECT COUNT(*) FROM $wpdb->comments ";
        $where = "WHERE comment_approved='spam' AND comment_type=''";
        $count = $wpdb->get_var($query . $where);
        break;
 
        case 'comments_pingback':
        case 'comments_pingbacks':
        case 'comments_trackback':
        case 'comments_trackbacks':
        $query = "SELECT COUNT(*) FROM $wpdb->comments ";
        $where = "WHERE comment_approved='1' AND comment_type='pingback'";
        $count = $wpdb->get_var($query . $where);
        break;
 
        case 'comments_by_user': // use $extra for user_id
        $query = "SELECT COUNT(*) FROM $wpdb->comments ";
        $where = "WHERE comment_approved='1' AND comment_type='' AND user_id='$extra'";
        $count = $wpdb->get_var($query . $where);
        break;
 
        case 'comments_by_author': // use $extra for author nicename (case INsensitive)
        case 'comments_by_nicename':
        $query = "SELECT COUNT(*) FROM $wpdb->comments ";
        $where = "WHERE comment_approved='1' AND comment_type='' AND comment_author='$extra'";
        $count = $wpdb->get_var($query . $where);
        break;
 
        case 'comments_by_email': // use $extra for author email (case INsensitive)
        $query = "SELECT COUNT(*) FROM $wpdb->comments ";
        $where = "WHERE comment_approved='1' AND comment_type='' AND comment_author_email='$extra'";
        $count = $wpdb->get_var($query . $where);
        break;
 
        case 'comments_per_post': // $extra is decimal place precision (0 for integer only)
        // posts
        $posts_count = wp_count_posts('post');
        $posts_count = $posts_count->publish;
        // comments
        $query = "SELECT COUNT(*) FROM $wpdb->comments ";
        $where = "WHERE comment_approved='1' AND comment_type=''";
        $comment_count = $wpdb->get_var($query . $where);
        // average
        return round($comment_count / $posts_count, $extra);
 
        default:
        $count = 0;
    }
 
    // exit
    if ($format) {$count = number_format_i18n($count);}
    return $count;
 
    /**********************************************************************
     Copyright © 2011 Gizmo Digital Fusion (http://wpCodeSnippets.info)
     you can redistribute and/or modify this code under the terms of the
     GNU GPL v2: http://www.gnu.org/licenses/gpl-2.0.html
    **********************************************************************/
}

Usage

Yep, that's a long one! However, it's necessary to offer you the range of valuable information now available with a few lines of text, as shown below. The full list of types is avilable on the original blog post, and one is needed to be dropped into the "type" attribute. In the cases of statistics that reference a specific user, the "extra" attribute is needed and fufiled with the specific ID.

[wcs_count type="posts"]

14. Add a Flickr Badge

A lot of blogs use Flickr to manage their shots, especially those that use Flickr for it's primary use: photography. A Flickr badge is a nice little widget that allows you to show image galleries from the image-sharing service on a webpage and can too be manipulated into a WordPress-friendly shortcode.

function flickr_badge_shortcode($atts, $content=NULL){

$query_atts = shortcode_atts(array('count' => '6', 'display' => 'latest', 'source' => 'user', 'size' => 't', 'user' => '', 'layout' => 'x', 'tag' => '', 'group' => '', 'set' => ''), $atts);

return sprintf('

%s

', $content, http_build_query($query_atts)); } add_shortcode('flickrbadge', 'flickr_badge_shortcode');

Usage

The Flickr badge includes several parameters that it shares with the respective shortcode we just created. The "count" informs your shortcode how many images to show, the "source" describes the terms used find the images (such as user, group, user_set etc.) and the "display" decides whether random, or just the latest images should be shown. The others are really self explanatory.

[flickrbadge count="4" layout="h" display="latest" size="t" source="all_tag" tag="fish"]Here’s the latest fish[/flickrbadge]

15. Add a PayPal Donation Link

Blogs don't run themselves, and whether the owner works solely on it, or as a side project, he likely has to pay fees of some sort. While some bloggers resort to advertising, others benefit from their community through PayPal donations. This shortcode allows you to call a donation link at any time, and it's super easy to style into a way to match your blog.

So next time you're ranting about how much it costs to host the site, pop in a donation link instead of trying to direct them someplace else.

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');

Usage

The donation shortcode is not solicited in any way within the shortcode itself, but rather through any CSS added to the "donateLink" class used to display the link.

[donate]

A Couple of Awesome Plugins with Shortcodes

The following entries are shortcodes that are powered by a plugin, mainly because they rely on more advanced ways of configuration or back-end coding. A lot of plugins are licensed in a way that allows you to redestribute them, useful if you want to use the particular shortcode in a client project. Although they don't offer functionality that is simply pasted into a single file, the features that are delivered are worth the additional installation.


16. Easily Call Boilerplate Text

This plugin creates a new post type in your WordPress installation, allowing you to create boilerplate text to be called back at any time through the included shortcode. By creating a boilterplate that deals with your copyright terms, it can be called back successfully by simply referencing it later on in a regular post.

The advantages with such an installation include the template tags that ship with it, so boilerplates can be called in the theme files too.

Usage

The example below is usage of the shortcode in it's simplist form, without any of the other attributes included and explained in the documentation.

[boilerplate bytitle="Copyright"]

17. Add a Count-Up/Down Timer

Hopefully you're getting the sense that life with shortcodes makes everything a lot easier. As it's name suggests, Easy Timer allows one to easily insert a count-up or count-down timer into their blog, in any of the included languages.

Aside from the face functionality of adding a timer, the plugin also serves as a scheduler for content modification to be executed when the timer finishes.

Usage

The full terms of usage are explained in the plugin's page in your WordPress installation, but are fairly self explanatory when demonstrated below.

[timer]
[elapsed-timer]
[remaining-timer]

18. Easily Add and Manage a Contact Form

I used to always manage my contact form through a shortcode when I ran one of my old blogs. This particular plugin allows you to insert a functional contact form iny any post or page through a shortcode that calls the form configured in the plugin's settings. With experience with this particular plugin, I can vouch for it's usefulness and ease when wanting to repeat the same form multiple times, or when updating it.

Usage

Since this plugin's configuration is done primarily in the added menu in your dashboard, an attribute-less shortcode is all that is needed to embed your contact form.

[contact-form]

Note: Yes, there are tons of other awesome plugins that use a shortcode to insert a form! This is just one selected from the horde! Also check out Contact-Form 7 and the ever popular Gravity Forms.


19. Create QR Codes

Now this is pretty awesome! The Yeblon QR Code Generation plugin actually allows you to generate a QR code right from within a shortcode, with the URL and size defined as attributes. What's shown to your readers will be a fully functional QR code for them to scan and use at their heart's content.

It may be geeky, but it's pretty darn awesome!

Usage

Simply use the inclued shortcode with a "url" parameter (obviously stating the URL for your shortcode to redirect to) and "size" to define the width and height of the QR code. Additionally, you can add a "class" and/or "style" attribute to introduce some additional styling to the QR code.

[yeblonqrcode size="200" url="http://wp.tutsplus.com"]

20. List Uploaded Files

Finally, we come to a humble plugin that allows users to list attachments associated with a post or page; Perfect for adding files and not needing to worry about adding a ton of links.

Usage

This shortcode can be used like vanilla, plan, or with some added extras. For example, setting the "type" attribute allows you to limit the results to just a specific file type set in that attribute. The other available attributes are mainly related to styling and the structure in which the list is rendered.

[list-attachments type="pdf"]

That's a Wrap!

Of course, the possibilities of using shortcodes are pretty much endless, and they work as an effective method of saving time in your day-to-day blogging. Some of these shortcodes seem dull on the surface (like, how many people really need to insert a PDF on a regular basis), but when you consider that they help contribute to additional, lightweight features for your projects, it becomes a no-brainer. In some cases, such as in the case of the QR code generator, they're just plain cool!

If you have any more shortcodes you'd like to share, be sure to share a link in the comments!

Related Posts
  • Code
    Creative Coding
    Using WordPress for Web Application Development: Custom Database QueriesApplication foundation 400
    Throughout this series, we've been looking at the various facilities that make it possible to treat WordPress as a foundation for web application development. Thus far, we've covered a lot of ground: We've talked about how WordPress is more of a foundation rather than a framework. We've discussed the nature of the the Event-Driven Design Pattern. There's been a discussion of Email, User Management, Saving Data, Retrieving Data ...and more. In the most recent articles, we've been talking a look at how to handle queries against the WordPress database through the use of WP_Query and WP_User_Query.Read More…
  • Code
    PHP
    Creating a Photo Tag Wall With Twilio Picture Messaging & PHPProcedural to oop php retina preview
    Twilio's recently announced Picture Messaging has vastly opened up what we can do with text messaging, now we can attach photos to our text messages and have them get used in different ways. In our case, we are going to build a Photo Tag Wall, which will contain photos linked to tags that will be displayed on a website.Read More…
  • Code
    Plugins
    Displaying Information of a WordPress.org Plugin on Your WebsiteWordpressdotorg plugin api border 400
    In the first part of this article, we discussed how to use built-in functions to communicate with WordPress.org and retrieve plugin details. In this tutorial we will put the theory in action to create a simple plugin which will allow us to display details of any plugin hosted on WordPress.org on our WordPress website using shortcodes.Read More…
  • Code
    Plugins
    Creating a Shortcode for Responsive VideoResponsive video shortcode main image 400
    If you're anything like me, you use YouTube to host any video you add to your WordPress site. It saves worrying about browser or device compatibility, it saves space on your servers, and it can be a lot more reliable.Read More…
  • Code
    Plugins
    Create a Shortcode to List Posts With Multiple ParametersPost listing shortcode main image400
    On many of the client sites I build, I find there are times when I need to include a post listing on a page. I'm not talking about archive pages here, but adding a custom listing to an existing static page. For example, I might want to list some posts on the 'About' page, or the site may require an in-depth page for a topic, with a list of posts and custom post types related to that topic. One way to do this is by creating a custom page template to include the current page content plus the results of a second custom query, but if you want more flexibility over how you list posts, or just want to do it a few times, a shortcode will be a simpler solution. In this tutorial, I'll show you how to create a simple shortcode to list all posts of a custom post type, and then I'll expand on that to create a shortcode with various parameters that users can specify to list posts however they want.Read More…
  • Code
    Plugins
    Multiple Shortcodes With a Single Function: 3 Killer ExamplesMultiple shortcodes with a single function 3 killer examples
    The powerful Shortcode API allows us to create "snippets" and include special content (such as PHP functions or complex HTML code) in our posts. It's extremely common to build separate functions for each shortcode, but is it really necessary? In this post, we're going to see how we can utilize more than one shortcode by building a single function.Read More…