What is a shortcode?
We’ve explained everything you need to know about shortcodes
A shortcode is a short + a code. To define how a shortcode should be used, you write the shortcode within brackets [like this].
Brief Summary
A shortcode is a small piece of text enclosed in brackets that you can use in pages or posts. It gives you a quick way to add elements, like video or audio, to your content that would otherwise require more time to code.
Shortcodes enable certain features to function on your website. For example, some plugins require a shortcode to function correctly; otherwise, visitors will not be able to see the plugin’s functions you’ve installed. Another example of when to use a shortcode is when you format the content and structure of your website. Thus, if you want to add contact forms or a pricing table, to mention a few, a shortcode can quickly help you with that.
WordPress shortcode example
You might wonder how a shortcode works in WordPress and what functions it really has.
Let’s say that you want to create different tabs on your website. For example, you want to have three different tabs, one tab can be about you, one tab can be about how to get in contact with you, and the last tab can be about a product/service you’re offering. In order for the tabs to work correctly, you need to write and add a shortcode in WordPress.
Something like this:
[tabs] – this will open up all your tabs.
[tab title = “About me”] – this is where we write the name of the first tab and where we create the first tab.
Tab content 1. – This is where all your content will go, inside the first tab.
[/tab] – this closes the first tab.
[tab title= “Contact me”] – this is where we write the name of the second tab and where we create the second tab.
Tab content 2. – This is where all your content will go, inside the second tab.
[/tab] – this closes the second tab.
[tab title= “Flowers by me”] – this is where we write the name of the third tab.
Tab content 3. – this is where we write the name of the third tab and where we create the third tab.
[/tab] – this closes the third tab.
[/tabs] – this closes all of your tabs.
Whenever you install and activate a plugin, you don’t have to deal with HTML and PHP. The author who invented the plugin has done all of that already. You only need to use shortcodes like the one above to create an environment for the plugin to function correctly. This is the meaning of shortcodes; creating the environment for the plugins etc.
You can also, as mentioned above, use shortcodes to embed a video on your WordPress website. The shortcode you would write would be like this:
[youtube=http://www.youtube.com/watch?v=76IPdrSExzs]
Writing this shortcode would display this video:
Where to add shortcode in WordPress?
Now that we know more about what a WordPress shortcode does and how shortcode examples look like, let’s get into how to add a shortcode in WordPress and inside your posts.
You can take any plugin on your WordPress dashboard; some plugins generate the shortcode for you, which you can just copy and then paste on one of your pages. Doing it this way is effortless and straightforward because you don’t have to write any codes. Instead, you just copy the WordPress shortcode generated by the plugin and paste it in the ‘code version’ on your WordPress post, and voilà, the plugin will do its work.
If you want to, for example, display the plugin on your sidebar (widget), and the plugin doesn’t generate a shortcode for that purpose, you can still make it work.
Go to your Editor in your dashboard, and make sure that you’ve made a copy of your files by using a child theme so that you don’t lose your data and break your website. Next, go all the way down to your PHP file and add the shortcode line that adds a filter. It can be a WordPress shortcode like add_filter(‘widget_text’, ‘do_shortcode’);
Once done, update the file, and you’ll see that the plugin/widget works and is displayed on your sidebar.
Whenever you want to display a plugin, for example, a photo gallery, the snippet of code above will allow your theme to register the plugin in that exact place you want.
