How to Create Shortcode in WordPress – Explained by Example

Yes! you read it right. Creating your own custom shortcodes in WordPress is actually super easy. In one of my previous articles, I explained in detail about what are shortcodes. here I will show you, how to create your own shortcodes.

WordPress provides a Shortcode API, this API contains lots of inbuilt functions that are used to create shortcodes. Shortcodes API gives options to the developers to create custom shortcodes as per their needs.

So with the help of shortcode API, You can create 3 different types of shortcodes.

  1. Self-Closed Shortcodes
  2. Shortcodes With Attributes/Parameters
  3. Enclosed Shortcodes

To create any type of shortcodes, It is important to register that shortcode by using below function.

add_shortcode( 'shortcode_name' , 'callback_function' )

This function accepts two parameters:

  • shortcode_name = Name of your shortcode.
  • callback_function = function that should be executed.

Now you are ready to create your first custom shortcode. Let’s dive into this.

Create Self-Closed Shortcodes

Self-Closing shortcodes are the basic form of shortcodes. This type of shortcodes doesn’t have any end tag and they close automatically. It contains the shortcode’s name only.

It will look something like this :

[shortcode_name]

Let’s Take an Example:

So here I am taking an example to create a custom shortcode for social links. Copy the below code and add it into your theme’s functions.php file.

function diwp_basic_shortcode_social_links(){
	
	$facebook = "<a href='https://www.facebook.com/'>Follow Us On facebook</a>";
	$twitter = "<a href='https://www.twitter.com/'>Follow Us On Twitter</a>";

	$output = $facebook.'</br>'.$twitter;	
	
	return $output;
}

add_shortcode( 'social_links', 'diwp_basic_shortcode_social_links' );

After adding this code into functions.php file. Just copy the below shortcode and add into your page or post.

Usage : [social_links]

This shortcode will display you the social links as output something like in the below image.

how-to-create-shortcodes-in-wordpress-output

Now let’s understand the above example. In the above code, I did two things:

  1. I have created a diwp_basic_shortcode_social_links() function that is returning social links as output.
  2. I have registered the shortcode using add_shortcode() function and pass my callback function in it.

Hope the above example helps you to understand how to create self-closing shortcodes. now let’s move on to shortcodes with attributes.

Create Shortcodes with Multiple Parameters

In the above shortcode, You have learned about creating simple or basic shortcodes. Now let’s take it one step ahead by passing parameters and adding attributes in it. It will look something like this :

[shortcode_name name="myshortcode" color="red"]

Let’s Understand by Example:

So again, I am taking my above social links example to understand this. Now I wanted to have an option to set Custom URL, colors and maybe font-size for the social link shortcode.

Let’s just copy the below code and add it your theme’s functions.php file.

// Creating shortcode with multiple attributes
function diwp_social_link_with_parameter($attr){

	$args = shortcode_atts( array(
	
			'url' => '#',
			'color' => '#F0F',
			'textsize' => '16px'

		), $attr );

	$output = '<a href="'.$args['url'].'" style="color:'.$args['color'].'; font-size:'.$args['textsize'].' ">Check Out My Facebook Page</a>';
	return $output;

}

add_shortcode( 'social_links_para' , 'diwp_social_link_with_parameter' );

After adding this shortcode in functions.php file. Add the below shortcode in your page or post.

Usage: [social_links_para url="https://facebook.com/page-name" color="#446ade" textsize="25px"]

And this shortcode will show you the output like in the image below.

how-to-create-shortcodes-with-multiple-parameter-in-wordpress--output

Now let’s understand this code, So if you see the code I have done the same thing. I have created a callback function and registered my shortcode.

But in the callback function, I have passed a parameter $attr and also used a shortcode_atts() function.

  • $attr = its an array of attributes or it can be empty string if there are no attributes given.
  • shortcode_atts( $defalt_array, $attr ) = This function is used to define attributes and their default values for shortcode. It takes 2 parameters and both are required.
    • $defalt_array – an array with attributes and their values.
    • $attr – an array of attributes that we pass through shortcode.

Then in our output string, I have passed the values to their attributes and return the output.

Hope this example helps you to understand how to create custom shortcodes with attributes. Now let’s move on to the last one Enclosed Shortcodes.

Create Enclosed Shortcodes

Enclosed Shortcodes, is a type of shortcodes that has a start tag and an end tag, just like an HTML tag. These shortcodes allow you to embed your content within shortcodes.

It will look something like this:

[shortcode_name] Your Content to be displayed [/shortcode_name]

Or

[shortcode_name name="myshortcode" color="red"] Your Content to be displayed [/shortcode_name]

Let’s understand by example:

In the above example, you have learned about creating Shortcodes with attributes. Now I wanted to take it one step ahead by passing content in it. let’s say, I wanted to add custom text for these links dynamically.

To do that, copy the below code and add it into your theme’s functions.php file.

// Creating enclosing shortcode with parameters
function diwp_enclosed_shortcode_social_links($attr, $content){

	$args = shortcode_atts( array(
	
			'url' => '#',
			'color' => '#F0F',
			'textsize' => '16px'

		), $attr );

	$output = '<a href="'.$args['url'].'" style="color:'.$args['color'].'; font-size:'.$args['textsize'].' ">'.$content.'</a>';
	return $output;

}

add_shortcode( 'enclosed_social_links', 'diwp_enclosed_shortcode_social_links' );

After adding this code in functions.php, add the below shortcode in your page or post.

Usage: [enclosed_social_links url="https://twitter.com" color="#446ade" textsize="22px"]Follow Us on Twitter[/enclosed_social_links]

As you can see in the above shortcode, I have a start tag, end tag, and content between them. This shortcode will be output as in the below image.

how-to-create-enclosed-shortcodes-in-wordpress-output

Now let’s understand this, so here again, I have used a callback function, pass parameter $attr in it and registered my shortcode.

Only the difference is, I have passed another parameter $content in my function. This is the parameter that holds the value for the content. And I just displayed it in my shortcode’s content.

Hope this article helps you to learn how to create different types of shortcodes in WordPress.

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top