Advertisement
  1. Code
  2. General
Code

Resource Roundup! 20 Creative Shortcodes To Use In Your Projects

by
Languages:

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.

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.

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.

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.


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.

Usage

Simply wrap your note in the [note] sortcode


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.

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.


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.

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.


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.

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.


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.

Usage

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

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.

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.


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.

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.


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.

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.


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.

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.


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.

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.


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".

Usage

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


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.

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.


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.

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.


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.

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.


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.


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.


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.

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.


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.


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!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.