What's WP
Our everything is about WordPress - best choice of WordPress users!
What Is Shortcode & How to use Shortcode in WordPress

What Is Shortcode & How to use Shortcode in WordPress

WordPress shortcode is recognized as the most useful function to edit and publish dynamic web content so that there are more and more people tending to get the whole picture of shortcode and the idea of how to use it. However, it seems a little difficult for beginners to succeed in using shortcodes. Don’t worry, we write this guide to tell the truth of what is shortcode and how to use it in WordPress.

What Is Shortcode?

Shortcode is a special tag used to help users do anything as they want without any professional skills, such as the creation of buttons, tables, sliders, videos, and so on. Since WordPress 2.5, it is available for all WordPress users. Instead of using complicated codes to display the certain web content, people are able to make use of shortcode as a replacement. Perhaps, it is too abstract to penetrate the mystery of shortcode. Here, the given example may help you understand it clearly.

what is shortcode

Let’s say if you want to display a new post on the web page, you can use the shortcode of [recent-posts] in order to avoid editing a long string of codes. This short and easy-to-understand code refers to the content of this new post. Further, setting the number of posts should rely on the [recent-posts posts=”6″]. A completed post have to include title, which can be achieved by using [recent-posts posts=”6″]Posts Title[/recent-posts].

In the same way to showcase a series of images, you are able to replace all codes with the shortcode . Once uploading a page with this shortcode, WordPress displays the images automatically. Here, some readers may wonder how to tell WordPress which content should be replaced. That’s why we write the following part to show how to create a shortcode.

How to Create a Simple Shortcode Manually?

In fact, the task is easy if you only want to achieve something simple. This tutorial will show you the detailed steps to get the job done. But we have a suggestion that you should only create shortcodes for those frequently used functions but not the ones planned to use once only.

Step 1: Define the Function of the New Shortcode

First of all, you need to create a callback function that tells WordPress what to do when the shortcode is used. The function should be put into the functions.php file of your theme directly, or you can create a new file and include it in functions.php. The latter way is recommended when there are different shortcodes created. This requires little PHP knowledge.

To make an example, we will show you how to create a [twitter-subscribe] shortcode which encourages readers to subscribe to your blog updates. Open the functions.php file and add the code below in a new line. You can access the file by visiting Appearance > Editor and finding “Theme Functions”.

function twitter_subscribe_link() {  
    return 'Like this post? Subscribe to our updates <a href="https://twitter.com/PHPMatters">by Twitter</a>.';
}

With the line of code, we tell WordPress the following things.

function twitter_subscribe_link() {  

This defines the function. Because we want to display a subscription link for Twitter, we name it to be “twitter_subscribe_link”. The name can be whatever you want and it does not affect how the shortcode will function.

The message after “return” is what will display whenever the shortcode is called. This statement does not echo anything, but instead, it stores messages and returns them. “}” indicates the end of the code.

Step 2: Define the Shortcode and Hook into WordPress

As soon as the callback function is created, it’s time to define the shortcode itself and ties the function above with the shortcode. You can do this by adding a new line of code in the functions.php file or another file included.

add_shortcode('twitter_subscribe', 'twitter_subscribe_link');

The add_shortcode function comes with only 2 arguments which are easy to understand. The first one is the name of the shortcode which you will insert into posts and pages, and the other one is the name of the function you gave before. After you update the functions.php file, you have created a simple shortcode.

Step3: Test and Use the Shortcode

You can now put the shortcode [twitter_subscribe] shortcode anywhere you like, and then preview the post/page to see whether it functions as you expect. If there is anything wrong, go back to check the codes carefully.

Twitter Subscribe Shortcode

This is a simple example for displaying texts and links. You can also customize a shortcode to insert Adsense ads, make a subscription form, and do many more. Just doing more practices to master the function, you will benefit a lot from the flexibility.

How to Create a Shortcode by Using Shortcodes Ultimate Plugin?

Besides the manual way, you can also get the creation and use of shortcodes achieved by installing plugins. Here we would like to introduce Shortcodes Ultimate, one of the best in its kind that offers not only a shortcode creator, but also dozens of free shortcodes that can be used directly. The built-in shortcodes can meet the demands of most normal bloggers.

Create a shortcode

We will not discuss how to create a completely new shortcode in this plugin in detail, because the “Cheatsheet” of it includes detailed attributes and examples that you can customize directly. For example, if you would like to insert a Youtube video in a post, you can only customize the attributes of URL, Width, Height, Responsive, Autoplay and Class and then insert the shortcode in the post. No further job. Both simple and advanced shortcodes can be created in this way.

Youtube Shortcode

Take advantage of the examples

As is mentioned above, Shortcodes Ultimate comes with many pre-configured shortcodes that can be used directly. So if you combine the Cheatsheet and Examples features, you can easily customize some simple shortcodes to meet your own demands.

In the examples, there are basic and advanced shortcodes for buttons, animations, tabs, and many more. Taking adding a custom button in a post as an example, you need to go to Shortcodes > Examples, and click to open the “Unlimited buttons” tab.

Button Shortcode

In the pop-up screen, click on the “Get the code” button, and copy the shortcode for the button size, color, style, icon font and more.

Button Size

