How to create a shortcode in WordPress

How to create a WordPress shortcode by Maroon Balloon web design

We favour WordPress as our website platform of choice because it is so widely used, well supported, intuitive for non-technically minded administrators and, perhaps most importantly, customizable. Here we provide a quick tutorial on how to create a shortcode.

What is a shortcode?

A shortcode is a shortcut tag that you can enter into a WordPress page to run a certain piece of pre-defined functionality, for example entering the shortcode “[tel]” into your blog post might print out your telephone number formatted to a certain style and as a live hyperlink. This is useful since it saves you writing out the full phone number everytime, formatting it and hyperlinking it.

Shortcodes are so much more powerful though – your imagination and coding skills really are your limit. In the quick tutorial that follows, we walk through how to create a shortcode that writes out a bullet point list of all your blog posts. We’ve used this here on our website to add a listing of our blog posts to our site map page, alongside the regular list of pages. Ready?

Create the function

Open your functions.php file in a plain text editor like Notepad or TextWrangler. You’ll find this in the root of your theme folder.

Important! If you’re using a purchased or downloaded theme, then you should have a child theme set up too. Look in your wp-content/themes folder and you should see your main theme (and possibly others, like the WordPress default twentyseventeen etc), eg mytheme. In the same folder you should also have a child version of that theme, eg mytheme-child. If not then you’ll need to create this, as you really shouldn’t be editing the theme’s files (this is known as “hacking the theme” or “hacking core code” and it’s bad practice). To set up a child theme properly and instruct your WordPress installation to use it, follow Smashing Magazine’s excellent tutorial here.

With your child theme’s functions.php file open, add the following php code above the closing “?>”. Take care not to change any of the existing code as this will almost certainly break your site. Perhaps take a backup copy of the original functions.php file first – better safe than sorry.

// Create shortcode to list my blog posts
function sitemap_blog() {
$output = "<ul class='my-list'>";
$args = array(
'post_type' => 'post',
'posts_per_page' => -1,
'orderby' => 'date',
'order' => 'DESC'
);
$post_query = new WP_Query($args);
if($post_query->have_posts() ) {
while($post_query->have_posts() ) {
$post_query->the_post();
$output .= "<li class='my-item'><a href='" . get_permalink() . "' title='" . get_the_title() . "'>" . get_the_title() . " (" . get_the_date() . ")</a></li>";
} // end while
} // end if
wp_reset_query();
$output .= "</ul>";
return $output;
}
add_shortcode('my-blogs', 'sitemap_blog');

How does it work?

Lines beginning with two slashes (“//”) are comments and are not executed as code. Use these to describe what the code’s doing – this can serve as a useful reminder to others and yourself at a later date.

First we create the function (“function sitemap_blog()”) and then output some html code to begin a <ul> list.  Then we run through an array of all posts, outputting each one as a list item (“<li>…</li>”), finally closing the list once all posts have been written out (“</ul>”). You’ll notice that each list item written out gives the blog title followed by its date in brackets, with the whole line being a hyperlink to that blog post. Also note that we’ve thrown in CSS classes for both the <ul> list and its <li> items, so that you can style these as you need in your master stylesheet, ie “my-list” and “my-item” will relate to the .my-list and .my-item class definitions in your style.css file.

Once that list has been output (“return $output;”) we’re ready to put our function into a shortcode. As you’ll probably have guessed, that’s the last line: “add_shortcode(‘my-blogs’, ‘sitemap_blog’);”. This basically creates the shortcode “my-blogs” and tells it to execute the function “sitemap_blog”.

The output

The final step is to add your new shortcode to your web page. Open a page in WordPress, eg your sitemap page, and in the text editor simply enter “[my-blogs]” (without the quote marks). You’ll recognise this from above; the square brackets simply let WordPress that we’re asking it to process the shortcode named inside. If all went well then when you refresh your sitemap page you’ll have a nice bullet point list of all your blog posts, each linking to the post itself. As mentioned, these will be styled according to your style sheet – you can specify your own margins, padding, link and hover colours and effects, bullet point styling and so on. Here’s the output you’ll see if you view the source code:

<ul class='my-list'>
<li class='my-item'>
<a href='https://www.maroonballoon.co.uk/website-launch/a-new-website-for-fordingbridge-plc-just-launched/' title='A new website for Fordingbridge plc just launched'>A new website for Fordingbridge plc just launched (12 January 2017)</a>
</li>
<li class='my-item'>
<a href='https://www.maroonballoon.co.uk/news/where-did-2016-go/' title='Where did 2016 go?'>Where did 2016 go? (23 December 2016)</a>
</li>
<li class='my-item'>
<a href='https://www.maroonballoon.co.uk/website-launch/roll-up-roll-up/' title='Roll up, roll up...'>Roll up, roll up... (30 November 2016)</a>
</li>
<li class='my-item'>
<a href='https://www.maroonballoon.co.uk/website-launch/two-websites-launched-in-two-days/' title='Good things come in threes'>Good things come in threes (7 September 2016)</a>
</li>
</ul>

And this is how it renders on our site map page (right column) alongside our regular list of pages (left column):

Shortcode blog site map by Maroon Balloon web design

And that’s it, folks. Useful, right? Now that you know how to create a shortcode in WordPress, have a play with it. Be adventurous – the possibilities are pretty much endless!