To do cool stuff on WordPress with little effort, shortcodes are a great idea. The great thing about these elements is that they allow you to do just about anything. To create complex layouts or to integrate interactive elements into your content, these shortcodes are perfect. If you're a novice, you'll have some trouble using them with your WordPress. Here are some tips and tricks to help you master shortcodes.
Short overview of WordPress shortcodes
Also called shortcodes, shortcodes are elements that use tags between square brackets, which are used to define their use. Each shortcode you use will allow you to achieve different purposes such as creating a contact form, integrating a slideshow or adding a price comparison table for a woocommerce site for example.
Where do shortcodes come from?
Shortcodes first appeared in 1998 when they were used on a forum called UBB (Ultimate Bulletin Board). Note that at that time there was something called BBCode (Bulletin Board Code)a set of tags that could be used by forum visitors. While BBCode is simpler and lighter than HTML coding, the principle of operation is the same. The difference with Bulletin Board Code is that the use of its tags is more secure than HTML because users do not have the ability to enter HTML code.
In other words, security vulnerabilities are avoided. Some time after the first use, other Content Management Systems, including the vBulletin and PHPBB forums, used this feature. Finally, it is important to note that WordPress refuses to execute PHP code inside the site content for security reasons. To overcome this constraint, since version 2.5 of WordPress released in 2008, shortcodes are integrated to this CMS.
What are the short codes on WordPress?
On WordPress, shortcodes are used to set up multiple contents on your site and customize your layout, without having any coding knowledge and without the need to edit an HTML script. If you use this CMS, you will have at your disposal two types of shortcodes to exploit. These are the self-closing shortcodes that do not need a closing tag like the "Caption" code and the closing shortcodes that require the use of a closing tag.
What are the default WordPress shortcodes?
On WordPress, there are several default shortcodes that you can use. These include: audio, caption, embed, gallery, playlist and video. The "audio" shortcode allows you to embed audio files on your website. It includes common playback commands such as Play and Pause. As for the "caption" shortcode, it wraps your content with captions. It is usually used to add image captions. However, you can use it for any HTML element.
You can use the "embed" shortcode that expands the oEmbed functionality by default. With this shortcode, you have the ability to set various attributes to the elements you embed on your site. To add an image gallery to your site, you can use the "gallery" shortcode. It allows you to access the attributes to define the images used and customize the appearance of the gallery.
With the default shortcode "playlist", you will display a collection of audio or video files. With its style attribute, you can give it a "dark" mode. Finally, the "video" shortcode allows you to embed a video file and play it with a simple video player. Here, several formats are supported. These include: mp4, WebM, m4v, ogv, wmv and flv.
Are shortcodes still useful?
We have to admit, shortcodes are unfortunately less and less useful. What WordPress is actually planning is to do without shortcodes in the future. However, the CMS also wants to avoid that this solution becomes usable. Indeed, after the improvements, we will still be able to use these shortcodes in a content, because WordPress is a CMS that is backwards compatible with its old versions.
For adding content and enhancements to your site, you can turn to custom block creation based on the editors available, namely: Gutenberg, Elementor or Divi. Unfortunately, for a plugin creator, this can require a lot of extra work. That's why shortcodes are still an interesting approach. For example, if you want to create a particular layout for a project you're working on, shortcodes are a great idea. They will help you save time and achieve your goals without much difficulty.
What are the advantages and disadvantages of WordPress shortcodes?
WordPress shortcodes are solutions that offer advantages, but also have some disadvantages. Discover them without further delay.
The benefits
The main advantage of shortcodes is that they allow you to add many features to your WordPress site with one line of code. If you are a beginner, you will have no difficulty using them. Here, you don't have to write complex scripts for each insertion.
In addition, it is important to mention that when you don't have a strong programming background, you will have a hard time adding HTML code to your site. With shortcodes, you can adjust the settings of your site without difficulty. Depending on your preferences, you can keep all your shortcodes in the same extension. This way, you can keep them when you make a change of themes.
Finally, if you are a web developer, you probably manage several projects. Also, you need to satisfy several clients in the shortest possible time. By having the ready-made shortcodes, you will save time.
The disadvantages
If you are a beginner, short codes will not be easy to learn. They are therefore more suitable for web developers. On the other hand, if you embed a shortcode in a theme, the added features will not work anymore if you change the template. Note that when a shortcode is integrated, it can break your HTML because of some conflicting tags.
How to use WordPress short codes
Using shortcodes in WordPress is quite simple. However, it will depend on where you want to add them on your platform. In any case, it will be necessary to read up on these shortcodes and the attributes supported in order to properly configure your website.
WordPress shortcodes in pages and posts
To get started, go to the page or article editor where you want to insert your shortcode. If you are using Gutenberg, you can add the shortcode tag in the "Shortcode" or "Shortcode" standalone block. To find it, just go to the "Widgets" section. On the other hand, if you use the classic editor, you have to use the classic method. Some shortcodes even have a button in the editor screen to make it easier for you.
WordPress shortcodes in sidebar widgets
You also have the possibility to insert shortcodes in the widgets that are located in the sidebar. To add them, go to the "Appearance" tab and click on "Widgets". Then add a Text widget in the section where you want to put a shortcode. Paste the shortcode into the Text Widget section and save it. If you wish, you can visit the public interface of your site to see the result of your shortcode in the sidebar.
Note that with WordPress 4.8 and below, shortcodes are not supported in widgets that are located in the sidebar. To learn more about this feature, be sure to check for new updates and improvements.
WordPress shortcodes in the header and footer
Note that WordPress shortcodes are designed specifically for pages, posts and widgets. However, you can add them anywhere on your website. For example, if you want to add a CTA (Call to action) button in your footer or in all of your actions before the comments section, you should use the "do_shortcode()" callback function.
In order to get the configuration you want, you need to add a specific code to the header.php or footer.php of your theme or to one of its template files. Once you do this, the shortcode is displayed exactly where you inserted it. It is important to add square brackets between the quotes to echo the shortcode. Without this configuration, your insertion will not work. Alternatively, you can use the do_shortcode() callback function to enable shortcodes anywhere in your WordPress CMS.
What should I know about the shortcode API?
The WordPress Shortcodes API defines how you can use shortcodes to customize and extend the functionality of your platform. It allows web development specialists to create unique content with slideshows, forms, and call to actions that users can associate with their site just by pasting the appropriate shortcode.
Note that with shortcodes, you will be entitled to almost any functionality you can imagine on your website. The API supports bothauto-close and close shortcodes. It handles all the tricky parsing and includes help functions for setting and retrieving default attributes. Using the API, you can go straight to developing and customizing short codes. The advantage here is that you won't waste your precious time defining regular expressions for the shortcodes you create.
What are the basics of the shortcode API?
When you open a WordPress post or page, the API looks for saved shortcodes while processing the site content. If it finds a saved shortcode, the Shortcode API takes over and returns the display of the shortcode or shortcodes. The returned string replaces the shortcode tag where it was put. When you register a shortcode in WordPress with the add_shortcode() function, here's how to proceed:
add_shortcode('shortcode_name', 'shortcode_handler_function');
For "short_name", the WordPress tag will be searched during the content analysis of the posts. The shortcode API recommends that you use only lowercase letters, numbers and underscores to define its value. Here, you should avoid using dashes.
En ce qui concerne le shortcode_handler_function, la fonction de callback est exécutée après que WordPress a confirmé la présence d’un code court enregistré. Notez que la fonction handler shortcode se définit comme suit : function shortcode_handler_function (, , ){ }. Chaque élément a une signification précise. Si vous ne définissez aucun attribut, vous n’aurez qu’une chaîne vide par défaut. Ensuite, on a la valeur pour le contenu de fermeture lorsque vous définissez un code court de fermeture. La responsabilité de la fonction handler sera de s’assurer que la valeur de, est retournée à la sortie.
Finally, we have . If several shortcodes have the same valid callback function, this value will allow you to determine which shortcode triggered the handler function.
To summarize, the API parses the shortcode tag, its attributes and its content bypassing the values to the handler function, which processes them and returns an output string. This is a rather special process that is not accessible to beginners.
Where to put your custom shortcode scripts?
Depending on your preferences, you can add your custom shortcode scripts in an extension or include them in the functions.php file of the theme you are using. If you choose the second solution, you can execute the add_shortcode() function without changing anything. However, if you choose to use an extension, you must initialize your custom scripts after WordPress is fully loaded. To ensure this, send the add_shortcode() function to another function. This process is called function wrapping. It looks like this:
function shortcodes_init(){
add_shortcode( 'shortcode_name', 'shortcode_handler_function' );
}
add_action('init', 'shortcodes_init');
Here, the add_action() function hooks the shortcodes_init function to fire when the WordPress load is complete.
How to use WordPress shortcodes: in brief
In short, shortcodes are solutions that allow you to customize your content without accessing the HTML coding language. With such a solution, you will save time while configuring your WordPress site according to your needs.
