Complete Guide: How to Add Shortcodes in WordPress

Exclusive WPEngine Coupon Code for AlienWP Visitors!
Get 5 Months Free & 30% Off All Plans.
Click the coupon code to copy and open the link »

---

Click Here for Deal

---

A Shortcode is 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 lines of codes. In simple terms, Shortcode is a shortcut to a function.

In other words, Shortcode is a condensed form of a larger and often complex piece of code. It allows you to insert a script into the content section of your page, which will later be executed by WordPress.

Shortcodes were introduced in WordPress 2.5 and since then it has contributed a lot in performing the complex task in a much easier way. Use of shortcodes saves time and allows us to do things in a simpler way that would otherwise require a large amount of technical knowledge and coding.

Benefits of Shortcodes

• Improve Efficiency and saves time – Shortcode prevents redundancy. It helps users to implement any particular functionality by writing the code once and re-using the shortcode whenever that functionality is needed.
• Selective Custom Markup – Depending on your theme, your WordPress site will have a specific layout and a design. But what if you want some of your posts, pages or sections within your page look different from the general style template, Shortcodes makes this task an easy feat to achieve.
• Access to Unreachable Content Areas – Certain tasks such as inserting a text widget to your header, or adding a custom content to your sidebar is not easy. But with shortcodes, such task can be performed with much ease and flexibility.
• Help Create better and unique layouts – All WordPress sites are built on a standard layout comprising of a header, footer, sidebar and the main content section. Shortcodes allows us to deviate from the standard layout and create a different layout for your site, comprising of your own elements or components.

How to use Shortcodes in WordPress

To use a shortcode, simply insert it into the WordPress page or post.

A Shortcode look something like this – [Shortcode-name],

Assuming such a Shortcode is already defined, when used in a website displays a listing of the author’s most recent posts anywhere within the site.

Here is another example of a shortcode syntax, using a hypothetical shortcode object, “shortcode_ex”.

[shortcode_ex] This is where your content appear[/shortcode_ex]

WordPress comes with the following shortcodes by default:

Video Shortcodes

• [dailymotion] embeds a DailyMotion video.
• [hulu] embeds a Hulu video.
• [ted] embeds a TED Talks video.
• [vimeo] embeds a Vimeo video
• [youtube] embeds a YouTube video.

Audio

• [audio] displays uploaded audio file as an audio player
• [spotify] embeds music from Spotify.

Images and Documents

• inserts an image gallery into a post or page.
• [instagram] embeds an image from Instagram.
• [slideshare] embeds a slideshow from Slideshare.net.
• [slideshow] embeds a slideshow of uploaded photos.
• [googleapps] embeds a document from Google Docs.

Miscellaneous

Useful shortcodes for adding a blog archive index, contact form, polls, and more.

• [blog_subscription_form] embeds a subscription form allowing people to sign up for email update

In today’s post we will discuss how to easily add shortcodes to your WordPress site using the Shortcodes Ultimate Plugin. So let’s begin.

 Shortcodes Ultimate Plugin

Shortcode plugins enables us to create shortcodes with ease and flexibility, without coding. It contains a set of pre-defined shortcodes that you can copy and paste in your page/post. There are lots of shortcodes plugins available in the market. In this article, we are going to focus on the Shortcodes Ultimate plugin by Vladimir Anokhin.

Shortcodes Ultimate is a popular WordPress plugin that can be used for creating tabs, buttons, boxes, responsive videos and much more. It comes with 50+ amazing shortcodes, along with a shortcode generator for creating custom shortcodes.

To use the plugin simply install it and click on “Shortcodes” button on your page/post. It can be integrated with premium add-ons to further enhance its functionality.

This plugin is highly popular in the WordPress community, which is evident from the fact that it has more than 700,000+ active installations and almost 4000 5-star ratings.

Key Features of Shortcodes Ultimate Plugin

• 50+ professional looking Shortcodes
• Fully responsive
• Highlight text, display box, images, Google Maps, etc.
• Custom CSS editor
• 1-click shortcode insertion with live preview
• RTL Support and works well with multilingual sources
• Powerful API

Installing Shortcodes Ultimate

 Installing the plugin is easy and involves a few steps described below.

• Login to your WordPress Admin Dashboard.
• Click on the Plugins option in the left sidebar menu
• Click on the Add New button from the Plugins
• A new window will appear, type “Shortcodes Ultimate” in the search menu in the upper left corner of the window and press Enter.
• A list of plugins will appear. From here, select the plugin and click on the Install Now button.

After installation is completed, click on the Activate

 After activation, you will be redirected to your Plugins page and there you can find the Shortcodes Ultimate plugin along with the others. That’s it, you are now ready to use the plugin and create shortcodes on your WordPress site

Exploring Shortcodes Ultimate

Upon installation of Shortcodes Ultimate, a Shortcodes menu will appear on your dashboard. Click on Shortcodes Menu and then on Example Menu. This will bring up the Examples page. This page has a pre-compiled list of the most commonly used Shortcodes that you can use.

Accordions, Spoilers, Styles and anchors – This allows us to add things like accordions and anchors. Accordions are used if you want to hide some content behind a “+”sign, which expands to reveal your content, on clicking. There are also several different styles available and icons that you can add to the front.

Tabs & tab anchors

 This allows to add different tabs to your pages with several style options.

Column Layout

This shortcode can be used to break up our page content into several columns.

Media Elements

Add media files like YouTube, Vimeo video files onto your post/page using this shortcode.

Animations

This shortcode allows us to add animations such as text flying from different directions, different colors, animated columns, buttons and much more. Animations enhance your content and is useful for highlighting any particular content to your users.

Apart from the basic shortcodes, there are also several other advanced shortcodes available.

Creating Shortcodes using Shortcodes Ultimate Plugin

Upon installing we can find that this plugin comes with 50+ Shortcodes, categorized on styling, content writing, content division.

To add a shortcode to your page, go to your admin dashboard and then click on Pages and then select the page, where you want to add your shortcode.

In the post editor screen, you should now notice that a new button has been added to the editor menu, entitled Insert Shortcode.

Click on this button and you will be presented with the following page. Here you can choose the appropriate shortcode depending on your requirement. The shortcodes can also be filtered based on Content, Box, Media, Gallery, Data and

After making your choice, you can either customize that element to change how it looks or simply insert it the way it is.

Now click on the Insert Shortcode button to insert it to your page/post.

And that’s it, your shortcode is now inserted into your page/post.

This is how the button will look like

Shortcode to divide our page content into multiple columns

Go to your dashboard and then pages. Create a new page or select an existing one and click on Insert Shortcode as above.

In the example we are going to divide the contents using columns. Columns, however reside within rows. So we will start by adding a Rows shortcode by clicking on the “Row” option.

This will display the “Add Row” dialog. Since we want to create a 3 column layout, we won’t make any changes and click on the Install Shortcode

The row shortcode should be now inserted in your post. Insert your contents in-between the [su_row] and [/su_row].

Now you can insert the Column shortcodes inside of the row shortcodes to create your multi-column layout.

Place your cursor at the begging of your row shortcode and Again click on the Insert Shortcode button and select Column from the shortcode options.

Adjust your settings for your Column shortcode options menu and click on Insert Shortcode button once you are done.

The shortcode will now be shown in your post editor.

You can add more columns by repeating the above steps or by simply copy-pasting the existing shortcodes.

Finally fill in the spaces in-between the shortcodes with your contents. Once you are done, click on the Update/Publish button to finish the process.

The output will appear something like this depending on the number of columns added and the size of each column.