WordPress shortcodes: useful shortcuts

In 2008, the WordPress development team introduced a feature called “ shortcodes » allowing you to easily add dynamic elements to your publications. Although WordPress has used the Gutenberg block editor since version 5.0, which offers many features previously available only with shortcuts, shortcuts remain widely used in many plugins and themes.

What is a shortcode?

Shortcodes were added with version 2.5 of WordPress. It is about short commands placed within a text and linked to PHP code. They can be placed in a bound folder, functions.phpor in a file .php separate, integrated into the file functions.php. If the pages are loaded with a shortcode, WordPress takes care of the execution and interpretation of the respective scripts. The visitor thus sees the content created via the PHP function rather than with the code. The shortcode therefore actually serves as substitutefor example for simple elements such as a text snippet or for dynamic content types such as pop-ups or an image gallery.

Implementing a shortcode in WordPress does not pose a big challenge: it is added directly to the editor in the corresponding place in the publication. For WordPress to recognize these as code, they are enclosed in square brackets “ [ ] « . For example, a forum shortcode might look like this: “ [publications_actuelles] « . Linked to the adapted PHP function, recent contributions are displayed at the defined location. With additional parameters, it is possible to add specifications to WordPress shortcodes.

Although shortcodes will still work, WordPress now offers a more intuitive way to insert similar functions directly into blocks with the Block Editor. Thus, many classic shortcodes have been replaced by Gutenberg blocksmaking it even easier for users to insert dynamic content. If you do not want to give up the use of shortcodes, WordPress provides the special block shortcodethanks to which you can insert shortcodes directly into the block editor.

Why are WordPress shortcodes so important?

The introduction of the Block Editor changed the use of these shortcuts. Many old functions have been replaced by blocks: users can now insert content by drag and drop, without using code. However, shortcodes are still useful, especially for specialized plugins or for certain custom functions that don't yet have their own block alternative.

In existing WordPress installations, shortcodes remain a useful solution to ensure compatibility with old themes and plugins. The latter often continue to use shortcodes when they have not yet fully moved to blocks. They are also suitable for dynamic content and complex functions and useful to those who wish to develop their own features. Indeed, they allow specific functionalities to be integrated without having to work directly on the theme code.

Although WordPress is moving more and more towards blocks, shortcodes remain a valuable complementespecially for advanced users and specific use cases.

The core of a shortcode is the PHP script that is executed. It is not a question here of explaining how to program such a script, because that would amount to taking a basic course in PHP programming and would take us away from the subject. You will rather discover how to integrate shortcuts into your project, and how to disable them. Add the PHP code to the folder functions.php of the theme used or in a separate PHP file that you will integrate accordingly. To ensure that your shortcodes won't disappear during the next theme update, you should create a  » child theme « . This process is relatively simple and is explained in our article “Create a WordPress child theme”.

Create a callback function

The PHP function that is executed as soon as WordPress saves a shortcode is what we call in English callback functionor “callback function” in French. It is passed to another function, with parameters defined under certain conditions. The following example function searches the database and produces a link to the contribution written for the shortcode [publications_actuelles] :

function fonction_publications_actuelles () {
query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => 1));
if (have_posts()) :
while (have_posts()) : the_post();
$return_string = ''.get_the_title().'';
endwhile;
endif;
wp_reset_query();
return $return_string;
}

The text that should replace the shortcode is on the variable $return_string (PHP characterizes all variables with $). The PHP function (fonction_publications_actuelles) gives this variable in return. If you use the command echo by mistake instead the element introduced by shortcode suddenly lands in the current content.

Save shortcodes to WordPress

You need to tell WordPress that the function you created is a shortcode that should be executed automatically when a viewed page contains the shortcut [publications_actuelles]. To do this, add the following code to your PHP file:

add_shortcode('publications_actuelles', 'fonction_publications_actuelles');

You now have the name of the shortcode [publications_actuelles]which will later be used in the editor, and the function fonction_publications_actuelles well defined. So that no conflicts appear between the different WordPress shortcodes, it is important to choose a clear and unique name.

Set parameters for shortcodes with the most important functions

To bring more flexibility To your WordPress shortcode, you have the possibility to add optional parameters. With the example used so far, it is a question of determining how many articles can be displayed. You need a second function for this: the function shortcode_atts() on the one hand, which combines user-generated shortcode attributes with native attributes and automatically enters the necessary default values. On the other hand, the PHP function extract() is presupposed to extract shortcode attributes. Indicate the value 1 by default in the case where the argument field remains free, as follows ('posts' => 1):

function fonction_publications_actuelles($atts){
extract(shortcode_atts(array(
'posts' => 1,
), $atts));
$return_string = '
';
query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => $posts));
if (have_posts()) :
while (have_posts()) : the_post();
$return_string .='
'.get_the_title().'
';
endwhile;
endif;
$return_string .= '
';
wp_reset_query();
return $return_string;
}

Now specify the shortcut in the text, e.g. publications_actuelles posts="5"it is not just the last article that will appear, but a list of the last five articles.

Use certain content as shortcode parameters

You can modify the example presented above and add a specific piece of content as a parameter. In our example, this content parameter should define an h3 title. To do this, complete the callback script with the variable $content and insert the HTML title

in front of list item :

function fonction_publications_actuelles($atts, $content = null) {
extract(shortcode_atts(array(
'posts' => 1,
), $atts));
$return_string = '
'.$content.'
';
$return_string .= '
';
query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => $posts));
if (have_posts()) :
while (have_posts()) : the_post();
$return_string .= '
'.get_the_title().'
';
endwhile;
endif;
$return_string .= '
';
wp_reset_query();
return $return_string;
}

php

In the same way as an HTML tag, now surround the desired title in your text with an opening and closing shortcode:

[publications_actuelles posts="5"]Nom de la liste des articles récents [/publications_actuelles]

php

Use a WordPress shortcode in a widget

Previously, shortcodes had to be manually enabled for widgets. However, since WordPress 5.8, a lot of content can be inserted directly into widgets via the block editorwhich eliminates the need for shortcodes in many cases. If you want to continue using a shortcode, you can simply insert it into a block shortcode within a widget.

Disable unnecessary shortcodes

If you don't have no longer needed of a WordPress shortcode, you have two possibilities to deactivate it. The optimal solution is to remove the callback function from the PHP file, as well as all code entries from your contribution. If you only delete the callback function, WordPress will no longer recognize the shortcode as such and the code will appear in plain text in the middle of the article. Since this method means a large investment for frequently used shortcodes, there is a second possibility: instead of removing the PHP code and function, the callback function is extended by an instruction which returns nothing and is thus almost blocked.

add_shortcode('publications_actuelles', '__return_false');

php

Practical shortcodes for your blog

Now that you have an overview of the structure of shortcodes and their integration with WordPress, discover some practical shortcode examples who can be of use to you.

Add a link as a button

To add a link as a button, all you need is a shortcut with the following callback function:

function link_button_function( $atts, $content = null ) {
return ''.do_shortcode($content).'';
}
add_shortcode('link-button', 'link_button_function');

php

You can decide on the design of the button to simply place between opening and closing shortcodes:

[link-button]Cliquez ici ![/link-button]

php

You can display the chosen menu of your WordPress project in an article with the following code:

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');

php

If you want to use this shortcode, simply specify the name of the respective menu as a parameter, for example:

[menu name="Menu principal"]

php

Integrate Google Maps

You can integrate simply and quickly portions of maps from Google Maps to your project, without having to adapt the source code. Here is the code to add to the PHP file:

function googlemap_function($atts, $content = null) {
extract(shortcode_atts(array(
"width" => '640',
"height" => '480',
"src" => ''
), $atts));
return '';
}
add_shortcode("googlemap", "googlemap_function");

php

The shortcode which is part of the standard commands is linked to three parameters: height (height), width (width) and source Google Maps (src). Such code should therefore look like this in your editor:

[googlemap width="640" height="480" src="https://www.google.com/maps/place/Tour+Eiffel/@52.5158015,13.3776636,233m?hl=fr"]

php

WordPress shortcode plugins: the easy way out

For those who don't want to create their own shortcodes or manually implement existing ones in the PHP files already mentioned, there is a another possibility to unlock useful shortcuts for their web project. On the official WordPress websiteyou will find a large selection of plugins that add shortcodes to your WordPress installation. Here are some examples of said plugins:

Note

Want to learn more about other types of WordPress plugins? Discover our advice articles to help you: