If you want to do cool things on WordPress with minimal effort, shortcodes are a great idea. The advantage of these elements is that they let you do just about anything. Whether you’re creating complex layouts or embedding interactive elements in your content, shortcodes are perfect. If you’re a beginner, you might have some trouble using them with WordPress. Here are a few tips and tricks to help you master shortcodes.
A Brief Overview of WordPress Shortcodes
Also known as shortcodes,these are elements that use tags enclosed in square brackets to define their purpose. Each shortcode you use will allow you to achieve different goals, such as creating a contact form, embedding a slideshow, or adding a price comparison table for a WooCommerce site, for example.
Where do shortcodes come from?
Shortcodesfirst appeared in 1998 when they were first 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 forum visitors could use. While BBCode is simpler and lighter than HTML coding, the underlying principle is the same. What sets it apart from Bulletin Board Code is that using its tags is safer than using HTML because users cannot enter HTML code.
In other words, security vulnerabilities are prevented. Shortly after it was first used, other content management systems—including the vBulletin and PHPBB forums—adopted this feature. Finally, it is important to note that WordPress does not allow PHP code to be executed within the site’s content for security reasons. To overcome this limitation, shortcodes have been integrated into WordPress since version 2.5, released in 2008.
What are shortcodes in WordPress?
In WordPress, shortcodes are used to add various types of content to your site and customize your layout without any coding knowledge and without having to edit anHTML script. If you use this CMS, you’ll have two types of shortcodes at your disposal. These are self-closing shortcodes, which do not require a closing tag—such as the “Caption” shortcode—and shortcodes that require a closing tag.
What are the default WordPress shortcodes?
WordPress comes with severalbuilt-in shortcodesthat you can use. These include: audio, caption, embed, gallery, playlist, and video. The “audio” shortcode lets you embed audio files on your website. It includes common playback controls such as Play and Pause. The “caption” shortcode wraps your content in captions. It’s typically used to add image captions. However, you can use it for any HTML element.
You can use the “embed” shortcode, which implements the default oEmbed functionality. With this shortcode, you can set various attributes for 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 attributes to specify the images used and customize the gallery’s appearance.
Using the default “playlist” shortcode, you can display a collection of audio or video files. With its style attribute, you can set it to “dark” mode. Finally, the “video” shortcode lets you embed a video file and play it using a simple video player. Several formats are supported here, including:mp4, WebM, m4v, ogv, wmv, and flv.
Are shortcodes still useful?
It has to be said: unfortunately, shortcodes are becoming less and less useful. What WordPress is actually planning is to phase out shortcodes eventually. However, the CMS also wants to prevent this solution from becoming usable. In fact, even after the updates, you’ll still be able to use these shortcodes in your content, since WordPress is a CMS that’s backward-compatible with its older versions.
To add content and make improvements to your site, you can create custom blocks using the available page builders, namely:Gutenberg, Elementor, or Divi. Unfortunately, for a plugin developer, this can involve a tremendous amount of extra work. That’s why shortcodes remain a worthwhile approach. For example, if you want to create a specific layout for a project you’ve been assigned, shortcodes are an excellent idea. They’ll save you time and help you achieve your goals without too much trouble.
What are the pros and cons of WordPress shortcodes?
WordPress shortcodes offer benefits, but they also have a few drawbacks. Find out more right away.
The Benefits
The main advantage of shortcodes is that they let you add a wide range of features to your WordPress sitewith just one line of code. If you’re a beginner, you’ll have no trouble using them. With shortcodes, you don’t have to write complex scripts for each insertion.
It’s also important to note that if you don’t have a solid foundation in programming, you’ll have a hard time adding HTML code to your site. With shortcodes, you can easily adjust your site’s settings. Depending on your preferences, you can keep all your shortcodes in the same plugin. That way, you’ll be able to keep them when you switch themes.
Finally, if you're a web developer, you're probably managing multiple projects. You also need to meet the needs of several clients as quickly as possible. With these ready-to-use shortcodes, you'll save time.
The Disadvantages
If you're a beginner, shortcodes won't be easy to get the hang of. They're therefore better suited forweb developers. Additionally, if you integrate a shortcode into a theme, the added features will stop working if you change the template. Note that when a shortcode is integrated, it can break your HTML due to conflicting tags.
How to Use WordPress Shortcodes
Using shortcodesin WordPress is fairly simple. However, it all depends on where you want to add them on your platform. In any case, you’ll need to thoroughly research these shortcodes and the supported attributes in order to properly configure your website.
WordPress Shortcodes in Pages and Posts
To get started, go to the page or post editor where you want to insert your shortcode. If you’re using Gutenberg, you can add the shortcode in the standalone “Shortcode” block. To find it, simply go tothe “Widgets” section. However, if you’re using the Classic Editor, you’ll need to use the standard method. Some shortcodes even have a button on the editor screen to make it easier for you.
WordPress Shortcodes in Sidebar Widgets
You can also insert shortcodes into the widgets in the sidebar. To add them, go to the “Appearance” tab and click “Widgets.” Then add a Text widget to the section where you want to place a shortcode. Paste the shortcode intothe Text widget and save it. If you’d like, you can visit your site’s public interface to see how the shortcode appears in the sidebar.
Please note that in WordPress 4.8 and earlier versions, shortcodes are not supported in sidebar widgets. To learn more about this feature, feel free to check out the latest updates and improvements.
WordPress Shortcodes in the Header and Footer
Note thatWordPress shortcodesare specifically designed 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 to your footer or anywhere before the comments section, you’ll need to use the “do_shortcode()” callback function.
To achieve the desired configuration, you must add a specific code snippettoyour theme’sheader.php or footer.php file, or to one of its template files. Once you do this, the shortcode will be displayed exactly where you inserted it. It’s important to add square brackets around the quotes to wrap the shortcode. Without this setup, your insertion won’t work. Additionally, you can use the do_shortcode() callback function to enable shortcodes throughout your WordPress CMS.
What do you need to know about the shortcode API?
The WordPress Shortcode API defines how you can use shortcodes to customize and extend your platform’s functionality. It allows web developers to create unique content—such as slideshows, forms, and calls to action—that users can incorporate into their sites simply by pasting the appropriate shortcode.
Note that withshortcodes, you’ll have access to almost every feature you can imagine on your website. The API supportsauto-closing shortcodes and closing shortcodes. It handles all the complex parsing and includes helper functions for setting and retrieving default attributes. By using the API, you can jump right into developing and customizing shortcodes. The advantage here is that you’ll no longer waste your valuable 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 searches for registered shortcodes while processing the site’s content. If it finds a registered shortcode, the shortcode API takes over and returns the output of the shortcode or shortcodes. The returned string replaces the shortcode tag where it was inserted. When you register a shortcode in WordPress using the `add_shortcode()` function, here’s how to do it:
add_shortcode('shortcode_name', 'shortcode_handler_function');
For “short_name,” the WordPress tag will be searched for during the analysis of post content. The shortcode API therefore recommends that you use only lowercase letters, numbers, and underscores to define its value. You must avoid hyphens here.
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 multiple shortcodes have the same valid callback function, this value will allow you to determine which shortcode triggered the handler function.
In summary, the API analyzes the shortcode tag, its attributes, and its content, passing the values to the handler function, which processes them and returns an output string. This is a rather specialized process that is not accessible to beginners.
Where should you put your custom shortcode scripts?
Depending on your preferences, you can add your custom shortcode scripts to a plugin or include them in the functions.php file of the theme you're using. If you choose the second option, you cancall the add_shortcode() functionwithout making any changes. However, if you choose to use a plugin, you must initialize your custom scripts after WordPress has fully loaded. To ensure this, wrap the add_shortcode() function inside 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 so that it is triggered when WordPress has finished loading.
How to Use WordPress Shortcodes: A Summary
In short, shortcodes are tools that let you customize your content without havingto use HTML. With this tool, you'll save time while setting up your WordPress site to meet your needs.
