How to create a shortcode in WordPress

WordPress makes it really easy to create shortcodes. You just need to learn how the add_shortcode function works. Shortcodes allow you to render dynamic content in the content of your pages and posts.

You can use a shortcode to render a contact form or an advertisement or whatever else you want. A shortcode’s content will only be displayed wherever it is placed. This allows you to put dynamic content anywhere on your website.

How To Create a WordPress Shortcode

Creating a shortcode in WordPress is really easy.

First, you need to call the add_shortcode function:

add_shortcode('shortcode_name', 'wpturbo_custom_shortcode');

It accepts two variables: the name of your shortcode and a function that will be called to render the shortcode. The name of your shortcode is what you’ll enter in your WordPress content to display your desired output.

This is what it looks like in action:

function wpturbo_custom_shortcode() {
	$output = 'SHORTCODE OUTPUT';
	
	// You can output HTML here if you want.
	// You aren't limited to just text.
	return $output;
}

add_shortcode('shortcode_name', 'wpturbo_custom_shortcode');

The function wpturbo_custom_shortcode will be called when you put [shortcode_name] in your content.

Whatever you return from this function will be rendered on the page where your shortcode is used.

Now, it’s really important to remember that you need to return the content you want to be rendered.

Warning: If you use echo to output your custom content, then it will be displayed before the page’s content.

You can put the above code in your theme’s functions.php if you want to see quick results.

But the best way to create a custom shortcode is to create a separate plugin and place the code in it. This way your shortcode will still function even when your theme gets updated or if you decide to switch to a different theme.

Use our Shortcode generator to quickly create and download a starter template for your shortcode…

Shortcode Parameters

If you want to give your users some ability to customize the output of the shortcode, you can use parameters. Parameters are basically tags that a user can add to your shortcode. This is what they look like:

[my-shortcode parameter=”value”/]

If you want to offer your users parameters, there’s nothing additional that you need to enable for your shortcode. You just need to use check in your shortcode function if the user has passed any parameters like this:

function wpturbo_custom_shortcode($atts, $content) {	
	// Attributes that the user didn't pass will be replaced with
	// the defaults in the first array passed to this function.
	$atts = shortcode_atts(
		array(
			'name' => 'Mr. Awesome',
			'job' => 'TCB (Taking Care of Business)',
		), $atts
	);

	return "My name is {$atts['name']}. My job is {$atts['job']}";
}

Shortcode parameters are passed as the first argument to your shortcode function. This argument is a key-value pair array where the key is the parameter and the value is its value as entered by the user.

In the above example, we are using the shortcode_atts WordPress function. The first argument of this function is a key-value pair where the key is a parameter and the value is the default value you want for that parameter. This function will return an array where parameters will have the user input if available or their default values.

Note: You might have noticed the second argument to our shortcode function above called $content. This argument no longer works in Gutenberg. This argument is any content the user might have put between the opening and closing shortcode like this:

[my-custom-shortcode]CONTENT[/my-custom-shortcode]

Example: Shortcode To Display a Static Image Ad

Here’s an example of a shortcode that renders a static image ad in your content:

function wpturbo_static_ad() {
	$output = '<img src="/ad.png" />';
	
	// You can output HTML here if you want.
	// You aren't limited to just text.
	return $output;
}

add_shortcode('display_ad_here', 'wpturbo_static_ad');

If you place the above code in a plugin or your theme’s functions.php file, you can then call the [display_ad_here] shortcode anywhere in your content to render the <img/> tag.

Conclusion

Creating new Shortcodes in WordPress is really easy. You just have to call the add_shortcode function with two values: the name of the shortcode, and the name of the function responsible for rendering the content of the shortcode.

If you feel confused by the code in this guide, just use our free shortcode generator.