Shortcode? What’s that? In WordPress, shortcodes can be super handy in adding dynamic content wherever you want it to be placed on your website. In this article, you’ll get a beginner’s WordPress Shortcode tutorial.
As a note, this may be a beginner-level article, but there will be some code within the tutorial.
What is a Shortcode?
A shortcode is the unique feature of WordPress using Shortcode API which allows for a quick and easy insertion of dynamic content, functionality or special elements to your sites, pages or widgets. Square brackets representing a specific keyword or title are represented in shortcodes. The shortcode is recognized by WordPress and replaced with the corresponding dynamically generated content or feature when it processes a post or page.
For example, a simple shortcode could be [current_year], which, when used in a post, will be replaced with the current year, dynamically changing each year without the need to manually update it.
Shortcodes provide a convenient way to add more dynamic features to your content without requiring in-depth knowledge of coding. They are commonly used to embed elements like forms, buttons, galleries, audio and video players, sliders, and more from plugins or themes.
Where can a shortcode be used in WordPress?
Shortcodes can nearly be used anywhere on your WordPress website. This includes widgets, content, and more. The possibilities with shortcodes are endless.
Creating and Using Shortcodes
Creating and using shortcodes is straightforward in WordPress. Here's a basic guide to using shortcodes:
Create a shortcode
Use the shortcode
Customize shortcode attributes (optional)
Create a shortcode
To create a shortcode, you need to define what its functions are. You will usually apply the code to the functions.php file file of your theme or in a custom plugin. The shortcode function should return the desired output that you want to display when the shortcode is used.
For example, to create a shortcode that displays a greeting message, you can use the following code:
function welcome_shortcode() {
return 'Hello, welcome to our website!';
}
add_shortcode('greeting', welcome_shortcode');
In this example, the shortcode [greeting] will be replaced with the greeting message when used in a post or page.
Use the shortcode
Once the shortcode function is defined, you can use it in your posts, pages, or widgets. Simply place the shortcode keyword within square brackets in the content area where you want the dynamic content to appear.
For instance, to display the greeting message from the previous example, you would add the shortcode [greeting] to the content.
Customize shortcode attributes (optional)
Shortcodes can also use attributes, which allow you to customize the output further. For example, if you have a gallery shortcode, you might want to have attributes for specifying the number of images to display or the gallery's size.
To use attributes, modify the shortcode function to handle them. For instance:
function custom_gallery_shortcode($atts) {
$atts = shortcode_atts( array(
'size' => 'medium',
'num_images' => 5,
), $atts );
// Generate and return the gallery based on the attributes.
// Example: [gallery size="large" num_images="10"]
}
add_shortcode('gallery', 'custom_gallery_shortcode');
In this example, you can use the [gallery size="large" num_images="10"] shortcode to customize the size and number of images displayed in the gallery.
How to Use The Shortcode Block
In WordPress, the shortcode block is a built-in block that allows you to insert and use shortcodes directly within the Gutenberg content block editor. You can easily add dynamic content, functions, or complex elements to your posts and pages with the shortcode block, without having to write a code. Here's how to use the shortcode block in WordPress:
Access the Block Editor
Add the Shortcode Block
Insert the Shortcode
Preview and Save
Publish or Update
Access the Block Editor
To use the shortcode block, you first need to access the block editor in WordPress. You can do this by creating a new post or page, or by editing an existing one. Once you've pulled up the block editor, you'll see a (+) plus sign icon at the top-left corner, which you can click to add a new block.
