Out of the box, WordPress offers a pretty decent spread of editor buttons to make your posts look good and read well, thanks to its use of the TinyMCE editor. However, if your blog has multiple contributors, each with varying degrees of HTML knowledge, you’re going to need to get creative to avoid those contributors creating a mess.

So, I’m going to show you how to create a shortcode that removes the heavy lifting of coding a blockquote with a citation and automates it for the author.

This is where learning how to build shortcodes in WordPress comes in. Building a shortcode or two will allow contributors to add more complex pieces of content to your blog without the headache of formatting or–gasp!–coding.

In my role at Axosoft, I’ve needed to create some buttons that help contributors insert various repeated content types. A good example is the blockquote. Citing an author and a URL can make this a potentially messy process when different people are writing. The TinyMCE editor can be a little quirky in the wrong hands, and we want things looking consistent across our posts.

So, I’m going to show you how to create a shortcode that removes the heavy lifting of coding a blockquote with a citation and automates it for the author. Rather than using the blockquote button that comes with the TinyMCE editor by default, authors will be able to use the simple blockquote we create, to add an author, citation, and link (all optional) and be done. It will end up looking like this:

For simplicity, I’m going to do all the work in our theme’s functions.php file. I would recommend getting granular with function files so you can keep organized. (In the Axosoft theme, we have a functions folder, with a shortcodes.php file, and we require it from our main functions file.)

WordPress’s shortcode API has the info you need for reference. We’re keeping the shortcode functionality itself pretty simple; a shortcode with attributes, but none of those attributes have defaults.

Okay, let’s learn how to create that shortcode in our WordPress theme!

We need to create two things:

A function that handles our shortcode.

A call to add_shortcode, which registers that shortcode and ties it to the function, so it’ll be parsed.

Let’s start with the basics of the function:

function do_blockquote_shortcode( $atts = null, $content = null ) {
}

By default, we have no attributes and no content defined. However, when the shortcode is parsed, it will at least have content passing into the function.

Next, we’ll register this function by calling add_shortcode:

add_shortcode( 'blockquote', 'do_blockquote_shortcode' );

The function has two parameters. The first defines the shortcode in the square brackets. In our case, we are going to make shortcode simply called blockquote. The second parameter is the function we’re tying to that shortcode.

Inside the function, we’ll set up our content as the variable $output, and then return it at the end. We’ll start with opening and closing figure tags:

At the most basic level, this will work. It’ll insert the tags and place the content inside the blockquote tags. However, this is not much different from using the built-in button in WordPress. Let’s add some attributes that give authors a bit more power with their quotes.

We’re going to have 3 optional attributes:

author: the person to whom the quote is attributed.

cite: the name of the source; for example, The Verge.

link: the URL of that source.

Here’s where we need to do some planning. We want to allow our authors to add an author, OR a citation, OR both. We can safely assume that if both of these attributes are missing, we do not need to append our figure tag with any source information. So, let’s create a wrapper that takes that into account:

Nice. Next, let’s add a comma if there’s a citation, to separate the author and citation:

if( $atts['author'] && $atts['cite'] ) {
$output .= ', ';
}

Next, we can work on our citation. Since we only wrapped the author in a link if there was no cite attribute defined, it’s less complicated working with the citation and links. It’s all pretty straightforward.

That’s it! You’ve learned how to register a new shortcode in WordPress and allow for attributes to be defined within it. This should make your various contributors only have to use a simple piece of shortcode to output code that would otherwise potentially get messy.

I’ll be following up on this post with a second post, where we will create a custom TinyMCE button that will offer a UI for the attributes and then generate this shortcode automatically!

If your WordPress blog has multiple contributors, each with varying degrees of HTML knowledge, you’re going to need to get creative to avoid those contributors creating a mess when doing performing some complicated tasks. This is where learning how to build shortcodes in WordPress comes in. Building a shortcode or two will allow contributors to add more complex pieces of content to your blog without the headache of formatting or–gasp!–coding.

Tweet @Axosoft to tell us what you’ve used shortcodes for to simplify your WordPress blog!