shortcodes-thumbnail

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 wordpress 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.

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

success How to Create Wordpress Shortcodes

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:

boxes How to Create Wordpress Shortcodes

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:


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

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

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.

Written by Madalin Tudose

Madalin Tudose is a web designer and developer who loves to inspect websites for new designing techniques and trends. He`s the founder of Ourtuts, where he blogs about anything related to web development.

  • http://www.ishoutnet.com iShouterNet

    Pretty handy mate. Tnx for this cool tricks..

  • Prithviraj

    I am Trying to add Shortcode but There is no effect

    I have add function code in functions.php & add Shortcode with add_shortcode() function but cant get effect in my POST..

    Is any files that i have include in my header.php file to use short code…

  • http://wpsites.net Brad Dalton

    Great tute. I know you can do this using css code but you don’t gte the shortcodes to use in your pages

    • http://www.OurTuts.com Madalin Tudose

      Nowadays shortcodes should be included in every wordpress theme, because is easy and comes in very handy when writing content for posts!

  • http://www.redtemptation.in andy

    hey!! nice tutorial….

    i tried it but some problem….

    I tried 2 Column Shortcodes and a paragraph after it….

    but if the last (2nd) column contains the lesser text than the 1 column…. then following paragraph text flows below 2nd column…

    help!!!! [hope i could explain it better]

  • http://www.haizdesign.com Stuart

    Perfect! Thanks so much for sharing, and great examples too.

  • Pingback: 16 Essential WordPress Plugins Every Blog Must Have 2012 | MLINKS44.COM

  • http://buydrugonline.org fred

    Thanks for this great tutorial .