Shortcodes and plugins, oh my!

Posted by filed under Technology

EDIT October 2014: This plugin no longer functions under recent versions of WordPress. If you’re looking for something similar, I suggest the very complete Shortcodes Ultimate instead.

It seems that everyone’s adding some shortcode functionality to WordPress these days. Not one to be left behind, I’ve collected some nifty CSS styles over the time I’ve had this blog and I’ve mashed them all up into one very handy WordPress plugin, which I use to create some lovely button and blockquote styles.

Shortcodes are awesome for this. When you’re writing or editing a post, you don’t want to bother jumping into the HTML editor just to add a shiny CSS button style to your markup (well, at least, I certainly don’t want to…).

Shortcodes work like such:

[shortcode_name attribute="chosen_attribute"]This is your nifty content.[/shortcode_name]

Now, apparently WordPress can be made to recognize any number of custom shortcode combinations with a few simple lines of code. This can be added either to a plugin, which can be a bit of a pain to write, or directly to your theme’s function.php file.

Here’s the gist of it:

add_shortcode('your_shortcode_name', 'your_function_name');

function your_function_name($atts, $content=null, $shortcodename ="") {
$content = strip_only($content, 'br'); /* this strips any stray <br /> tag */
$return = '<div>'; /* this begins your markup for your stylesheet */
$return .= do_shortcode($content); /* this echoes the content between your shortcode tags */
$return .= '</div>'; /* ends your markup */
return $return; /* echoes the whole sha-bang */

Next, all you have to do is decide on your markup structure, create your shortcode functions and write your CSS classes, adding styles and pretty icons along the way. What does it do? Here’s a few examples:

[button style=”alert”]Alert[/button] [button style=”info”]Info[/button] [button style=”tick”]Tick[/button] [button style=”note”]Note[/button] [button style=”download”]Download[/button] [box type=”info”]I am an info box![/box] [box type=”note”]I am a note box![/box] [box type=”tick”]I am a tick box![/box] [box type=”download”]I am a download box![/box] [box type=”alert”]Alert! I am an alert box![/box]

So there you have it; I’ll be honest, I have no idea where I picked up some of those styles. I also quite like Rockettheme’s RokCandy Joomla extension, although it sports, in my opinion, way more styles than I would ever need. There’s also quite a few good CSS3 button tutorials out there. I’m letting this little plugin framework free into the wild. If you like, feel free to modify it, tweak it, add styles and any number of other stuff to it. Link back to your modded shortcodes if you want.

Important: I don’t currently have either the time or the energy to provide support for this. There’s plenty of good plugin framework documentation on the WordPress codex page. This little framework is pretty barebones; it’s just a plugin file, a few custom shortcode functions and some CSS styles and images that get applied automatically. Feel free to post in the comments if you need help, but I can’t guarantee much. ;) This is just my little experiment; thanks for understanding.

This plugin will therefore just parse your shortcodes and output them as HTML, styled with CSS. The relevant files are automatically added, via a function hook, to your theme’s header.php. There’s a documentation page in the backend under Settings -> WiPcandy examples which lists the various shortcodes you can use along with screenshots of what they output in the frontend. I’ve also added, for convenience, a TinyMCE shortcut button which pops up a window where you can “build” your shortcode. Press the OK button and, Presto! Your shortcode is added to the editor window. Currently, the automatic insert can strip any existing shortcode and replace it with a new one; just select some text in the editor, click the WiPcandy button, rebuild your shortcode and press OK. The plugin should replace your existing shortcode with the new one, while keeping your content intact.

Give it a whirl, tell me what you think. If you find bugs, comment below and I’ll -try- to work them out. If the bug has something to do with the RegExp function that strips out any previous shortcodes, keep it to yourself, because I couldn’t find the way around that stuff if my life depended on it.

Finally, this plugin is distributed because I feel like, and absolutely as is, with no guarantee that it won’t completely explode your WordPress installation. Please don’t blame me for corrupted databases, lost posts, weird display bugs and climate change.

Thanks. :)


  1. CSS says:

    Keep working ,terrific job!

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>