How to Create a Shortcode in WordPress with Example

Shortcode in WordPress is a key to adding dynamic codes to your page and is used to reduce the amount of code you need to write. You can’t add executable PHP codes to your post or page content. To insert executable code in your content you have to create or use WordPress Shortcodes. In this post, you will learn how to create and add a shortcode or even a custom WordPress shortcode with parameters in your theme with shortcode examples, step by step.

WordPress Shortcode Content

What is Shortcode in WordPress?

WordPress filters all content to make sure that no one uses posts and page content to insert malicious code into the database. This means that you can write basic HTML in your posts, but you cannot write PHP code. But what if you wanted to run some custom code inside your posts?

The Shortcode API is a simple set of functions for creating WordPress shortcodes for use in posts and pages. WordPress introduced the shortcode in version 2.5. For instance, the following shortcode (in the body of a post or page) would add a photo gallery of images attached to that post or page.

[gallery id="123" size="medium"]

They are displayed inside square brackets. Many WordPress plugins and themes use shortcodes to add specialized content like contact forms, image galleries, sliders, and more.

Such dynamic content would need writing a lot of code. Shortcodes simplify this process of adding features to a WordPress website. They add HTML and other dynamic markup languages. Into the post, page, widget, or comment

Basically, it allows developers to add their code inside a function and then register that function with WordPress as a shortcode, so users can easily use it without having any coding knowledge.

If you only create one feature on a specific post or page you don’t need to use a shortcode. But, if you will use that shortcode in many different posts or pages, you may want to use a plugin to add a shortcode.

How to Add Shortcode in WordPress?

You can insert shortcodes in WordPress on:

  • Posts
  • Pages
  • Widgets
  • Themes

To add a shortcode to your page or post content, simply you can add it with a shortcode block.

Edit the page you want to add the shortcode.

You need to click on the add block button to insert a shortcode block.

Find the shortcode block in the Gutenberg blocks list and add it.

Paste the shortcut of your shortcode inside the block like the example above.

Shortcode in WordPress

If you don’t have access to the shortcode block like in the sidebar, you can add it with WordPress build-in Text widget.

If you are still using the old classic editor in WordPress, simply edit the post and page where you want to add the shortcode. You can paste the shortcode anywhere inside the content editor where you want it to display.

How to Add a Shortcode in WordPress PHP Files

Sometimes you may want to use a shortcode inside a PHP file. Basically, you can add a shortcode to any WordPress theme template by simply adding the following code. Here is the adding shortcode example, programmatically.

<?php echo do_shortcode("[your_shortcode]"); ?>

Support Shortcodes in Widgets

If WordPress doesn’t support your shortcodes in widgets, add the following codes to your functions.php file.

add_filter( 'widget_text', 'shortcode_unautop' );
add_filter( 'widget_text', 'do_shortcode' );

How to Create Your Own Custom Shortcode in WordPress?

To create your custom shortcode in WordPress, open the functions.php file and add your custom function to it.

function hs_custom_shortcode(){
    return '<p>Hello World!</p>';
}
add_shortcode( 'hs_shortcode', 'hs_custom_shortcode' );

As you see there is a function that prints “Hello World!”. You can create your shortcode in WordPress by add_shortcode action.

The first argument is the name of the shortcode to use everywhere and the second argument is the function name.

Shortcode names should be all lowercase and use all letters, but numbers and underscores should work fine too.

The Shortcode callback function can have three parameters. You can choose to use any number of them including none of them.

  • $atts – an associative array of attributes, or an empty string if no attributes are given
  • $content – the enclosed content (if the shortcode is used in its enclosing form)
  • $tag – the shortcode tag, useful for shared callback functions

Any string returned (not echoed) by the shortcode handler will be inserted into the post body in place of the shortcode itself.

Example of Create WordPress Shortcode With Parameters and Attributes

In the previous example, there is a WordPress shortcode that doesn’t accept the parameters. If you need to pass a parameter to your shortcode function, you have to change your code to the one below.

function hs_custom_shortcode($atts){
    $a=shortcode_atts(array(
        'first_name' => '',
        'last_name' => '',
    ), $atts);
    return '<p>Welcome '.$a['first_name'].' '.$a['last_name'].'</p>';
}
add_shortcode( 'hs_shortcode', 'hs_custom_shortcode' );

In this code, the function accepts two arguments and displays them. Both attributes are optional.

On the page, you can change your brackets like below.

[hs_shortcode first_name="John" last_name="Doe"]

Don’t use camelCase or UPPER-CASE for your $atts attribute names.

Enclosing Shortcode in WordPress

The examples above show self-closing shortcodes. If a shortcode macro is used to enclose content, its handler function will receive a second parameter containing that content.

function hs_custom_shortcode($atts, $content = null)
{
    $a = shortcode_atts(array(
        'first_name' => '',
        'last_name' => '',
    ), $atts);
    return '<p>Welcome ' . $a['first_name'] . ' ' . $a['last_name'] . ' | '.$content.'</p>';
}
add_shortcode('hs_shortcode', 'hs_custom_shortcode');

And on your page edit:

[hs_shortcode first_name="John" last_name="Doe"]Honar Systems[/hs_shortcode]

When content is enclosed, the complete shortcode macro including its content will be replaced with the function output. It is the responsibility of the handler function to provide any necessary escaping or encoding of the raw content string, and include it in the output.

Nested Shortcodes

If you want to add a shortcode inside the shortcode like the following code

[caption]Caption: [myshortcode][/caption]

You have to change your first shortcode’s function.

function caption_shortcode( $atts, $content = null ) {
	return '<span class="caption">' . do_shortcode($content) . '</span>';
}

The second shortcode was added by the do_shortcode action.

Remove Shortcode

To remove a shortcode, you can do it simply like the below code:

remove_shortcode('hs_shortcode');

Predefined Shortcodes in WordPress

  • audio
  • caption
  • embed
  • gallery
  • playlist
  • video

Final Words

You can add your custom shortcode function in your plugin, functions.php file, and almost everywhere in WordPress. It is better to add in a plugin because if you change your theme, your shortcode won’t work because you left it in your functions.php file.

Shopping Cart