Blog

Code Less. Do More. Implement Wordpress Shortcodes!

Posted by mitch causey

November 8, 2012 at 12:00 AM

To take advantage of time-saving Wordpress shortcodes, you must first understand what a shortcode is, how shortcodes can increase efficiency and how to create your own. Let's get to it.

What are Wordpress shortcodes?

Shortcodes in the Wordpress platform are representations of larger, more complex snippets of code. They let Wordpress know that a certain script or code snippet should be placed within the content section of the page without having to copy and paste the entirety of the necessary code. In terms of format, shortcodes use this syntax: [shortcode name]. A common example of a Wordpress shortcode is the built-in gallery shortcode:

Attaching images to a page or post and inserting this shortcode will automatically create a gallery on that page without any additional code. In this example, there is no need to learn HTML, CSS, PHP or any other programming language.

The three most common types of shortcodes are native, theme/plugin and custom. The Wordpress platform comes with a large number of prebaked shortcodes found here. Themes and plugins often offer shortcodes to decrease any skill-level barriers that could inhibit their installation. Finally, using the Wordpress shortcode API or a plugin discussed below, a webmaster can create custom shortcodes for more control over the site.

How shortcodes increase efficiency and save time

Think of a shortcode like a credit card. When you hand a cashier your Visa, he or she understands that your card represents much more than just any piece of plastic. If it weren't for credit cards, we would have to carry around mounds of cash for large purchases--which would be an inconvenience, to say the least.

From my experience, shortcodes help increase efficiencies in at least two circumstances: implementing a functional element and using similar elements within the content section of multiple pages.

Implementing a functional element

As with the example above, shortcodes allow a developer to insert a 9-character piece of code rather than copying and pasting hundreds of lines of code to achieve the same effect. This allows theme and plugin developers to communicate easily with webmasters running Wordpress because the installation of a plugin can require the webmasters to understand only how to copy and paste a [shortcode] versus requiring them to understand a set of custom functions that make the plugin work.

Using similar elements within the content section of multiple pages

Theme templates can affect pretty much every part of a website running Wordpress except for elements within the content section of a page or post. Shortcodes can pose as "mini-templates" for this occasion. For example, if you had created a 30-line custom form that was to be included right in the middle of the content of 15 different blog posts within a series, you have two options: copy and paste the entire code into each or create a shortcode.

Copy and paste entire code option

At first, copying and pasting 30 lines of code for a form may not sound like more work than copying and pasting a shortcode, but I would argue that it is. Here's why: if at some point you realize there is an error in the form's code or a typo in the text, you would then have to edit the code on one page, copy the updated code, remember the 14 other posts that had that same form, navigate to each of those and finally paste the new code into each them individually.

Create a shortcode option

Let's say instead of copying and pasting the entire 30 lines of code, you created a shortcode: [30form]. This time, you create the code for the form in a single location and create a shortcode for it. Then, you copy and paste the shortcode into every post. Now, when you realize you had made a mistake, all you have to do is go to the single source of the form, edit it, hit save and you're done.

How to create your own shortcode

Creating a custom shortcode in Wordpress is very simple. For those advanced webmasters out there who want complete control over your custom shortcodes, visit the Shortcode API page.

For the rest of you, I highly recommend using this plugin when creating a custom shortcode. Here's how it works:

Step 1: Install the plugin

Install the plugin

Step 2: Activate it

Activate It

Step 3: Add code to the shortcode editor and click "Save"

Add code to the shortcode

Step 4: Insert the newly created shortcode to a page or post in the HTML editor

Insert the newly created shortcode to a page or post in the HTML editor

Step 5: Publish / update to see the new code live on your site

Publish!

Tl;dr

  1. Wordpress shortcodes look like this: [shortcode]
  2. They save you time.
  3. Create shortcodes of your own with this plugin.

Share how you have used shortcodes to save time in the comments below.

Subscribe By Email