Last updated - February 24, 2020
Shortcodes are short snippets of code that will help you incorporate certain features on your WordPress posts, pages and widgets. The advantage of shortcodes is that you will be able to manage customization of your site without having advanced coding knowledge. Shortcodes will actually help you publish dynamic content including images, content, and functions on your WordPress posts and pages without creating long stretches of code. In this article, we will provide you some basic insights on how to use WordPress and WooCommerce shortcodes.
What are the important uses of shortcodes on a WordPress site?
Shortcodes will help you with integrating a range of dynamic content or visual elements easily. Some of the examples where a shortcode can help you with your WordPress site are:
- Adding Call to Action buttons on your WordPress pages or posts.
- Displaying contact forms on the site.
- Inserting an advertisement.
- Adding images and other visual elements.
As far as WooCommerce is concerned, some of the essential pages are functional due to these shortcodes. For example, Cart, Checkout, My Account pages have their dynamic properties thanks to specific shortcodes. When you create the essential pages for WooCommerce using the set up wizard, you might have noticed the shortcodes inside them. In addition, you can use a range of shortcodes to help you display specific content such as featured products or products on sale according to requirements.
Read this detailed guide on WooCommerce shortcodes for more information.
How to use shortcodes in WordPress?
You can simply copy a shortcode and paste it to the page or post editor and publish it. Now the specific functionality of that shortcode will be executed.
For example, if you are using a shortcode [featured_products] on a page on your WooCommerce store, all the products that are marked featured will be displayed on that page.
Let’s see how:
Classic Editor
If you are using the WordPress Classic Editor, you can simply paste the shortcode in the post or page editor and click the Publish button.
Once you publish the page, all your featured products will be displayed on this page.
Gutenberg
If you are using the Gutenberg editor, this is how you can manage to use a shortcode:
- Click the +icon to choose a block.
- Scroll down to Widgets and open the menu drawer
- Select Shortcode
Enter the shortcode.
Publish the page.
Now, you can see all your Featured Products will be listed on this page.
How to add a shortcode on a widget?
Now, sometimes you want to add a shortcode through the widget area. For example, let’s see how you can add featured products to the sidebar of your WordPress site.
Go to Appearance > Widgets.
Scroll down to Text widget and select sidebar and click Add Widget button.
Now you will see the widget with a text area similar to the post editor. Add your shortcode here.
Now, Featured products will be displayed on the sidebar of your site as well.
You can use shortcodes on your WordPress and WooCommerce sites as described above. Simply procure the relevant shortcode and add it to integrate dynamic content like this.
Default WordPress shortcodes
There are a few default shortcodes that WordPress offers. They are:
A lot of plugins that allow publishing dynamic content on your site make use of shortcodes. You can use the available shortcodes to get the specific outcome that you are looking for.
Creating WordPress shortcodes
If you are looking to create shortcodes on your own, please read the WordPress Codex on Shortcode API before starting.
Best practices while using WordPress and WooCommerce Shortcodes
As you know, WordPress and WooCommerce shortcodes are arguably one of the easiest ways to integrate dynamic content on your site. However, while using shortcodes, you may have to follow certain best practices. Here is a quick look at some of them.
Do not depend too much on shortcodes
Shortcodes are definitely easy to use for WordPress beginners. However, experts advise not to use it more than necessary. If you are using shortcodes specific to a theme for incorporating visual elements, remember to not add that in all your posts. Because, if you are changing the theme, those theme-specific shortcodes will turn useless once you uninstall the theme. In such a scenario, you may have to manually remove the shortcodes from all the posts.
Hide broken shortcodes
In case you have used a theme-specific shortcode in a lot of posts and you happen to change the theme, the shortcode text will be displayed. This may appear quite odd on your site’s frontend. You can avoid this problem in two ways. You can remove the shortcode manually from all posts where you have added it. Or, you can use the following code on your theme’s functions.php file.
add_shortcode( 'yourshortcode', '__return_false' );
When you are using this code, there won’t be any output from the shortcode. But, the shortcode text won’t be displayed as text in the frontend.
Name shortcodes carefully
If you are creating your own shortocodes, name them carefully. This is to avoid any conflicts with shortcodes of other plugins that have the same name. Also clearly document them for future reference.
Read the documentation carefully
If you are using shortcodes available with a theme or plugin, read the documentation carefully before using them. You should have a clear understanding of the capability of a shortcode before adding them in your posts or pages.
WordPress Shortcode plugins
Here are a few WordPress plugins that will help you to use shortcodes better.
Shortcodes Ultimate
This plugin will help you create a lot of visual elements using WordPress shortcodes. You can use these shortcodes in posts, pages, text widgets as well as template files. The visual elements that you can create using this plugin include boxes, buttons, tabs, sliders, carousels, etc. The plugin has a responsive design and works with almost all popular WordPress themes.
It is quite easy to use as you can insert the shortcode and get a live preview to understand how it will look. The plugin works seamlessly with Gutenberg editor as well. Moreover, the plugin offers several customization options as it is quite developer friendly and offers custom CSS options. It is translation ready and offers RTL support as well. The extensive documentation will help even WordPress beginners to set it up and use more than 50 shortcodes available with it.
You can also checkout the premium version for additional shortcode options.
WP Shortcode by My Theme Shop
If you have trouble using theme-specific shortcodes for visual elements, this plugin will be a good way out. It helps you set up more than 24 different visual elements on your WordPress site independent of any theme. These elements include buttons, boxes, toggles, tables, layouts, etc. All the shortcodes are minimally styled, and hence are quite compatible with most sites. Moreover, they are easily customizable, if it does not work for you out of the box.
Use this plugin to customize your site’s frontend and not worry about losing the changes when you change the theme.
amr shortcode any widget
With the help of this plugin, you can add one or more widgets and entire widget areas into a page using a shortcode. It works well on both the classic editor as well as the Gutenberg editor. The plugin will style the widget in a manner that will be in line to your theme’s style. If you are not happy with it, you can always make adjustments to the design as the plugin is quite customizable.
Even if you change your site’s theme, this plugin will restore the settings and display the widgets according to the new theme.
Shortcoder
This is a plugin that will help you store code snippets like HTML, Javascript, etc in shortcodes. You can use these shortcodes to execute the code on pages and posts. It is quite easy to use this code. Simply create a name for the shortcode and paste the code snippet and save it. Now a shortcode is created, which you can place on a page or post to execute the code snippet. The plugin also offers an option to disable the shortcodes globally when you don’t want to use them.
You can also watch the below video tutorial.
