What are Shortcodes

Shortcodes 101

WordPress shortcodes are PHP functions for creating macros that can be used within the post content in order to display additional (usually more elaborate) content. With shortcodes, you can display forms, galleries, call-to-action buttons, or columns of content without the need for programming skills or HTML markup that can clutter your content space, which makes it harder to manage.

“A shortcode is a WordPress-specific code that lets you do nifty things with very little effort. Shortcodes can embed files or create objects that would normally require lots of complicated, ugly code in just one line. Shortcode = shortcut.” – WordPress.com

What do shortcodes look like?

A shortcode is a bit of text or sometimes words wrapped with brackets. Like this:

You will insert this into your WordPress post, and it will display a gallery of images.

Shortcodes can also be used with additional attributes (assuming the shortcode was created to have additional attributes) to change some of the default values of the shortcode. Like this:

Creating a shortcode

Shortcodes are created using the WordPress shortcode API. You’ll first define a handler function. They accept parameters (attributes) and return the results (the shortcode output).  The API call to register the shortcode handler would look like this:

add_shortcode('shortcodename', 'shortcode_handler');

Three parameters are passed to the shortcode callback function. You can use any number of them, or none at all.

• $atts – an associative array of attributes, or an empty string if no attributes are given
• $content – the enclosed content (if the shortcode is used in its enclosing form)
• $tag – the shortcode tag, useful for shared callback functions

Let’s create a simple Button shortcode

Alright, you made it this far, so let’s try creating your first shortcode. To start off, go to your themes directory and open up the functions.php file. Paste this code into it:

function my_button($atts, $content = null){
	extract(shortcode_atts(array(
		'link' => '#'
	), $atts));
	$output = '<a class="button" href="'.$link.'">'.$content.'</a>';
	return $output;
}
add_shortcode('mybutton', 'my_button');

So what’s going on here?

1. We defined a new handler function called my_button.
2. The shortcode has a single attribute: link
3. Return our button html markup code.
4. Finally, the API call to register the shortcode handler: add_shortcode(‘button’, ‘my_button’);

We’re done! Wait. Not quite. We still need to style our button. Open your style.css file and paste this into it:

.button {
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    padding: 0.7em 1.5em;
    border-radius: 10px;
    background: #4ba3d6;
    color: #fff;
}

Now go to your post and insert:

[mybutton link="http://www.google.com"]Simple Button[/mybutton]

And that’s it! You created your first shortcode.

So go ahead and start creating your own shortcodes! If you need any assistance, leave me a comment.