Jun 14, 2013

Wordpress: easy way to have colum shortcodes

Sometimes you have to create a new Wordpress template that requires columns. The hard way to achieve this is via CSS: you can somehow add HTML code to your posts and pages and then set the rules in your CSS files so they show as the columns.

The easyest way I found to achieve this is via a cool Wordpress plugin called Column Shortcodes. It lets you use a series of shortcodes so you can put many different column sizes in your pages with simply copying a shortcode. This way your posts are less messy and you don't have to touch it's HTML code.

Just download the plugin, install it and then you will be able to use all these shortcodes:

[full_width][/full_width]
[one_half][/one_half]
[one_half_last][/one_half_last]
[one_third][/one_third]
[one_third_last][/one_third_last]
[two_third][/two_third]
[two_third_last][/two_third_last]
[one_fourth][/one_fourth]
[one_fourth_last][/one_fourth_last]
[three_fourth][/three_fourth]
[three_fourth_last][/three_fourth_last]
[one_fifth][/one_fifth]
[one_fifth_last][/one_fifth_last]
[two_fifth][/two_fifth]
[two_fifth_last][/two_fifth_last]
[three_fifth][/three_fifth]
[three_fifth_last][/three_fifth_last]
[four_fifth][/four_fifth]
[four_fifth_last][/four_fifth_last]
[one_sixth][/one_sixth]
[one_sixth_last][/one_sixth_last]
 
 
Remember to put your text between the tags. For example if you want a left text that is in a 2/3 column and a right column that has 1/3 your post should look like:

[two_third]This is my left column text[/two_third]
[two_third]This is my right column text[/two_third] 


Just make sure you use the corresponding tags: if you use one_third then you should use two_thirds if you want to put something in the remaining text. Of course you could nest another column set inside a column set like:

[two_third][one_half]Hello world[/one_half][one_half_last]Lorem ipsum[/one_half_last] [/two_third] 
[one_third_last]Just another text[/one_third_last]
...

By the way, the "_last" word at the end of the tag just makes the column stick to the right, or that's what I guess looking at the CSS provided by the plugin.

Have fun with the columns :D

No comments:

Post a Comment