How to create your own shortcode for WordPress?

By Faruque Ahamed Mollick

You have already used many plugins that provide shortcodes. To work with a shortcode you just need to place it inside one of your WordPress post or page and you will able to see the result after visiting that post or page. It is so interesting, whenever you put something inside the square brackets, you will see it converted into some other content. WordPress shortcode was introduced first in WP version 2.5.

Did you ever try to create your own shortcodes in WordPress? or did you ever think how to create shortcodes in WordPress?

In this article I am going to take you to a tour where you will learn how to create WordPress shortcodes from some simple code snippet.

You can put the codes I am going to give you in this article in your theme’s function.php file. If you wish then you can also put these codes in a separate file and include it in your them’s functions.php file.

Also there is another option available. You can create a separate plugin where you can put all these codes.

Creating a simple shortcode

It is very simple to create a simple shortcode within WordPress. Shortcode API works simply in a nice way. At first you need to create a callback function in WordPress that will run whenever the shortcode be used.

function codespeedy_shortcode_function() {
  return "Your simple shortcode";
}

Then you need to apply that callback function to a particular shortcode using the add_shortcode function so that it will be ready to use.



add_shortcode('shortcode_code', 'codespeedy_shortcode_function');

That’s all you need to create a simple shortcode.

Here is the complete code:

function codespeedy_shortcode_function() {
  return "Your simple shortcode";
}
add_shortcode('codespeedy_shortcode_code', 'codespeedy_shortcode_function');

Now display it within post or page

Now you need to display the shortcode that you have created. To show the working functionality of this shortcode you just need to put [codespeedy_shortcode_code] in your post or page and you will be able to see the result.

Create a WordPress shortcode with attributes

You will find several times that many plugins and themes providing shortcodes with attributes or parameters. For example [codespeedy_shortcode_code value1=”1″ value2=”2″]. You can see that you have to put some value in some attributes for these types of shortcodes.

Now I am going to show you how you can also create your own shortcode including parameters. I am going to give you a simple example from where you will understand easily.

Below is the complete code for creating shortcode with atts value:

function codespeedy_shortcode_func( $atts ) {
 $atts = shortcode_atts(
 array(
 'value1' => '1',
 'value2' => '2',
 ), $atts, 'codespeedy_shortcode' );

 return 'CodeSpeedy shortcode: ' . $atts['value1'] . ' ' . $atts['value2'];
}
add_shortcode( 'codespeedy_shortcode', 'codespeedy_shortcode_func' );

Now if you put the shortcode [codespeedy_shortcode] inside your post or pages, it will shows you the give result where the attributes contain default values:

CodeSpeedy shortcode: 1 2

If you put shortcode [codespeedy_shortcode value1=”5″ value2=”15″], it will shows you the below result which contain the given values within the attricutes:

CodeSpeedy shortcode: 5 15

[codespeedy_shortcode value2=”153″] will show the result:

CodeSpeedy shortcode: 1 153

If you don’t add a attribute in shortcode then it will show you the default value of that attribute. If you use shortcode without any attribute then all the attributes will take the default value.

I hope now you have understand from this article and from the code snippets how to create your own simple shortcode and also how to create WordPress shortcodes with attributes. I will be so happy if this article was helpful for you.

Leave a Reply

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