The last step is to combine all the attributes you selected together to get your custom shortcode which displays a special button as you want. The “Click me” text can be customized in your way, too.

The shortcode below is what we use to test the functionality. You can practice more and learn some skills by analyzing the shortcodes in the Cheatsheet with the ones in the Examples.

[su_button size=”3″ background=”#FF742F” style=”bubbles” icon=”icon: shopping-cart” url=”http://phpmatters.com”] Buy Now [/su_button]

Button

Make Use of WordPress Shortcode Plugins? Have A Try!

Indeed, some people utterly ignorant of the code are still confused about what we’ve talked in this post and wish to seek another way to achieve the same goal. Using WordPress shortcode plugins is a good choice. More than one thousand shortcode plugins are available on WordPress.org, each of which comes with powerful functions. In a word, this type of plugin is a good helper on the creation of a shortcode.

Shortcodes Ultimate

https://wordpress.org/plugins/shortcodes-ultimate/

Shortcodes Ultimate is a professional plugin that offers a pack of shortcodes to help create buttons, sliders, responsive videos, buttons, tables, etc. With this plugin, you can easily turn a free theme into a premium one, coming with full of advanced and simplified features. As well, you are available to access 15+ additional shortcodes and over 60 extra skins for plugin shortcodes, and even create your own custom shortcodes.

Shortcodes Ultimate

Column Shortcodes

http://www.codepresshq.com/

This is a WordPress shortcode plugin dedicated for inserting shortcodes to create columns in posts and pages. Without many functions and features, it is specialized for adding a column into web page with easy and simple codes. Simply, it has 10 different column widths and includes a preset stylesheet so that you can create anything as you like and overwrite the theme’s stylesheet.

Column Shortcodes

Shortcode Exec PHP

https://wordpress.org/plugins/shortcode-exec-php/

This plugin enables users to use shortcodes to execute PHP code in WordPress posts, pages, widgets, comments, and even RSS feeds. You can define and associate the shortcodes with PHP code in the settings. And also, you can delete and disable them as you need.

Shortcode Exec PHP

Shortcodes Pro

https://wordpress.org/plugins/shortcodes-pro/

This is a powerful WordPress shortcodes plugin that allows you to quickly and simply add shortcodes and TinyMCE editor buttons. It comes with rich features, allowing you to create custom shortcodes, add quick-tags, import and export existing shortcodes, sort and group buttons, and even edit the shortcodes with PHP or HTML. Besides, it is built with WordPress API and available for French and Spanish.

Shortcodes Pro

WordPress Shortcodes

http://synved.com/wordpress-shortcodes/

This is a free WordPress plugin designed for shortcodes optimization. It includes a series of functional shortcodes to add elements like SEO-ready tabs, buttons, links, author cards, layouts, lists, and others to improve the site look. Besides, with the intuitive and easy to understand shorcode editor interface, you can be very simple and relax to create message boxes, warning messages, slider shows, customized buttons, featured lists, and so on.

WordPress Shortcodes

Easy Bootstrap Shortcode

https://wordpress.org/plugins/easy-bootstrap-shortcodes/

This shortcode plugin is specialized for WordPress and fully compatible with Bootstrap 3.0.3. Thus, you can easily set the bootstrap styles in the themes and add them into posts and pages freely. Besides, you are able to take use of your own css file to instead the plugin css and utilize js file from CDN. As a result, you have great flexibility and full control over site styling.

Easy Bootstrap Shortcode

Theme Blvd Shortcodes

https://wordpress.org/plugins/theme-blvd-shortcodes/

This plugin includes many useful elements and integrates with third party items, allowing you to extend the site functionality on Pages, Posts, and custom layouts with shortcodes. Generally, it is available to define buttons, columns, components, display posts, image icons, sliders, gallery slider, tabs & toggles, lightbox, and so on.

Theme Blvd Shortcodes

WP Canvas – Shortcodes

http://webplantmedia.com/starter-themes/wordpresscanvas

WP Canvas includes a set of shortcodes to improve site functionality, including borders, buttons, full width, notifications, social icons, pricing, countdown, tabs, toggle, columns, sections, and so on.

WP Canvas – Shortcodes

Arconix Shortcodes

http://arconixpc.com/plugins/arconix-shortcodes

This plugin offers a lot of functional design elements to enhance site looking, with the shortcodes for accordions, boxes, tabs, toggles, unordered lists, and more.

Arconix Shortcodes

ShortCodes UI

https://wordpress.org/plugins/shortcodes-ui/

ShortCodes UI is one of the most popular plugins coming with mega pack of shortcodes, which is free of charge. No matter for buttons, tabs, sliders, or videos, there is nothing difficult to create any one of them with the help of this rich-featured plugin. It features a Shortcode Generator, at least 50 incredible shortcodes, Power of CSS3, Rich API, etc.

ShortCodes UI

Author

Lucy has been a very experienced SEOer, technical writer, web developer, c# developer since 2002. Now she owns a startup in San Francisco, CA, focusing on running a couple of blogs to share knowledge and experience with global readers and deliver exceptional results to global sponsors by leveraging the power of Internet.

Close

Want to Learn More About WordPress?

Get Our Free Themes, Plugins, Support, SEO Tips, and Other Tutorials!

Email *