WordPress Tutorial – Adding a Button Shortcode

What are Shortcodes?

Shortcodes are part of the API within WordPress that allow the inclusion of certain kinds of content that can be attached to pages and posts within a WordPress website. They allow for simple tags to be added to display the special content without the use of adding HTML to the content editor.
For further information about shortcodes, please visit the WordPress Codex.

Default Shortcodes

WordPress comes with a number of different shortcodes built in, information about each one are listed below:

More detailed information about the specifics of these shortcodes are discussed in later blog articles.

Related articles:

Custom Shortcodes

Here at Clicky we are continuing to develop new shortcodes per project, and below is just one example which is used on most of the websites we build (including our own website):

Adding a Button Shortcode

Adding a bespoke shortcode for a styled button is quite simple to do within WordPress.  All you need to do is copy and paste the code (which you can find below) inside the functions.php and style.css file which is contained within the theme of the website.
Functions.php
function clicky_button($atts, $content = null) {
extract(shortcode_atts(array('link' => '#', 'target' => '' ), $atts));
return '<a class="button" href="'.$link.'" target="'.$target.'">' . do_shortcode($content) . '<span></span></a>';
}
add_shortcode('button', 'clicky_button');

Style.css (or alternative stylesheet that has been created)
a.button { background: #67addf; color: #fff; padding: 5px; float: left; margin: 0; }
a.button:hover { background: #569bcc; }

Please note, the styling can be completely modified to accommodate the website styling.
The first line below is the setup of the shortcode function, where we have called the function “clicky_button“, which can be changed to a specific function name if needed.

The “$atts” variable calls the code outlined further down in these instructions and the “$content” variable should be set to null, as we aren’t specifying any content.
function clicky_button($atts, $content = null) {


Secondly we will be setting up an array within the shortcode attributes (you can set as many items in the array as necessary). For this example we have used the options of “link“, which will serve as the button URL, and the “target” which will allow the button to be opened in a new window if required.
extract(shortcode_atts(array('link' => '#', 'target' => '' ), $atts));


In the third line we are returning the HTML of the button, along with the inclusion of the additional attributes. You will notice that within the HTML we have added in the attributes “$target” and “$link“. The “do_shortcode” function simply works out if a shortcode has been initiated, if not then it will display the wording of the shortcode within the page / post.
return '<a class="button" href="'.$link.'" target="'.$target.'">' . do_shortcode($content) . '<span></span></a>';

Don’t forget you then need to close the function.
}

The final step is to add the shortcode, and the first option when adding the array is naming what the shortcode will be referenced as. In this instance; if a user was to add the following shortcode it would display the button in the simplest form, which can be changed, depending on the shortcode being developed. The second option would be to call the function that has been developed above.
add_shortcode('button', 'clicky_button');

Once added to the functions.php file and uploaded to the website server, this will allow the implementation of buttons to both pages and posts without the need of any HTML (which can sometimes be temperamental within the visual editor). To display the shortcode within the page you can use the following statement (this statement will link through to the Clicky website and open the link within a new window):
Button Text

That’s it, you have now added a simple shortcode button within WordPress.

Written by Craig Farrall