What is a WordPress Shortcode, and How Are They Useful?

This is Day 17 in the 30 Day Blogging Challenge. You can read Day 16’s post here.

What is a shortcode?

A WordPress shortcode – not to be confused with shortbread – is a shorthand version of a piece of code. They’re written to allow users to add functions to WordPress sites in a quick way, without the user needing to write the code.

Shortcodes are written within square brackets []. They may be self-contained:

[shortcode]

or open and close:

[shortcode][/shortcode]

How do I use one?

Shortcodes are usually added to posts or pages.

For example, the

[gallery]

shortcode adds a gallery to your post.

Shortcodes may also be added to text widgets in widget areas.

Where will I find shortcodes?

Many plugins use shortcodes.

Some examples are:

Contact Form 7

This plugin generates a contact form, which is displayed by using a shortcode.

[contact-form-7 id="28"]

See this contact form on my contact page.

Download Contact Form 7.

Events Manager

This is a powerful and extendible events management plugin. You can add events and display them in multiple ways e.g. by date, location or category.

The shortcode below shows a list of 5 events in a specific category over 2 pages.

[events_list scope="future" limit=5 pagination=1 category=58]

See the result at the Events Manager demo page.

Download Events Manager.

Testimonials Widget

When you download the plugin, you need to create some testimonials in the same way that you would add posts.

When you insert this shortcode in a page, it will list all testimonials, newest first.

[testimonials]

Download Testimonials Widget

Plugins with multiple shortcodes

Shortcodes Ultimate

I love this plugin. It provides a large number of shortcodes for many purposes. Here’s the list of things you can generate.

Here’s an example of a two column layout with boxes:

The best part is that you don’t need to write the code – you use a WYSIWYG interface, which generates it all for you based on the options you select.

Download Shortcodes Ultimate.

How do I create my own shortcode?

Here is a simple example, which creates a shortcode called [pink-tick] which can be used to replace the bullet in an unordered list.

Add this function to functions.php of your child theme:

 function pink_tick_shortcode( $atts, $content = null ) {
  return '' . $content . '';
}
add_shortcode( 'pink-tick', 'pink_tick_shortcode' );

You also need this CSS, plus the pink-tick.png file in an /images/folder in your theme.

span.pink-tick ul {
list-style-image:url('images/pink-tick.png');
margin-bottom: 5px;
}

Using the code:

[pink-tick]

• List item
• List item
• List item

[/pink-tick]

The result:

The WordPress Codex will teach you more about creating your own shortcodes. There are certain characters you should not use in your shortcodes, i.e. – & <> & ‘”.

 

I hope this has given you a basic introduction into the power of WordPress shortcodes and what they can do. If you liked this post, please leave a comment.

Category: WordPress Tags: 30 day blogging challenge, shortcode