How to Create Shortcode in WordPress with Multiple Parameters

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 custom shortcodes in WordPress.

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.

Type of Shortcodes

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

Create Custom Shortcode in WordPress

To create any type of shortcodes, It is important to register that shortcode by using the 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.

I 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.

Share it to the Community!

You May Also Like These shortcode Posts:

2 Replies to “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. 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.

Leave a Reply

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