How to Create Shortcode in WordPress with Multiple Parameters

Creating shortcodes in WordPress is super easy. But before that, you must know the types of shortcodes so that you can create the correct shortcode to make your work easy. WordPress shortcode has 3 types:

  • Self-Closed Shortcodes
  • Shortcodes With Attributes/Parameters
  • Enclosed Shortcodes

Create Custom WordPress Shortcode | add_shortcode()

You can create WordPress shortcode with add_shortcode() function, this function register the shortcode with WordPress.

add_shortcode( 'shortcode_name' , 'callback_function' )

This function accepts two parameters:

  • shortcode_name = Name of your shortcode.
  • callback_function = function that should be execute to display output.

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]

I have written an article about create shortcode to display posts from custom post types, where I have outlined the use of these self-closed shortcode.

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.

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"]

I have written an article about creating a shortcode to display posts from categories, where I have outlined the use of multiple parameters and attributes in shortcode.

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 returned the output.

Create Enclosed Shortcodes

Enclosed Shortcodes, is a type of shortcode 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]

With the help of the enclosed shortcodes, you can easily create nested shortcodes.

I have written an article about creating nested shortcodes, where I have outlined, creating a shortcode inside shortcode by using enclosed shortcodes.

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.

Owner of diveinwp.com, solely responsible for creating helpful, informative content about WordPress, a fulltime WordPress developer with 8+ years of hands-on experience in WordPress design and development.

2 thoughts on “How to Create Shortcode in WordPress with Multiple Parameters”

  1. hi
    can you tell me please how to make short code clickable for fronted users dynamically if fronted user add his mobile number so other users can directly text him trough whats
    can you show me some short code or give example so i will use your methods
    thanks

    1. Bhuvnesh Shrivastava

      Hi Maria,

      Do you want to show a mobile number via a shortcode in the frontend and it should be clickable?. And frontend users can text him through Whatsapp?.

      Am I getting this correct? if yes, then you can set up your shortcode output with an anchor tag along with Whatsapp API “https://api.whatsapp.com/send?phone=phonenumber_with_country_code”

      If you are looking for something else, then please mention it clearly. I will try my level best to make it possible for you.

Comments are closed.