How to make your own custom Shortcodes in WordPress

March 12, 2015 in Development, Shortcodes

Shortcodes in WordPress are awesome, because they give you the ability to output large amounts of code by using a simple tag in the content of your site. This can free up your users from having to write code, and let them focus on creating good content. You can save time spent on website maintenance by creating shortcodes that output content that is commonly used or heavy on code. You can even have shortcodes that have configurable options, using parameters that you specify. I’ll show you how to make your own simple shortcodes.

You can create shortcodes in 3 ways:

Simple
[button]

With Parameters
[button cssclass=”blue”]

Content Inside Shortcode
[button cssclass=”blue”]Click Here[/button]

---

Creating a Simple Shortcode

In your theme folder, open functions.php and paste in the following code:

function sc_button() {
    $ret_content = '<a href="#" class="btn">Click Here</a>';
    return $ret_content;
}
add_shortcode('button', 'sc_button');

This code first declares a function called “sc_button.” Inside the function, we declare a variable called “$ret_content” which will store all the HTML code we want to output. After we assign the $ret_content variable, we return it.

Now, once you save the file you’ll be able to use the [button] shortcode in your content, and it will output the HTML string we set above in our function:

<a href=”#” class=”btn”>Click Here</a>

---

Creating a Shortcode with Parameters

Now we’re going to expand on the simple shortcode, and enable users to add additional CSS classes to the button. To enable parameters in shortcodes, we need to add “$atts” to the function as an argument, and extract those arguments as an array. Then we can use it in the output variable:

function sc_button($atts) {
    extract(shortcode_atts(array(
      'cssclass' => '',
    ), $atts));

    $ret_content = '<a href="#" class="btn '.$cssclass.'">Click Here</a>';
    return $ret_content;
}

add_shortcode('button', 'sc_button');

Notice at the beginning of the function we set the default ‘cssclass’ to be empty, in case this parameter isn’t passed with the shortcode.

Now, when a user enters the shortcode and adds a new CSS class name:

[button cssclass=”blue”]

it will be appended to the class of the button:

<a href=”#” class=”btn blue”>Click Here</a>

---

Content inside the Shortcode

We can extend the shortcode even further, so users can enter what they want the button text to say. To make it so shortcodes can encapsulate content, we need to add “$content” to the function arguments and the output variable:

function sc_button($atts, $content = null) {
    extract(shortcode_atts(array(
      'cssclass' => '',
    ), $atts));

    $ret_content = '<a href="#" class="btn '.$cssclass.'">' . do_shortcode($content) . '</a>';
    return $ret_content;
}
add_shortcode('button', 'sc_button');

Now, when a user enters the shortcode, they can specify what text will be shown on the button:

[button cssclass=”blue”]My Custom Button Text[/button]

But! We need to use a closing tag for the shortcode —  [/button] — this will end the $content variable.

Now the button shows with the custom text applied:

<a href=”#” class=”btn blue”>My Custom Button Text</a>

 

This is just the tip of the iceberg for what you can do with WordPress shortcodes. Have fun and happy coding!