How To Extend WordPress With Powerful Shortcodes

by Paul on December 2, 2011

WordPress… as you probably know by now is a top-class Content Management System.

One of the reasons for this is WordPress’s extensibility.

You can quickly extend the functionality of the system with a plugin and/or theme making it perform all manner of tasks and usefulness.

A feature introduced in WordPress some time ago was that of WordPress Shortcodes. Once you have control of shortcodes, a new world of WordPress customization and ease of use opens up to you.

This article explains how they work and how you can make your own!

What are WordPress Shortcodes?

WordPress Shortcodes are simply short-cuts to displaying certain elements on the site without having to code them or write them out each time.

They allow you to write a little bit of code, wrap it up into a package, and then call that code each time you need it (from within your Posts/Pages) and display it.

The WordPress editor is extremely unforgiving when you attempt to put any sort of code such as Javascript into it.

When you toggle between the Visual and the HTML editor, typically you will break any code you have entered.

This is also the same for HTML DIVs. It will strip your content of empty DIVs even though you may have Javascript/CSS defined elsewhere that uses them.

An altogether frustrating experience.

The best (only?) option in these cases is to enter the code into the Post/Page using a shortcode and by-passing the editor altogether.

An example that I use is this:

<div style="clear:both"></div>

Since this is an empty DIV the Visual editor in WordPress will kindly remove this for you regardless of how important you feel it is.

So now, I simply use the shortcode:

[DIVCLEAR]

This creates the necessary HTML text for me as the page is rendered so I never need to worry about it again.

Nice huh?

How to create and add your own WordPress Shortcodes?

A great place to start to learn more about Shortcodes is in the WordPress Codex.

There’s a fair bit of reading to do there, and the WordPress API in this regard is important to know.

That said, I have created a template file for you do download that contains a couple of Shortcodes that I use.

With this template all you need to do is see what’s there, and replicate it. It’s really extremely easy to do.

In this way you can add custom WordPress Shortcodes to your site in minutes!

I have provided a download for a plugin that you can add to your site immediately. It contains the DIVCLEAR shortcode for you already and a place-holder for a new one.

You can get immediate access to this from the Developer Channel. Here’s all you need to do to get started:

Download the Host Like Toast WordPress Shortcode Library zip file.
Go to your site and “Add New” Plugin
Upload the zip file to your site
Activate it.
Use the Shortcodes .

If you want to edit the Shortcodes you could edit the file inside the Zip package on your computer and upload it, or you can go to the ‘Editor’ under ‘Plugins’ and edit it directly there.

It’s entirely up to you.