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.
OHHH! THIS IS SO DAMN GOOD!
This is what I really really needed!
[…] How to Create WordPress Shortcodes […]
Thank you so much for this, couldn’t get it working on my own.
Thanks i was looking for this CMS functionality.
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 …
[…] Link […]
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!
Hi Chris,
I`m glad I could help you! The tut is very simple and very easy to understand.
[…] Pročitajte više o ovoj temi… Podelite sa drugima: […]
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
Thanks for commenting…I don`t think that tumblr themes support shortcodes. keep searching and you`ll find a way to do it!
This is such a simple concise and magical tutorial. Thank you so much for rocking my WordPress World!
[…] original del artículo: Our Tuts Traducción realizada por […]
hello , thank you for this post !
[…] original del artículo: Our Tuts Traducción realizada por […]
[…] https://deliciousthemes.com/how-to-create-wordpress-shortcodes/ […]
[…] artículo lo leí en inglés en DeliciousThemes.com Etiquetas: blog, cheats, code, codex, short, shortcode, wordpress Comparte esto en: Tweet […]
Thanks for sharing! Great and easy just as WordPress should be 🙂
[…] 29. How to Create WordPress Shortcodes […]
Thank you so much i am sure to use this in the near future
wow, I should try this. It’s excellent.
I’ll find other source to study shortcode.
Thanks for this helpfull article.I really needed something like this.
Thanks for this great tutorial .
[…] You can use it along with this: How to Create WordPress Shortcodes. […]
Perfect! Thanks so much for sharing, and great examples too.
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]
Great tute. I know you can do this using css code but you don’t gte the shortcodes to use in your pages
Nowadays shortcodes should be included in every wordpress theme, because is easy and comes in very handy when writing content for posts!
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…
Pretty handy mate. Tnx for this cool tricks..
50 FREE WordPress Shortcodes That’ll Convert Your Landing Pages:
http://supremewptheme.com/supreme-shortcodes-free/
Your information is perfect
http://crackbay.com/driver-toolkit-8-4-license-key-crack.html