How to Create WordPress Shortcodes

WordPress Shortcodes are very useful, especially in wordpress theme development. People who buy themes aren`t experts in web design, so a shortcode will be very useful.

But what is a shortcode? As the name says, a shortcode is a simple and elegant way to display complicated codes using just a word.For example: Imagine that you want to insert inside a post a nice info-box. You have to create div-classes after div-classes and finally you make it. A shortcode gives you the possibility to do this just adding “[information]lorem ipsum[/information] . That`s wicked, don`t you think?

WordPress shortcodes are a set of functions created of course inside functions.php (which you can find it in your WordPresss theme folder) for creating macro codes for use in post content.I`m going to show you how to create some nice boxes powered by a bit of CSS3 and how to split content in 2 columns. Then, you can extend it in 3,4 and how many columns you want.

Although nowadays shortcodes are being replaced by fancy page builders, knowing how to build one could save you a few hours of searching for a plugin solution, if your webhosting allows you to use it(I’m speaking here about the managed WordPress hosting services which are a bit restrictive when it comes to plugins. Luckily, I found DreamPress to do the job pretty well and I can use whatever themes or plugins I want).

Let`s start with the box. I want to make a green Success Box which will look like this:

The box is just a simple div which has a class assigned, named whatever you want.I named it success. The class has assigned a style. First step, open functions.php (if you don`t have a file inside your theme`s folder, create one) and add the following php code:

function successbox($atts, $content=null, $code="") {

	$return = '<div class="success">';

	$return .= $content;

	$return .= '</div>';

	return $return;

}

add_shortcode('success' , 'successbox' );

As you can see above, the function named “successbox” creates a div class named “success” . The last line, “add_shortcode(‘success’ , ‘successbox’ );” is defining the call of the function. When you`ll use it, you`ll add inside your posts inside the brackets the word success . “successbox” is the name of the function.

Now let`s create the style. You first want to download the okay image.Open your style.css file and add the next code:

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

Now, to call the code inside your posts, add the next lines and replace the dummy text with your content:

[success]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [/success]

Using the same principle, you can create multiple boxes for multiple use:

How to create 2 Column Shortcodes

If you need to know how to split the text in 2, 3 or more, here`s how.We`ll begin as above with the wordpress function but this time will be 2 functions.We`ll create a function called “one_half” and another one called “one_half_last” . We`re doing this because we want to create 2 different classes with different styles.So, here`s the functions:

function one_half( $atts, $content = null ) {

   return '<div class="one_half">' . do_shortcode($content) . '</div>';

}

add_shortcode('one_half', 'one_half');

function one_half_last( $atts, $content = null ) {

   return '<div class="one_half last">' . do_shortcode($content) . '</div>

   <div class="clearboth"></div>';

}

add_shortcode('one_half_last', 'one_half_last');

We assigned the class “last” to the second function because we want to float it to right.In case you want to insert other shortcodes inside another shortcode, you have to call the “do_shortcode()” like I used it above.

The style for the 2 classes is:

.one_half { width:48%; padding-bottom: 20px;position:relative; margin-right:4%; float:left; }
.last { margin-right:0 !important; clear:right; }

Here`s an example of the 2 columns shortcode applied to my content:

In conclusion, shortcodes are made to make your life easier. Is easy to create them and very easy to use them. If you want to know more about shortcodes, access the Shortcode API.

I hope the tutorial was clear and you learned something today! If you have problems, don`t hesitate to tell me by commenting on the post.