Hi Dean, Glad you like the tutorial! Right now our …
Posted on 19. Sep, 2010 by admin in Plugins, Wordpress
Comment posted Adding Column Layout Shortcodes to Your Wordpress Theme by Pamela.
Hi Dean,
Glad you like the tutorial!
Right now our plan is to do individual tutorials for each of our Awake shortcodes. Then we’ll do a tutorial at the very end explaining how to organize them together into one plugin and add the WYSIWYG popup.
Pamela also commented
- Hi Adrian,
In that case you will want to use the pure html versions of the columns and not the shortcodes.
You can see examples of this markup here:
http://themes.mysitemyway.com/infocus_html/column_layouts.html
- You’re Welcome Kwame!
- You’re Welcome Lalo!
- Hi Wam3,
I haven’t seen that before.
Have you tried deactivating all other plugins? - If you installed the plugin, you should not need to change anything in your theme.
Recent comments by Pamela
- Adding Versatile Button Shortcodes to your Wordpress Theme
Yes, it is included. - Adding Versatile Button Shortcodes to your Wordpress Theme
Thanks Ali! - Adding Versatile Button Shortcodes to your Wordpress Theme
Hi Paul,The only thing that could cause that is the code in “Step #4 – Disabling Wordpress wpautop and wptexturize filters.”
Try removing those lines of code and see if the line breaks disappear.
- Adding Versatile Button Shortcodes to your Wordpress Theme
Thanks Sachin,
Glad you like the buttons! - Adding Versatile Button Shortcodes to your Wordpress Theme
You’re welcome Manu! We’d love to see it when you’re done.
Related Tutorials
Premium
Dean
20. Oct, 2010
Excellent tutorial.
Perhaps the next could be how to make this work in the WYSIWYG editor as you have with Awake theme
Pamela
21. Oct, 2010
Hi Dean,
Glad you like the tutorial!
Right now our plan is to do individual tutorials for each of our Awake shortcodes. Then we’ll do a tutorial at the very end explaining how to organize them together into one plugin and add the WYSIWYG popup.
Matt
28. Jun, 2011
I would LOVE a tutorial on how to group multiple shortcodes into a popup in the TinyMCE editor.
Paul
29. Oct, 2010
Thanks very much for this tutorial. Very useful.
Pamela
29. Oct, 2010
You’re welcome Paul! Glad you like it!
wparena
04. Nov, 2010
I knew how to make column but your tutorial have detail …well explained ..:)
Pamela
06. Nov, 2010
Thanks wparena!
Drew McManus
06. Nov, 2010
This is fantastic guys, it works perfectly in my custom theme!
Pamela
06. Nov, 2010
Glad it’s working for you Drew!
Drew McManus
06. Nov, 2010
Any plans on making additional plugins/tuts for the jQuery, style, and tooltip functionality?
Pamela
06. Nov, 2010
Hi Drew,
Yes, we do plan on creating tutorials and standalone plugins for each of our shortcodes.
Drew McManus
06. Nov, 2010
Fantastic, looking forward to it. If you have any sort of time line, I’d love to know about it.
Pamela
10. Nov, 2010
Unfortunately we don’t have a time frame at the moment, but we will announce it on the support forum when it’s out.
Illusiv
10. Nov, 2010
Awesome Tutorial. Thanks for that!
Pamela
10. Nov, 2010
You’re welcome Illusiv!
ady
18. Nov, 2010
hi
i tired the plugin it seems not working on front-end i just see shortcode
Pamela
20. Nov, 2010
That shouldn’t happen. Are you pasting in the examples above?
ady
18. Nov, 2010
buttons plugin working fine rendering output please help with column plugin do i have to make changes on my theme side
Pamela
20. Nov, 2010
If you installed the plugin, you should not need to change anything in your theme.
Wam3
07. Dec, 2010
For some reason it works when I preview a post, but when I publish it I get a 404 error? Have you seen that before?
W
Pamela
12. Dec, 2010
Hi Wam3,
I haven’t seen that before.
Have you tried deactivating all other plugins?
Lalo Marquez
15. Dec, 2010
Great!! Thank you for including the installable plugin, you’re the man!!
Pamela
02. Jan, 2011
You’re Welcome Lalo!
Kwame
25. Dec, 2010
Thanks so much for this, the code has been really useful \!
Pamela
02. Jan, 2011
You’re Welcome Kwame!
Adrian
31. Dec, 2010
Hi Pamela,
i want to ask about this column. Can I place it on the index.php? I mean, I want to put this code not on post but on homepage file.
Pamela
02. Jan, 2011
Hi Adrian,
In that case you will want to use the pure html versions of the columns and not the shortcodes.
You can see examples of this markup here:
http://themes.mysitemyway.com/infocus_html/column_layouts.html
Penina
18. Jan, 2011
I installed this plugin and your buttons shortcodes plugin, and both of them deactivated my Slideshow Gallery plugin. My gallery works by inserting a shortcode on a page or post. The gallery plugin I use can be found at the wordpress.org site:
http://wordpress.org/extend/plugins/slideshow-gallery/screenshots/
Just wanted to let you know. There’s another free columns plugin, like yours (WP Post Columns), and I’m using that one now instead, even though it hasn’t been updated since late 2010 it still works just fine. The good thing is that it doesn’t disable my slideshow gallery when I install it. I hope you guys work out the kinks because your shortcodes plugins are cool. I’ll try them again if they’re fixed.
Vladimir
20. Jan, 2011
Very useful!!! Thank you very much! works great!
empfx
23. Jan, 2011
Hi, thanks for taking the time out to share such great code. My problem is when I use the one_fourth shortcode the columns are all vertical and not lining up next to each other, is there anything in my CSS code I need to add or delete to make these line up properly? Thanks again, mega appreciated!
empfx
23. Jan, 2011
My apologies I have figured out the solution to my problem and thought I would share. I am knew to wordpress so just entering the shortcode itself was’nt enough, each column needed to be in a seperate div and the last column code needed the word “last” appended to it. Hope this helps someone, thanks again for the great shortcodes.
Lita
24. Jan, 2011
Hi empfx, Glad to hear that the problem is fixed and thank you for sharing the solution!
Brett Widmann
07. Feb, 2011
This is a great tutorial! I love the final outcome. Thanks.
Ed
19. Feb, 2011
Good stuff! Will try this out soon… and the plugin version.
Saintdo
01. Mar, 2011
Cool! I works very well!
Thanks so much!
Patrick
02. Mar, 2011
This tutorial is awesome! Added column shortcodes (something I’ve wanted to do for a while) in minutes!
Im going to check out some of your other posts, keep up the good work!
Newby
17. Mar, 2011
Thanks for the detailed description.
I have just one question Step 1,3,4 code all go into the functions.php?
Jean-Pierre
23. Mar, 2011
How would I incorporate that “back to top” style divider? I can style it but getting it into the shortcode plugin would be a great addition
Brian
29. Mar, 2011
I can’t tell you how much time this tutorial saved me. Very well-written and organized. This is premium nettuts+ tutorial material
One question – if I use this code in a theme I’m creating for resale on ThemeForest, am I required to give you attribution? If so – where do I put the attribution?
Thanks again!
Brian
Brian
29. Mar, 2011
Haha, wow. I I had scrolled down 3 more inches I would have seen your Terms of Use blurb which totally answers my question. Thanks again!
Lita
29. Mar, 2011
Thanks for the compliment Brian. Glad you’ve found our tutorial helpful!!!
Natalie
01. Jun, 2011
Thanks for posting this code and tutorial – I’d love to be able to use it, but I am getting stymied at Step 1. When I paste the code into functions.php and try to update the file, I get the following error:
Warning: Cannot modify header information – headers already sent by (output started at /home1/xxx/public_html/websitename/wp-content/themes/themename/functions.php:9) in /home1/xxx/public_html/websitename/wp-admin/theme-editor.php on line 99
Does this mean anything to you? I’m not advanced enough to figure it out…
Tim
24. Jun, 2011
Dear Sir,
Tim here.
If your not using it as a plugin how does the shortcodes.php file know what css files to call?
And also, how can you call the shortcodes.php file from another functions.php page.
Thanks for your time, great article btw.
Tim
FashionWriter
11. Aug, 2011
I was very happy to come across this tutorial. The designer of the theme I’m using had the width for their columns in pixels which would make the last one appear funky at times. I wouldn’t have been able to figure out the percentages, so this was perfect. And now they work perfectly.
I added other shortcodes you have here to the few existing ones I had in the shortcodes php file for my theme. All of them work except for the three_fourths one. I’ve double checked the php and the css. It’s right, but it just won’t be called. I don’t understand what could be wrong. I don’t necessarily need it – I would be fine with just the one_fourth – but it’s driving me nuts that all the others are being called fine and not that one. Any ideas?
Pixelrage
20. Aug, 2011
Is this article still valid in Aug. 2011? I’m really interested in this but am a little afraid after reading some of these comments!
Lilliana Crevier
24. Aug, 2011
Look forward to reading more from you in the future,keep up the good work.
AJ
30. Aug, 2011
The CSS was very helpful, thanks!
Pasquale
07. Sep, 2011
I just installed the plugin on a wordpress site I’m building. It seems to be doing something funny on the video page when used like this:
[one_half]
Solo Work
[youtubegallery]
http://youtu.be/aqkX0xf9Uw4
[/youtubegallery]
[/one_half]
The [youtube] is part of another plugin. Is it possible to nest another plugin function within yours? For now, it’s spreading it out into three thumbnails as if [youtubegallery] and [/youtubegallery] are their own clips.
Ash Robbins
30. Sep, 2011
Thanks for this tutorial, it’s exactly what I needed and works perfectly!
Penina
01. Oct, 2011
The columns shortcode plugin is fantastic! Thank you for the tutorial.
tristar1983
18. Oct, 2011
Just what I’m looking for, you’ve save me a bit of time creating this plugin. Thanks again
William
21. Oct, 2011
Been trying to follow & get this to work on multiple blogs but havent had any success…the plugin works great (thank you!) but hard-coding is not…
Tried on both a custom theme running 3.2.1, and also a plain old, right out of the box vanilla install….
is something in the new versions not allowing this? Thanks!
www.creditcardflyers.com
27. Oct, 2011
I wonder if I can create a static website with wordpress? Does anybody know where I can find a detailed video tutorial on how to create it from beginning to the end ?
tigroocom
20. Nov, 2011
Hi, great post – really useful – thanks. Noticed that that css for four fifths should be a bit bwider, i.e. .four_fifth{ width:79.2%; }
Mike
29. Nov, 2011
GREAT!!!!
thanx for the excellent tutorial. Works for me.
Sascha
30. Nov, 2011
Hello There, nice one! I love your tutorial the code works fine form me.
I have a problem with one of my other plugins i use. I have installed a plugin called digg digg which is adding a floating social button box right beside my content, Now if i activate your columns plugin the box is gone.
http://www.diggdigg2u.com/
I am not that familiar with php. So i would love to get a bit of help.
I have allready emailed the digg digg plugin guy but i he did not email me back.
Do you think you can help me with that ?
Sascha
Julie
09. Dec, 2011
Hi,
I love your shortcodes! I purchased both of your themes and just installed this plugin on a third website I’m currently working on.
The website also uses SimplePress forum plugin. When I activate your plugin it adds unwanted paragraphs everywhere within the forum.
Any idea why?
Thanks in advance for your help!
Julie
Christy
19. Dec, 2011
Great tutorial! And, great plugin for Wordpress
Is there a way to modify, or add to the css to allow for a border between the columns?
I’d like to add a visual separator if possible – it would be great to have it for all, but I’m currently using the 2 column version
fractalbit
29. Dec, 2011
Thanks for the great and useful tutorial. I have a question though.
I do not understand the need for the “webtreats_formatter” function. I assume It only works if you wrap your shortcodes inside a [raw][/raw] shortcode but nowhere in the above code does this happen.
So what is the purpose of this? Is it optional and left to the user to decide when and how to use it?
Lynn
31. May, 2012
Thank you so much for this wonderful solution that’s so elegant, works without any problems, and is easy to implement and use. I’m so happy!!
hamid
05. Jun, 2012
Cool! I works very well!
DJIO
14. Jun, 2012
Thanks a bunch!
Awesome material!!
=)
Trackbacks
22. May, 2013