Facebook Twitter Instagram
    Facebook Twitter YouTube
    AlienWP
    • Home
    • About
    • Contact
    • Sections
      • Collections
      • Guides
      • HowTo
      • WordPress Themes
      • WordPress Plugins
      • Hosting
      • News
    AlienWP
    Home»Guides»Complete Guide: How to Add Shortcodes in WordPress
    Guides

    Complete Guide: How to Add Shortcodes in WordPress

    KaveriBy KaveriNovember 7, 2017
    Facebook Twitter Pinterest LinkedIn Tumblr Email
    How to Add Shortcodes in WordPress
    Share
    Facebook Twitter LinkedIn Pinterest Email

    If you running a WordPress site, you may have come across situations where you want to add some sort of specialized content to your post/page but weren’t sure how? Or may be a widget or content from some other site or API. If you are a beginner, doing such stuff might have you scratching your head or spend a huge deal of time on Google searching for the right answer.

    To save you from all these troubles, WordPress provides something that makes this kind of task very easy – Shortcodes.


    WPEngine Promo Discount Code 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 Plugin Guide

    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.

    Shortcode Plugin, Ultimate Plugin

     

    After installation is completed, click on the Activate

    Shortcode Plugin, Ultimate Plugin

     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.

     Shortcode Plugin, Ultimate Plugin

    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.

    Shortcode Plugin, Ultimate Plugin 

    Tabs & tab anchors

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

    Shortcode Plugin, Ultimate Plugin 

    Column Layout

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

    Shortcode Plugin, Ultimate Plugin 

    Media Elements

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

    Shortcode Plugin, Ultimate Plugin 

    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.

    Shortcode Plugin, Ultimate Plugin

    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.

    Shortcode Plugin, Ultimate Plugin

    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

    Shortcode Plugin, Ultimate Plugin

    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.

    Shortcode Plugin, Ultimate Plugin

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

    This is how the button will look like

    Shortcode Plugin, Ultimate Plugin

    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.

    Shortcode Plugin, Ultimate Plugin

    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

     Shortcode Plugin, Ultimate Plugin 

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

    Shortcode Plugin, Ultimate Plugin

    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.

     

    Shortcode Plugin, Ultimate Plugin 

    The shortcode will now be shown in your post editor.

    Shortcode Plugin, Ultimate Plugin

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

     

    Shortcode Plugin, Ultimate Plugin

    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.

    Shortcode Plugin, Ultimate Plugin

     

    Share. Facebook Twitter Pinterest LinkedIn Tumblr Email
    Kaveri
    • Website
    • Twitter

    Kaveri is a full-time freelance writer who loves writing about WordPress and Digital Marketing.

    Related Posts

    How to Import / Export Your WordPress Gutenberg Blocks

    February 9, 2020

    Beginner’s Guide to The WordPress Gutenberg Editor: Complete Review

    February 5, 2019

    Best Hypnosis Downloads: Improve Your Productivity, Health & Finances

    January 16, 2019

    How To Translate A WordPress Plugin In Your Language

    August 7, 2018

    1 Comment

    1. aricthomas on July 11, 2019 9:40 am

      Very well written post that will certainly help people about how Add Shortcodes in WordPress. Also if you are searching for the best tutorial of WordPress. So you can visit at https://www.wpvideotutorial.com/

      Reply

    Leave A Reply Cancel Reply

    Latest
    Video

    Best Summer LUTs (Free & Paid) Hottest Color Grading for a Sizzling Summer

    By Oliver DaleMarch 27, 2023

    Summer is the perfect time for capturing and sharing memories with family and friends. Whether…

    Best Vintage LUTs (Free & Paid) Give Your Videos a Retro Vibe

    March 21, 2023

    Best Cinematic LUTs (Free & Paid) for Show-Stopping Visuals

    March 16, 2023

    1000+ Best Lightroom Presets: Ultimate Collection!

    March 16, 2023
    About

    Welcome to AlienWP!
    A blog about WordPress, Design, Technology & Productivity.

    Coupon Codes
    • WPEngine Coupon Code
    • Elegant Themes Coupon Code
    • Media Temple Coupon Code
    • Template Monster Coupon Code
    • Tesla Themes Coupon Code
    • Bluehost Coupon Code
    • CSSIgniter Coupon Code
    • Dreamhost Coupon Code
    • Engine Themes Coupon Code
    • Flywheel Coupon Code
    • InkyDeals Coupon Code
    • Inmotion Hosting Coupon Code
    • Liquidweb Coupon Code
    Social
    • Facebook
    • Twitter
    • YouTube
    About

    AlienWP themes and plugins rely on core WordPress functionality to achieve speed, seamless integration and simplicity of use.

    You won't find bloated options and admin panels here: Only the award-winning, intuitive interface we all know and love.

    • About Us
    • Terms & Conditions
    • Privacy Policy
    • Contact Us
    • Best WordPress Hosting
    • Hosting Reviews
    Recent Posts
    • Best Summer LUTs (Free & Paid) Hottest Color Grading for a Sizzling Summer
    • Best Vintage LUTs (Free & Paid) Give Your Videos a Retro Vibe
    • Best Cinematic LUTs (Free & Paid) for Show-Stopping Visuals
    • 1000+ Best Lightroom Presets: Ultimate Collection!
    • 250 Free Lightroom Presets: Ultimate Categorized Collection for Photographers
    • Monarch Social Sharing Plugin Review: Get More Shares & Follows
    • 10 Best WordPress Membership Plugins 2020: In-Depth Guide to Free & Paid Options
    Coupons
    • WPEngine Coupon Code
    • Elegant Themes Coupon Code
    • Media Temple Coupon Code
    • Template Monster Coupon Code
    • Tesla Themes Coupon Code
    • Bluehost Coupon Code
    • CSSIgniter Coupon Code
    • Dreamhost Coupon Code
    • Engine Themes Coupon Code
    • Flywheel Coupon Code
    • InkyDeals Coupon Code
    • Inmotion Hosting Coupon Code
    • Liquidweb Coupon Code
    Facebook Twitter YouTube

    Copyright © 2013 - Kooc Media Ltd. All rights reserved. Registered Company No.05695741
    Our Sites: FlowPresets / GardenBeast / GolfMonster / Blockonomi / Money Check / Vinjatek / BoatingBeast / Beanstalk

    Type above and press Enter to search. Press Esc to cancel.