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:


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:

  1. Download the Host Like Toast WordPress Shortcode Library zip file.
  2. Go to your site and “Add New” Plugin
  3. Upload the zip file to your site
  4. Activate it.
  5. 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.

Get Started with WordPress Shortcodes today!

At the time of writing the plugin contains 2 main shortcodes for the v1.0 release:


To use this you simply enter in the following text into your posts or pages:

[DIVCLEAR] to create the following line of HTML:

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


To use this you simply enter in your posts or pages:

[HTMLDIV class="myclass" id="myid" style="some CSS"] some content [/HTMLDIV]

to create the following line of HTML:

<div class="myclass" id="myid" style="some CSS"> some content </div>

You can grab the WordPress plugin download from the Developer Channel today and get started. (Sign-up below if you haven’t already)

Soon, you’ll be able to add it to your WordPress site directly from the repository…

Use the form below to join our Developer Channel

Do you need an automated CPanel web hosting backup script? There is that and more in the Developer Channel

{ 5 comments… read them below or add one }

nikhil June 14, 2012 at 6:25 am

thanks for the guide


Ishwon April 20, 2013 at 10:46 am

I’ve been using the twitter bootstrap on wordpress for some time. They save a lot of time designing & templating css. Came across this article while searching more about the short codes. Nice article especially for those who want an introductory to wordpress short codes.


Paul April 20, 2013 at 11:23 am

Great to hear you found this useful… It’s precisely why I wrote this 🙂

Thanks for taking the time to let me know it helped.


rashmani December 9, 2013 at 4:03 pm

Hi Paul,

thanks for your guide, very useful!
Here is my question: is there any way to keep custom code separated from main plugin code? I’m looking for a way to minimize impact when updating the plugin. Every time I need to re-insert custom code after updating the plugin and I’ve found no way to, say, keep my code in a separate file and load it when the rest of the code gets loaded.
I’ve tried importing an external file and extending the class, but no success…
Do you have a better idea…?

Cheers and thanks again!


Paul December 9, 2013 at 7:31 pm

Hi Rash,

Thanks for the question. I’m not sure if you’re asking about this particular plugin I made, or for plugins in general.

Either way, you wont be able to directly edit a plugin and have that code remain after a plugin is updated.

As I see it, you have 2 options.
1) Create your own plugin… take my plugin for example, rename it (so that the repository doesn’t mistake it for mine) and rename the file. Then you can put all your own custom code in there and never have to worry about plugins updating.

2) Use your themes functions.php and link to custom code from within there. Again, you’ll have the same problem as with updating plugins, but since themes update much less frequently in general, you’ll have less of an issue.

I’m not sure if these help, but I think your best bet is to create your own plugin which you can edit as much as you like and that will never be affected by other plugins updating.

Hope that help Rash.


Leave a Comment

Previous post:

Next post: