How to create a shortcode in WordPress?

Since version WordPress 2.5, developers have had the ability to create shortcodes in WordPress, which allows the user to add extra functionality to a post or page without any extensive coding knowledge.

So, What is a shortcode?

A shortcode is a small piece of text that is used to add a piece of code to the visual editor, which can output information to the page or post. An example of a shortcode is shown below which could be used to display your most popular posts on a page.


Now if you were to do this without using a shortcode, then you would have to write multiple lines of complex code which would have to be input using a separate code editor. WordPress will only allow certain types of text to be input through the admin panel and will remove some types of code for security purposes.

How to create a shortcode?

WordPress uses a simple method to create a shortcode using the Shortcode API, which starts by writing a simple callback function to output the required content. An example is shown below.

function hello_world_function(){
return 'Hello World'; // Output our text.

We then need to call that function using the add_shortcode hook which will tell WordPress to execute the code contained in the function.

add_shortcode('hello_world', 'hello_world_function' );

This hook has 2 attributes with the first being the text used between the brackets within the shortcode and the second attribute is the function to be called. The example will output the text “Hello World” wherever the shortcode is added. The functionality of a shortcode can be extended using parameters or attributes. Have a look at the shortcode below, and notice the extra text. The example below could be used to add a photo, which will allow you to pass the url, the width and height of the image to the shortcode .

[my_picture link="url/to/mypicture.jpg" width="640px" height="480px"]

The advantage to using this method is that the shortcode is reusable, you would just have to change the attributes to match your image. We now have to create a function to output the image as defined in the shortcode and by using the extract function to define our attributes, this converts them to usable variable which can then be added to the html to create the correct elements of the html tag. The array in the following function sets the default values which are used if the values are not specified within the shortcode.

function my_picture_function($attr){
extract( shortcode_atts( array(
    'link'   => '',
    'width'  => 640px,
    'height' => 480px,
), $atts ) );

return ''; // Output our our image using a standard html image tag.
add_shortcode('my_picture', 'my_picture_function' );

So where does this code go?

The normal way to define a shortcode is to add your PHP code to the functions.php file in theme folder, but there are drawbacks to this method. If you decide to switch themes in the future then the code needs to be moved to the corresponding functions file of the new theme, or the shortcodes will not work and will be displayed as plain text. The preferred method is to create a plugin which is independent of a theme, however this is beyond the scope of this tutorial.

In a future tutorial I will show you how to create a plugin to display a list of posts using a shortcode. So to end, using a simple shortcode can add extra functionality or display more interesting content in your posts or pages. These shortcodes are often bundled with plugins to increase the usefulness of the plugin. So why not try it yourself and be sure to leave a comment below if you get stuck or need some advice.