Many of our clients like to be able to update their own WordPress websites by themselves. And while they might feel perfectly comfortable inserting text or photos here or there, they don’t know about shortcodes. If you learn how to harness the power of shortcodes, you can make your WordPress website do so much more. You’ll have the ability to publish dynamic content using macros, without the need for programming skills. WordPress define a shortcode as follows:

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’s Built-In Shortcodes

All WordPress themes have five built-in shortcodes: audio, caption, embed, gallery, and video.

  • [audio] lets you embed an audio file.
  • [caption] lets you wrap captions around content—generally images.
  • [embed] lets you embed content like video, audio, and tweets.
  • [gallery] lets you insert an image gallery
  • [video] lets you embed a video file

So, for example, when you’re editing a post or page, you can use a shortcode like this to display a video:

[video src="video.mp4"]

You can click on any of the links above to learn more about how to use these built-in shortcodes, and you’ll see there are a lot more possibilities for how to configure them.

Your WordPress Theme’s Shortcodes

Each WordPress theme is different, but there are a few powerful shortcodes that are common. Be sure to ask your web designer for documentation explaining the possibilities. A few of our favorites:

The Column Shortcode

You can use this to divide your content into columns, usually from one to six columns. Here’s how it works for one-column content:

shortcode-demo-one-column

Here’s the code for a two-column layout:

shortcode-demo-two-columns

And here’s the code for a three-column layout:

shortcode-demo-three-columns

Note that you simply use _last to indicate the last column in the series. You can even do various combinations of these columns, like [[one_sixth]] and [[five_sixths]] … as long as the fractions add up to 1.

The Tabs Shortcode

The tabs shortcode is a great way to add a cool tabbed interface to the front end of your website. For example:

[tabs] [tab title=”First Tab”]Content for tab one goes here.[/tab] [tab title=”Second Tab”]Content for tab two goes here.[/tab] [tab title=”Third Tab”]Content for tab three goes here.[/tab] [/tabs]

The styling for these tabbed boxes varies widely by theme, but here is generally how the code looks on the back end.

shortcode-demo-tabs

The Accordion Shortcode

Similar to the tabs shortcode, an accordion shortcode lets create a user interface on the front end with tabs or content blocks which collapse or expand upon user interaction. Each tab has content below it which expands when the user clicks on the menu item. Here’s how an accordion might look on the front end of the site:

[accordion-wrap] [accordion title=”Title of accordion item” icon=”icon-file” active=”false”]Drop-down content goes here.[/accordion] [accordion title=”Second accordion item” icon=”icon-file” active=”false”]Drop-down content goes here.[/accordion] [accordion title=”Third of accordion item” icon=”icon-file” active=”false”]Drop-down content goes here.[/accordion] [/accordion-wrap]

Here’s how the code generally looks:
shortcode-demo-accordion

Other Common Shortcodes

Some popular shortcodes include codes for lists, buttons, and dropcaps. The sky is really the limit when it comes to pre-formatting content with shortcodes.

When to Skip Shortcodes

If you’re using WordPress for a blog and are inserting one or more shortcodes into a large percentage of your posts, you may run into trouble down the line. If you’re using WordPress’s built-in shortcodes, you should be fine. If you use a theme-specific shortcode, however, the day may come when you want to change WordPress themes… and then you might need to recode the shortcodes for all those posts. Ugh, right?

The way around that problem is to use a plugin to add shortcodes to your theme. You can find plugins for just columns or accordions, but if you want a ton of shortcodes, the plugin Shortcodes Ultimate may be the one for you.

Want to amp up your WordPress skills by using shortcodes? Ask us a question in the comments!

Published On: July 29th, 2016 / Categories: Blog / Tags: /

Subscribe to Receive the Latest News from I.T. Roadmap