A shortcode is a condensed version of a function that can be placed on your website in order to execute that function without completely writing it out. This saves the time it would take to write the code repeatedly and is also used to bypass code writing in the first place.
In this article we’ll discuss:
The history of shortcodes
Types of Shortcodes
How to create shortcodes using plugins
How to create custom shortcodes
Adding shortcodes to your posts and widgets
Adding Shortcodes using the classic editor
What you need to understand about Shortcodes.
WordPress tries its best to stop malicious code from being run on its websites. So for shortcodes, you have to register them in the WordPress codex before they can be executed.
Since WordPress version 2.5, WordPress introduced this ability with the rollout of its Shortcodes API. This allows the ability to register shortcodes in WordPress’s database so they can be added to your website.
With the advent of shortcodes, WordPress also created native elements that have been used since then to add embeds to posts, pages, and widgets. The majority of shortcodes you may use, are typically used by plugins like forms and banners that employ this feature.
We are going to explore all these functions and sources of shortcodes, but before we do that, you have to understand the different types of shortcodes.
1. Types of shortcodes
Ultimately, there are two types of shortcodes that you will be creating; Enclosing and Self-Closing. The simple difference is that with “Enclosing shortcodes” you are able to manipulate the content within the shortcodes.For example: [shortcode] Manipulated content[/shortcode]
A “Self closing shortcode” simply does not have closing tags and is written like this:
[shortcode]
The main takeaway to understand is that the enclosing shortcodes have similar attributes such as styling etc, but the content of the shortcode can be manipulated. Self-closing shortcodes, on the other hand, have both constant attributes and constant content.
2. Create shortcodes using plugins.
So, there are tonnes of shortcodes you can create, but chances are if you want a custom shortcode it has already been created and embedded in a plugin. I am going to list a few but before I do please note that sometimes these plugins don’t work because of other third-party plugins.
Some of the best WordPress shortcodes plugins are:
1. Shortcodes Ultimate
Key Features:
When you download this plugin you get over 50 different shortcodes plus 15 if you should buy the premium version. You also have multiple language support, custom CSS, and the ability to view your code with live preview.
Shortcodes Ultimate also affords its users the ability to create custom shortcodes if you need to and gives other abilities that are available with its add-ons.
2. Widget Shortcode
Key features:
Widget Shortcode allows you to create widgets and embed them anywhere on your website. This lightweight plugin serves to enable the user to add to their theme’s settings and it works well for themes that have limited widget functionality.
This plugin supports over 5 languages and is enjoyed by 90,000 + users.
3. Shortcoder
Key features:
Shortcoder enable its users to create custom HTML and Javascript code to put anywhere on their websites.
You can build a library of reusable code with this plugin and enable or disable shortcodes at will. This plugin also offers the ability for different editing methods including text, code, and visual editing.
Premium Shortcode plugins
1. Vision
Key Features:
Vision is a beautiful plugin with over 100 shortcodes. This plugin comes with a seamless design and integration with the latest WordPress technology so users can find it easy to use and up to standards.
2. Intense
Key Features:
This plugin is definitely a powerhouse as the name implies. Along with shortcodes, this plugin also functions as a page builder. Intense doesn’t conflict with other page builders as it focuses on seamless integrations along with its incredible speed.
Intense comes with 105 shortcode features, and full mobile responsiveness at the low price of $30 and FREE updates onward.
Crucial Points to note about plugins
Using the plugin method is a sure-fire way of getting legitimate plugin codes that have already been out there. So this method works for beginners and advanced users alike, but if you want to learn how to create your own custom shortcode we will get into that below after we take a look at the benefits and drawbacks of using the plugin method.
Benefits:
1. Save hours without having to create your own php shortcodes from scratch.
2. Keep the settings of your shortcodes if you change the theme
Drawbacks:
1. Some plugins may interfere with each other
2. Adding extra plugins require extra resources to your server
3. How to create your own custom shortcode.
Ok so all custom shortcodes are added to your functions.php file.
So, Step 1. Navigate to your functions.php file and add the following code.
<?php
function custom_shortcode($atts = [], $content = null)
{
// do something to $content
// returns the content value
return $content;
}
add_shortcode('shortcode', 'custom_shortcode');Step 2. Save the file
Step 3. Now you can add [shortcode] anywhere on your website.
This is just a sample of the structure of shortcodes, let’s analyze it.
- <?php is the opening of the document
- “custom_shortcode” is the name of the function
- $att = []
- $content = null
- return $content; will return the value of the content
- add_shortcode registers the shortcode in the database
- ‘shortcode’ is the name that you will use to place the shortcode on your website
- and again ‘custom_shortcode’ will be the function called.
This, as I said is a very basic example and, it gets more complicated when you add more things such as attributes. But, if you want to generate the codes automatically then use generatewp.com.
How to use Generatewp.com
We are going to create a
4. Adding shortcodes to posts and widgets using Gutenberg.
Gutenberg, of course has a block for shortcodes. After you have created your shortcode, follow the steps below to add them to your pages and posts.
Step 1. Select the “add block” icon
Step 2. Search and select the shortcodes block
Step 3. Select the block and input your shortcode. That’s it!
Widgets
All you have to do is to head over to Appearance—>Widget—>Text and add your shortcode in the text block and then save.
5. Adding shortcodes using the classic editor.
If you’re still using the classic editor you still can use shortcodes. As a matter of fact, you just write the shortcode as it is and that’s it. Similarly to how some page builders work.
Now if you want to show a display of a shortcode example, then you use double brackets instead of the regular single brackets for shortcodes. The double brackets stop the code from executing and just show the text.
Conclusion
Shortcodes were made to simplify the development process of a website and they did. However, it seems that the new Gutenberg editor is converting most shortcodes into blocks and that may be a challenge for plugin creators. This is a good thing for beginners who do not have the knowledge of creating their own custom code. Also, this is a plus for website owners who do not have the time to spend writing code from scratch. Whether or not the Gutenberg editor replaces all shortcodes you should be equipt with the plugins and coding resources to get your own shortcut added to your site.
