Create a WordPress Christmas box shortcode

This tutorial was originally published on April 27, 2012 – Updated Jan 19, 2024

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.

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, or your functionality plugin 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 my alert message text with your content:

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

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…

This tutorial was originally published on April 27, 2012 – Updated Jan 19, 2024