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.
When you toggle between the Visual and the HTML editor, typically you will break any code you have entered.
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:
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.
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.
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:
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 WordPress.org repository…