Create a WordPress Christmas box shortcode

WordPress shortcodes are a set of functions created inside functions.php, for creating macro codes for use in post content. As the name implies, a shortcode is a simple way to display complicated codes using instead, a shortened code.

In this tutorial, I`m going to show you how to create a nifty shortcode that will display a cute ‘Christmas alert’ box, made pretty by the magic of CSS.

WordPress shortcodes are extremely useful, especially in WordPress theme development! Your clients will love using your custom shortcodes, they make life easier.

Basically, the box is just a simple div that has a styled class assigned to it. You can name it whatever you want, in the following example I named it ‘xmas’. Alrighty, let’s do this!

First open functions.php and add the following php code:

function xmasbox($atts, $content=null, $code="") {
    $return = '<div class="xmas">';
    $return .= $content;
    $return .= '</div>';
    return $return;
}
add_shortcode('xmas' , 'xmasbox' );

The function named “xmasbox” creates a div class named “xmas”. In the last line (add_shortcode(‘xmas’ , ‘xmasbox’ );) we are defining the call of the function.

Now we need to style our xmas div. Add the following code to your style.css – replacing image/wreath-icon.png with your own file path. We used a cute wreath with a bow, 48x48px png, on a transparent background, you can download it from IconArchive.

.xmas    {
   background:url(images/wreath-icon.png) no-repeat scroll 15px 15px #EEF4D4;
   border: 1px solid #8FAD3D;
   color: #596C26;
   border-radius: 8px;
   -moz-border-radius: 6px 6px 6px 6px;
   -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
   font-size: 14px;
   line-height: 25px;
   font-weight: normal;
   font-family:Arial;
   margin-bottom: 27px;
   padding: 15px 15px 15px 80px;
   position: relative;
   width: 460px;   }

That’s it. Now you’re ready to use your custom shortcode in your posts and pages! To use your short code, simply add the following code and replace the dummy text with your content:

[xmas]dummy text[/xmas]

As you can see it is simply the word ‘xmas’ inside brackets, with your text in between. You can use this same principle to create multiple styles of boxes for your site! I always like to add unique shortcode boxes to match the custom themes I develop.

Like this tutorial? I would love to hear from you in the comments…

2 Comments

  1. Hey! Thanks for this tutorial 🙂 I didn’t use a Christmas icon for the alert box that I created for my site and I changed the border to dotted instead. Easy to follow, thanks again!

Leave a Reply

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