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:

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.

[Total: 1    Average: 5/5]

Madalin Tudose

I`m a web developer. I build HTML Templates and WordPress Themes which are eventually released on ThemeForest under the DeliciousThemes brand.

Join the discussion

  1. Sarah C on December 22, 2010 at 9:57 pm Reply

    OHHH! THIS IS SO DAMN GOOD!

    This is what I really really needed!

  2. […] How to Create WordPress Shortcodes […]

  3. Eli on December 25, 2010 at 5:51 am Reply

    Thank you so much for this, couldn’t get it working on my own.

  4. dandy on December 25, 2010 at 7:23 am Reply

    Thanks i was looking for this CMS functionality.

  5. Listed on FAQPAL.com on January 4, 2011 at 5:14 am Reply

    How to Create WordPress Shortcodes…

    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 …

  6. […] Link […]

  7. Chris on January 11, 2011 at 2:41 pm Reply

    Wow this is incredibly helpful. I’ve been looking for information on how to implement short codes and your tutorial made it easy to understand. Thanks for the helpful information!

    1. Madalin Tudose on January 11, 2011 at 4:24 pm Reply

      Hi Chris,

      I`m glad I could help you! The tut is very simple and very easy to understand.

  8. […] Pročitajte više o ovoj temi… Podelite sa drugima: […]

  9. sven on January 12, 2011 at 5:39 am Reply

    Hi create tutorial. very clear and easy to understand. I have an audio player within my theme (same one that is used at tumblr.com for audio posts) and I am looking to implement a shortcode to call this as I am using hundreds of audio sentences. Any ideas or pointers in the right direction that you could give me?!! Madalin

    1. Madalin Tudose on January 17, 2011 at 9:24 am Reply

      Thanks for commenting…I don`t think that tumblr themes support shortcodes. keep searching and you`ll find a way to do it!

  10. Alicia St Rose on January 13, 2011 at 6:17 pm Reply

    This is such a simple concise and magical tutorial. Thank you so much for rocking my WordPress World!

  11. […] original del artículo: Our Tuts Traducción realizada por […]

  12. Masoud on January 17, 2011 at 8:27 am Reply

    hello , thank you for this post !

  13. […] original del artículo: Our Tuts Traducción realizada por […]

  14. […] artículo lo leí en inglés en DeliciousThemes.com Etiquetas: blog, cheats, code, codex, short, shortcode, wordpress Comparte esto en: Tweet […]

  15. Andreas on February 15, 2011 at 6:52 am Reply

    Thanks for sharing! Great and easy just as WordPress should be 🙂

  16. […] 29. How to Create WordPress Shortcodes […]

  17. Website Design Merseyside on April 9, 2011 at 4:46 pm Reply

    Thank you so much i am sure to use this in the near future

  18. Groho on April 26, 2011 at 2:02 am Reply

    wow, I should try this. It’s excellent.
    I’ll find other source to study shortcode.

  19. pozycjonowanie on July 6, 2011 at 3:53 pm Reply

    Thanks for this helpfull article.I really needed something like this.

  20. fred on July 26, 2011 at 4:41 pm Reply

    Thanks for this great tutorial .

  21. […] You can use it along with this: How to Create WordPress Shortcodes. […]

  22. Stuart on April 4, 2012 at 3:26 pm Reply

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

  23. andy on April 11, 2012 at 4:53 am Reply

    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]

  24. Brad Dalton on June 19, 2012 at 6:16 am Reply

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

    1. Madalin Tudose on June 22, 2012 at 5:18 am Reply

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

  25. Prithviraj on June 27, 2012 at 12:12 am Reply

    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…

  26. iShouterNet on February 28, 2013 at 7:07 am Reply

    Pretty handy mate. Tnx for this cool tricks..

  27. Supreme Factory on December 21, 2014 at 12:59 pm Reply

    50 FREE WordPress Shortcodes That’ll Convert Your Landing Pages:
    http://supremewptheme.com/supreme-shortcodes-free/

  28. Sana Ji on June 16, 2015 at 11:39 pm Reply

Leave a Comment

Your email address will not be published. Marked fields are required.