Discover the Easiest Way to Fully Customize Your Website Using Shortcodes

Shortcodes are incredibly useful for almost any need, big or small. They are a true game changer for adding special features, unique functionality and in-depth customization to your website or even simply to change the look and feel of things. They are especially great for beginners as they require very little effort and don’t actually require knowing how to write any code! Pretty awesome huh? We thought you might like that! So, let’s jump straight in!

What is a Shortcode?

A WordPress shortcode is a simplified line of text written inside square brackets that represents a larger piece of code that implements a certain function. It’s essentially a snippet of text that, once entered, tells WordPress to perform the functions of a larger piece of complicated code.

The functions can be as simple as adding a button at the end of a paragraph or as advanced as inserting things like entire photo galleries or interactive forms. These are able to be inserted into posts, pages, and even widgets on your website.

Let’s take a look at a very simple example of a shortcode that adds a button to your website..

Here’s all that you would need to type and all that you’d see as the administrator in a post or page..

button shortcode

Then, once you publish the post or page, here’s what the button may look like from the front end once someone views your page..
Screen Shot 2015-11-30 at 4.34.05 PM

Where can I find shortcodes?

You can find shortcodes in 3 main places.

1. Pre-built into your current WordPress theme

If you have a theme that came with shortcodes, you’ll find them already available in your visual editor.

2. Built into a plugin

Many plugins require you to physically add their pre-built shortcodes into posts, pages, or widgets in order for them to work. For example, WooCommerce (an e-commerce store and shopping cart plugin) requires you to specify pages that are dedicated solely to specific shortcodes. These plugins are pre-built, but must be copied and pasted into specific pages.

3. Built into a plugin that’s dedicated to shortcodes

If the theme that you chose doesn’t come with shortcodes right out of the box, you can download a shortcode plugin and get hundreds of options. If your theme provides basic shortcodes, you can always download another shortcodes plugin in order to get even more options!

Tip: If you are using your theme’s shortcodes, but may switch themes in the future, it is likely that they won’t transfer to a new theme. So, if you are thinking about switching themes in the future, consider using shortcodes from a plugin rather than from your theme. That way you can take all your work with you from theme to theme and nothing will be lost.

Here are some of our favorite shortcode plugins:

2 types of shortcodes

Real quick we want to cover the basic types of shortcodes, so we can have a better understanding of how to best use them. Once we know these we can then go over some examples. So, there are two basic types of shortcodes: Non-Enclosed and Enclosed.

1. Non-Enclosed

A non-enclosed shortcode is a shortcode that fits all within one bracket that does not wrap around any text or other content. These are very typical shortcodes and can standalone as one bracketed phrase.

For example by inserting a code like: [button] in your post editor, your desired outcome would simply appear as a button on the front end for your readers to see and interact with.

2. Enclosed

An enclosed shortcode is a shortcode that wraps around a piece of text or other content in order to add customization to that text. These types of codes have an opening (or beginning) code and a closing (or ending) code.

For example, [shortcode]Your content here[/shortcode]. The first code opens the function and the second code closes it. The forward slash “/” found in the second code indicates the ending of the code.

Let’s take a look at a quick example

We’re going to add a highlighted box around a piece of content in order to make it stand out a little more.

Here’s what you would type in..

Screen Shot 2015-11-30 at 4.53.28 PM

And here’s what your reader would see..

Screen Shot 2015-11-30 at 4.51.40 PM

Note: this type of box can be added by using the shortcode from the Shortcodes Ultimate plugin. Your theme may offer their own box shortcode function but it may appear different than the example as found here.

Let’s take this example a step further. We’re able to combine multiple shortcodes affecting the same piece of content for an even deeper level of customization. We’re going to quick add an accordion function to our site in the same highlighted boxed area.

Here’s what you would type in..
Screen Shot 2015-11-30 at 4.58.28 PM

And here’s what you would see..

Spoiler title
Spoiler title
Spoiler title

Note: this type of accordion can be added by using the shortcode from the Shortcodes Ultimate plugin. Your theme may offer an accordion shortcode that may appear different from the one listed here:

Each of the 3 accordion dropdown options are wrapped in a larger accordion function code. Then you’ll see that the opening and closing codes of the accordion are both wrapped inside the larger “note” shortcode.

You can customize even further from here to include even more functions. See the following example.

Screen Shot 2015-11-30 at 5.08.07 PM

And here’s a screenshot of what you would see with this code..

Screen Shot 2015-11-30 at 2.31.28 PM

This quick introduction isn’t meant to overwhelm you. Instead, it’s meant to show you a snapshot of the detailed customization and the world of possibilities. These options can really transform not just the look and feel of your website, but also the functionality for your audience.

How to insert a shortcode

Depending on the theme or the plugin you have installed, your shortcodes buttons may be located in different areas. However, for almost every theme or plugin, you will be able to find a list of buttons somewhere in the visual editor. The visual editor is the same area where you’ll find your formatting options such as bold, italics, font color, heading styles, etc.

Visual Editor buttons

I’ve installed all 3 of the recommended plugins to show you where each option is located. The screenshot below shows where you’d be able to find each shortcode plugin’s options in your visual editor.

button shortcodes 2

You can insert a shortcode by simply clicking one of the buttons on your visual editor dashboard located above the content area of a post or page.

You will often be prompted with a box for customizations and settings for each individual shortcode. You will then be able to select “Insert Shortcode” and find your code directly in the post area wherever your cursor was previously.

From here, you’ll want to leave the code alone and continue working to finish out your post. You can preview how the code will appear to your readers by saving your post or page as a draft and selecting the Preview button.

Ready to get started?

We hope this quick guide has helped you get started on making your website or blog look incredible and function perfectly. Look around at some of your favorite websites and see what you like. There’s a good chance that there is some kind of shortcode that can do just that.

Lastly, let us know what you plan on adding to your site. We’d love to see it!


Leave a Reply

Your email address will not be published. Required fields are marked *