Published On: April 23, 2014
Author: Eric Oliver

Since version 2.5, WordPress allowed developers to use shortcodes to help non developers easily add code throughout their website. Now this modification has become a staple of WordPress development. Basically a shortcode is a set variable that calls functions and their helpers. Take a look at large plugins and themes to see how common they are and how they are used throughout the site. Learn from this and create your own.

When you create a plugin or a custom theme knowing how to create and add a shortcode could greatly help with your end result. In this article, we will explain how you can create your own shortcode and how to use it successfully throughout your website. Basically, teach a man to fish kind of thing.

A “Short” Example

In this example, we show you how to create a simple function and call it from your editor or code using the shortcode API built into WordPress. Remember, a shortcode is basically a function call so you should return your results not echo them.

Look at the following function we created for a contact module we created that is displayed on every page.

function display_contact() {
$html = '<h2>Contact Us</h2>';
$html .= 'It is absolutely FREE to contact us and get a quote on your project. Let us know what you need or view our previous work below.';
$html .= '<div class="col twelve btn btnsale">Get A FREE Quote</div><div class="col twelve btn btnprimary">View Our Portfolio</div>';
return $html;
}

Notice in our code, it is just a simple function that returns a result. Basically, our function will output a text string that links to our contact pages. This allows us to add a simple short code on every page we want the buttons to show on. You can see our result on our about page.

Add Your Shortcode

add_shortcode( 'contact', 'display_contact' );

That is it. Pretty simple. Now, in your WordPress editor or code you can just call this shortcode using [contact] or the do_shortcode function provided by WordPress.

Customizable WordPress Shortcodes

Fortunately, adding short codes does not end there. You can customize the response using parameters added with the shortcode. Although our function above does not use parameters to customize the result, we can still show you how to do it using dummy code.

function calculatenumbers($atts) {
extract(shortcode_atts(array('num1' => 1,'num2' => 2), $atts));
$result = $num1 + $num2;
return $result;
}

add_shortcode('addnums', 'calculatenumbers');

Using the simple code above, a shortcode of [addnums 5 10] will return a value of 15 since 5 + 10 = 15. If we left the parameters blank it would use our default 1 + 2 and give us a result of 3.

I know, our example is very simple, but using this you can create an advanced function with customizable parameters that will allow you or whomever you code for to easily add long functions and code to their site with just a few shortcodes.

Most plugins and new themes use shortcodes to function properly and make the life of their user easier. They also allow you to push your user into the right direction by supplying them with code that is not easy to mess up…something developers have been trying to accomplish since the beginning of code. Shortcodes and WordPress open many avenues for client and user interaction and helps keep your end result as you planned it.

Have any other tips? We would love to hear about them in the comments below. If you are in Mississippi, give our top Mississippi meetup groups for technology a look to see if they can help you get started.


Posted In:


About the Author

Eric Oliver

Director of Website Development

With over a decade of experience designing and developing websites, Eric has worked in every position of the agency ladder. He is fluent in multiple backend and front end programming languages and has written multiple international best selling plugins for WordPress. He has been part of or is still part of many startups. He is the Director of Website Development for Future Design Group and one of it's founding partners.