Blog, WordPress, WordPress Development

How to Create Shortcode in WordPress with Example

Shortcode in WordPress is a key to add 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 in your post or page content. To insert executable code in your content you have to use Shortcodes.

What is Shortcode in WordPress?

The Shortcode API is a simple set of functions for creating WordPress shortcodes for use in posts and pages. 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.

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.

How to Add Shortcode in a Page?

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

Edit the page you want to add shortcode.

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

Find shortcode block in 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 shorcode block like in sidebar, you can add 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.

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

Support Shortcodes in Widgets

If WordPress doesn’t support your shortcodes in widgets, add the following codes in 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 you custom shortcode in WordPress, open functions.php file and add your custom function in 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 add 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.

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.

Create Shortcode With Attribute

In the previous example, there is a function that doesn’t accept the parameters. If you need to pass a parameter to your shortcode function, you have to change your code like 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, function accepts two argument and displays them. Both attributes are optional.

In 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 shortcode. 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 in 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 shortcode inside the shortcode like 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 added by do_shortcode action.

Remove Shortcode

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

remove_shortcode('hs_shortcode');

Predefined Shortcodes in WordPress

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.