How to use WordPress Shortcodes to make your project more dynamic
In 2008, the WordPress development team introduced a feature called shortcodes, which allows users to easily add dynamic elements to their editorial posts. Although WordPress has relied on the Gutenberg block editor since version 5.0, which includes many features previously available only through shortcodes, WordPress Shortcodes remain an important component for many plugins and themes.
- Stress-free, no matter your skill level with easy AI tools
- Fully customizable with themes and plugins
- Hassle-free updating and less admin
What are shortcodes?
Shortcodes, introduced in WordPress version 2.5, are compact commands that can be inserted into content and are linked to PHP code. This code is either stored in the functions.php file or in a separate .php file that is included within the functions.php. When a page with a shortcode is loaded, WordPress ensures the respective script is executed and interpreted. As a result, visitors see the content generated by the PHP function rather than the code itself. Essentially, the shortcode acts as a placeholder, which can be used for simple elements like a text excerpt or for dynamic content types such as pop-ups or image galleries.
Creating a shortcode in WordPress is not a big challenge: They are inserted directly in the editor at the appropriate place in the post. To ensure WordPress recognizes the codes as such, they are placed in square brackets [ ]. For example, a shortcode looks like [recent-posts]. Linked with the appropriate PHP function, this code is meant to display other recently published posts at the selected position. Additional parameters can also be used to specify the WordPress Shortcodes.
While shortcodes still work, WordPress now offers a more intuitive way with the Block Editor to insert similar functions directly through blocks. Many classic shortcodes have been replaced by Gutenberg-blocks, allowing users to insert dynamic content even more easily without using code. If you don’t want to give up using shortcodes, WordPress provides a special shortcode block. This enables you to insert shortcodes directly into the Block Editor.
Why are WordPress Shortcodes so useful?
The introduction of the Block Editor has changed the use of shortcodes. Many former shortcode functions have been replaced by blocks, allowing users to insert content directly via drag-and-drop without using code. Still, shortcodes remain useful, especially for specialized plugins or custom functions that do not yet have their own block alternative.
Especially in existing WordPress installations, shortcodes remain a sensible solution to ensure compatibility with older themes and plugins. These often still rely on shortcodes if they haven’t fully switched to blocks. Additionally, WordPress Shortcodes are suitable for dynamic content and complex functions. Those who wish to develop their own functions also benefit from shortcodes, as they allow the integration of specific features without the need to work directly on the theme’s code.
Although WordPress is increasingly moving towards blocks, shortcodes remain a valuable addition, especially for advanced users and specific use cases.
How to create your own WordPress Shortcodes
At this point, it’s clear that the core of shortcodes lies in the PHP script, which is automatically executed whenever WordPress encounters a previously defined shortcode. The following sections will explain how to add shortcodes to WordPress, how to incorporate them into your project, and how to deactivate them if necessary. The relevant PHP code can be added either in the functions.php file within the active theme’s directory or in a separate PHP file. To ensure that your custom shortcodes remain intact after future updates, it’s essential to create a child theme. This can be done in just a few steps, as shown in our guide on creating a WordPress child theme.
Create a callback function
The PHP function that’s executed as soon as WordPress registers a shortcode is a so-called callback function. This is then transferred to another function as a parameter and called up under the defined conditions with defined parameters. The following example function searches through the database and generates a link to a previously created entry for the shortcode, [current posts]:
function current_posts_function() {
query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => 1));
if (have_posts()) :
while (have_posts()) : the_post();
$return_string = '<a href="'.get_permalink().'">'.get_the_title().'</a>';
endwhile;
endif;
wp_reset_query();
return $return_string;
}The text that the shortcode is supposed to replace is located in the variable, $return_string (PHP lables all variable with $). The PHP function (current_post_function) returns these variables with the variable, return. If you instead incorrectly use the echo command, then the element that’s been implemented via shortcode ends up in front of the actual content.
Register shortcodes in WordPress
You have to notify WordPress that the created function is a shortcode function that is to be automatically executed if the accessed page contains the shortcode [current post]. To this end, add the following code to your PHP file:
add_shortcode('current-posts', 'current_posts_function');With this step, you’ve now defined both the name of the shortcodes, [current posts], which will later be used in the editor, as well as the function, current_posts_function(). In order to make sure that no conflicts arise among the WordPress shortcodes, it’s important to choose a name that’s both unique and clear.
Define shortcodes with parameters
To provide your WordPress Shortcode with more flexibility, users can add optional parameters. As demonstrated in the previous example, it’s possible to specify how many entries should be displayed within the shortcode. To achieve this, two additional functions are required: shortcode_atts(), which combines user-defined shortcode attributes with default attributes and automatically sets standard values, and the extract() function, which is used to extract the shortcode attributes. If the argument field is left empty, the default value of 1 should be set ('posts' => 1).
function current_posts_function($atts){
extract(shortcode_atts(array(
'posts' => 1,
), $atts));
$return_string = '<ul>';
query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => $posts));
if (have_posts()) :
while (have_posts()) : the_post();
$return_string .='<li><ahref="'.get_permalink().'">'.get_the_title().'</a></li>';
endwhile;
endif;
$return_string .= '</ul>';
wp_reset_query();
return $return_string;
}Now specify the shortcode in the text as follows, for example: [recent-posts posts="5"], and it will display not only the most recently published article, but a list of the five most recent articles.
Use specific content as shortcode parameters
You can further modify the presented example by adding a specific content element as a parameter. In our example, this content parameter should define the title of an <h3> heading. To do this, extend the callback script with the variable $content and insert the HTML heading <h3> before the <ul> list:
function current_posts_function($atts, $content = null) {
extract(shortcode_atts(array(
'posts' => 1,
), $atts));
$return_string = '<h3>'.$content.'</h3>';
$return_string .= '<ul>';
query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => $posts));
if (have_posts()) :
while (have_posts()) : the_post();
$return_string .= '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';
endwhile;
endif;
$return_string .= '</ul>';
wp_reset_query();
return $return_string;
}Similar to an HTML tag, you now surround the desired heading in your text with an opening and a closing shortcode:
[recent-posts posts="5"]Heading of the recent articles list[/recent-posts]Use WordPress shortcode in a widget
Previously, shortcodes had to be manually activated for widgets. However, since WordPress 5.8, many contents can be directly inserted into widgets through the Block Editor, which often eliminates the need for shortcodes as mentioned. If a shortcode is still to be used, it can simply be inserted into a “shortcode” block within a widget.
Eliminate the need to turn off shortcodes
If you no longer need a particular WordPress shortcode, there are two ways to deactivate it. The most effective approach is to remove the callback function from the PHP file along with all related code entries. If you only delete the callback function, WordPress won’t recognize the shortcode and will display the code within the content instead. Since this method can be time-consuming, especially for shortcodes that are used frequently, there’s another option: instead of removing the code and PHP functions, you can modify the callback function with an unreturned instruction to effectively block it:
add_shortcode('current-posts', '__return_false');Practical shortcodes for your blog
After you’ve begun to understand more about the structure of shortcodes and are also aware of how they are registered and faded into WordPress, then the following examples should help you learn more about the various possibilities that shortcode technology can afford users.
Add a link button
In order to add a custom-designed link button to your project, you don’t need to do anything more than implement a shortcode with the following callback function:
function link_button_function( $atts, $content = null ) {
return '<button type="button">'.do_shortcode($content).'</button>';
}
add_shortcode('link-button', 'link_button_function');The desired font for the button should now be placed between the opening and closing shortcode:
[link-button]Click here![/link-button]Display the WordPress menu
The following code allows you to display a selected menu from your WordPress project below a text entry:
function menu_function($atts, $content = null) {
extract(
shortcode_atts(
array( 'name' => null, ),
$atts
)
);
return wp_nav_menu(
array(
'menu' => $name,
'echo' => false
)
);
}
add_shortcode('menu', 'menu_function');If you want to use this code, then just enter the name of the respective menu as the parameter, for example:
[menu name="Main menu"]Integrate Google Maps
Shortcodes technology enable excerpts from maps from Google Maps to be incorporated into your project without having to first adjust the source code. The appropriate code for your PHP file looks as follows:
function googlemap_function($atts, $content = null) {
extract(shortcode_atts(array(
"width" => '640',
"height" => '480',
"src" => ''
), $atts));
return '<iframe width="'.$width.'" height="'.$height.'" src="'.$src.'&key=YOUR_API_KEY"></iframe>';
}
add_shortcode("googlemap", "googlemap_function");The shortcode, which is one of the standard short commands, is linked to the three parameters: height, width, and Google Maps source (src). Therefore, the code in your editor should look like this:
[googlemap width="640" height="480" src="https://www.google.com/maps/place/Statue+of+Liberty/@40.6892494,-74.0445004,17z"]WordPress Shortcode plugins made simple
For those who neither want to create their own shortcode nor manually implement pre-made examples into the functions.php or the respective PHP file, there’s another way to activate these useful short commands for their own web project: On the official WordPress website, you will find a wide selection of plugins that add both individual and various shortcodes to your WordPress installation. The following plugins are examples:
- Shortcoder: Create Your Own WordPress Shortcode in a Few Steps: Create your own shortcode in a visual editor and easily add HTML and JavaScript snippets.
- Shortcodes Ultimate: This plugin includes over 50 predefined helpful shortcodes and supports the Block Editor.
Are you interested in more exciting WordPress plugins? Our articles can help you out: