Shortcodes Rock!
Shortcodes are a very useful tool once you know what you’re doing with them; they can provide additional options and open up new possibilities for saving time when you are editing your posts/widgets. You can use them to add a non-standard element to your post, or to generate a specified HTML structure instantly using one word instead of typing the full HTML manually every time.
For example; if we’re editing a new post for our blog and want to add a nice button, we can just use add the
[button]shortcode in our text. Then, the HTML structure that we’ve specified in the button shortcode function will be added into our post content, and any pre-prepared CSS styles will take care of the button’s appearance. It's a very simple and user-friendly solution.
Not that there’s anything stopping you typing the HTML structure manually every time, but doing so is inconvenient, time-consuming, and there’s always the risk that we’ll forget to close an HTML tag which will break our page layout and wastes more time to fix.
Shortcodes are also useful for adding repeating elements (i.e. text fragments or graphics, lists, blocks with code, texts, quotes, tooltips). In our GavernWP framework, we implemented a shortcode button, which is used to add this type of shortcode to the post/page content.
Shortcode attributes
Most shortcodes include an option to add attributes, which will have an influence on the shortcode’s behavior, changing the way the shortcode works. Attributes are added to a shortcode in much the same way as attributes are added to HTML code, using the following syntax:
attribute="value"
Please remember that only letters and underscores – "_" are permitted to be used in attributes.
Making Your Own Shortcode
It's time to create the first shortcode in your WordPress theme. As an example we'll create a simple shortcode which will create a Facebook “Like” box with some attributes to specify the box’s appearance.
The default code to display the likebox with some parameters added will look like this:
<div class="fb-like-box" data-href="https://www.facebook.com/gavickpro" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div>
As well as this basic code, we’ll also need to add a Facebook script for our box to work appropriately (it's recommended to add the script after the opening
tag), so we should add this script to an appropriate section; we recommend using your theme’s header.php file.<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_EN/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Now we have to create our shortcode function; to do this we’ll add the following code to our functions.php file:
if(!function_exists('gk_likebox')) {
function gk_likebox($atts) {
// shortcode attributes
extract(
shortcode_atts(
array(
"width" => 235,
"height" => 268,
"url" => 'https://www.facebook.com/gavickpro',
"color" => 'light',
"faces" => 'true',
"border" => 'false',
"show_header" => 'false'
),
$atts
)
);
$output = '';
$output .= '<div class="fb-like-box" data-href="'. $url .'" data-colorscheme="'. $color .'" data-height="'. $height .'" data-width="'. $width .'" data-show-faces="'. $faces .'" data-header="'. $show_header .'" data-show-border="'. $border .'"></div>';
return $output;
}
add_shortcode('fb_like_box', 'gk_likebox');
}
The code begins with a condition that makes sure that a function with the same name is not already available. If not, then our code will create the gk_likebox function. Once created, we may use the base WordPress shortcode_atts function to add the default values for our attributes. Next, we should define the output variable with the HTML structure for the likebox button – but instead of html parameters we should use variables from our shortcode so that they may be replaced within the shortcode. Now we can add our shortcode to the available shortcodes using the add_shortcode function.
With the function and the output defined, and the shortcode added to the available shortcodes, it’s now possible to use the shortcode in our post content using the following syntax:
[fb_like_box]
; the effect should look something like this:
We can also add some attributes to redefine the shortcode settings:
fb_like_box border="true" width="320"
to change it’s appearance.
Note: In the latest version 4.0 of WordPress the extract function is not necessary for the shortcode to work, so we can change our shortcode function content into:
$a = shortcode_atts( array( "width" => 235, "height" => 268, "url" => 'https://www.facebook.com/gavickpro', "color" => 'light', "faces" => 'true', "border" => 'false', "show_header" => 'false' ), $atts ); $output = ''; $output .= '<div class="fb-like-box" data-href="'. $a['url'] .'" data-colorscheme="'. $a['color'] .'" data-height="'. $a['height'] .'" data-width="'. $a['width'] .'" data-show-faces="'. $a['faces'] .'" data-header="'. $a['show_header'] .'" data-show-border="'. $a['border'] .'"></div>'; return $output;
We hope this short guide helps you find your feet and start creating your own shortcodes; for additional reading and if you’re interested to find quick and simple way to create a shortcode cache, check out this article.