WP Columnize — a Wordpress Plugin for Creating Columns in Posts
This Wordpress plugin allows you to easily create multiple columns within your posts. It’s perfect for breaking up large blocks of text in a magazine or newspaper‐style format. Formatting your content into a multi-column layout breaks the uniformity of a long post and adds visual appeal to an otherwise large block of text.
Whats more this plugin is incredibly user-friendly, as everything is controlled with CSS and 2 custom quicktags.
Example Output:
An Introduction
From this example here you can see that you can include virtually anything within your columns.
Additionally, each column in your post can have any number of paragraphs, headings, etc. The key is to keep the width of fixed elements (images, videos, etc.) within the width of each column.
Installing the Plugin
Installation of this plugin is very easy and using it is even easier. Just follow the installation instructions below.
Styling the Plugin
The width of these columns are set to 45% of the available containing space (the width of this post), and have a right-margin of 18px.
At this time, the plugin only allows for one set width for all columns. I plan to extend this plugin in future versions to allow the user to set the width of each column individually, effectively allowing for more than 2 columns in a section.
Using the Plugin
The plugin automatically installs two custom quicktag buttons in the Wordpress HTML editor, essentially giving you "point and click" of use. After typing your post text, or inserting images (like so) 
simply highlight the content you’d like in one column and click on the column button. Just repeat for the second column.
From this example you can see what’s possible with this plugin; giving you the ability to create a newspaper or magazine-style layout within your blog or specific posts. It’s easy to switch between multiple columns and full-width blocks of text such as this paragraph.
The formatting is controlled purely by CSS using two classes; "column-sect" and "post-column", allowing you to customize it any way you’d like. Simply add these two classes to your style sheet (style.css) and adapt them to your theme.
Installation
- Download the "
mish_wp_columnize.zip" folder, then extract. - Upload the uncompressed folder to your plugin directory (
wp-content/plugins). - Activate the plugin through your Admin Dashboard.
- Add the following classes to your style sheet: "
column-sect", "post-column" and set their values.
Parameters
None. Yet.
Usage
It’s recommended you use the HTML editor when writing posts with columns. The WP Columinzer plugin installs two quicktag buttons in the toolbar of HTML editor for your convenience.
To use: Simply wrap whatever you would like to appear in a column in the following tags: "[column][/column]". Do this for each column.
When you’ve determined your columns, wrap the entire column section of your post in the following tags: "[col-sect][/col-sect]".
I find the easiest way to accomplish this is to write out whatever it is I want to say, then highlight all the text in "Column A" and click on the "[column]" button. Do the same for "Column B". And then highlight both columns and click on the "[col-sect]" button. This will wrap the text in the correct tags.
To style: Style the "column-sect" and "post-column" classes in your stylesheet. Be sure to adjust your settings in your style sheet to accommodate for available width for your floated columns..
This is how they’re styled on this site:
div.column-sect {
clear: both;
display: inline-block;
overflow: auto;
}
div.post-column {
display: inline;
float: left;
margin-right: 18px;
text-align: justify;
width: 45%;
}
This results in two columns floated to the left with a right margin of 18px set. Additionally, their widths are set to 45% of the available (containing) space.
Both of these columns are wrapped in a containing div with a class of "column-sect" that clears all floated elements, allowing any element—floated or not—following the column section to start on its own line.
Note: a value of "inline-block" must be set on the containing div in order for it to display properly in IE6. Also, setting "display:inline" on ".post-column" prevents the doubling bug in IE6.
Example 1
How it’s used on this site.
[col-sect][column]<p>Something along the lines of this. This first column of text has just one paragraph of information.</p>[/column] [column]<p>While this second column of information has two paragraphs of information.</p> <p>As you can see, you can add any number of paragraphs you’d like.</p>[/column][/col-sect]
Example 2
Or you could put each element on its own line.
[col-sect] [column] <p>Something along the lines of this. This first column of text has just one paragraph of information.</p> [/column] [column] <p>While this second column of information has two paragraphs of information.</p> <p>As you can see, you can add any number of paragraphs you’d like.</p> [/column] [/col-sect]
Notes
This plugin has been tested using both the visual editor and the HTML editor in the dashboard and should work as expected. However there isn’t a quicktag button for the Visual editor.
The plugin also accommodates for the "<br />" tags WP adds when you hit "enter" while typing a post but extensive testing hasn’t been done to test for extreme circumstances.
It’s recommended to use the HTML editor on posts where you’d like to use a multi-column format.
Also, be sure to check the widths of any element you’re wrapping in the quicktags. At this time, only one width can be set for the columns (since it’s set in your stylesheet), but future upgrades should address this.
Safari Issue: For some reason, Safari chokes if a heading (<h1>-<h6>) starts a column and sits on its own line. (It doesn’t float the columns).
So this is fine:
<code>[col-sect][column]<h3>An Introduction</h3></code>
While this isn’t:
<code>[col-sect][column] <h3>An Introduction</h3></code>
This is something only noticed in Safari and only with headings, and only at the beginning of the first column.
Updates
Current Version: 0.6.5
Changelog:
- v0.5 : December 11, 2008 : Initial release
- v0.6 : December 13, 2008 : Added shortcodes and additional filtering.
- v0.6.3 : December 16, 2008 : Added buttons to HTML editor toolbar
- v0.6.4 : December 18, 2008 : Made forward-compatible
- v0.6.5 : December 24, 2008 : Fixed auto-install button option
Conclusion
I hope this comes in handy for someone when developing a theme or just for learning purposes. Whenever I develop a script, I intentionally try to break it, so I can spot areas of improvement. If you see any, feel free to let me know!
Reader Comments
→ Skip to Comment Form
plug-in is very good concept, but in conflict with BranfordMagazine 2.2 theme on my site (in “leadstory”)
It doesn’t seem to render two columns when viewed in the Safari browser. It might just be me…
[...] WP Columnize — a Wordpress Plugin [...]
@Sasa, I’ll look into that. Thanks for pointing it out!
@ Sam, I just noticed that. It does work in Safari; I have it set up on a devo site I use, but for some reason it’s not rendering 2 columns here. Could be a width-adjustment issue. Thanks for pointing it out!
@ Sam, I figured it out, although I don’t know why it was doing it. For some reason Safari was choking on the first heading “An Introduction”. Removing that floated the columns.
[...] WP Columnize [...]
very similar to: http://www.samburdge.co.uk/plugins/wp-post-columns-plugin
Thanks for the plugin. This may come handy on my site.
@ovidiu Yes, in the sense that it allows you to create columns in your posts or pages, but WP Columnize is a bit more user-friendly by creating one-click buttons and more flexible in that it allows the user to style the columns to their choosing using CSS classes.
@ Sasa: You’d have to set the styling different for the
post-columnclass in the your style sheet. Something along the lines of:ul#leadarticle .post-column {float:none;
margin: 0;
width: 100%;
}
This will only affect the
divswith a class of.post-columninside the lead story container on the main page. You would still set the styling for your.post-columnclass as explained above in this post.[...] martin(ish) § Blog: Post: WP Columnize — a Wordpress Plugin (tags: wordpress plugin layout) [...]
[...] 然后开始你的长篇大论吧，在需要分栏的内容两头使用“[column][/column]“”[col-sect][/col-sect]“，两个标签之间是文字内容，进入插件主页看详细举例。 [...]
[...] WP Columnize [...]
[...] WP Columnize [...]
[...] WP Columnize [...]
[...] WP Columnize [...]
[...] WP Columnize est un plugin wordpress extraordinaire, il vous permet en toute simplicité de créer dans vos articles ou vos pages, une présentation des plus réussit. Il peut être utile, lors d’une présentation de produit, de plugin ou d’autres événements tels qu’une nouvelle version d’un blog, d’utiliser les colonnes et ainsi épuré l’espace de votre article. [...]
Hey,
There thank you for the plug-in, It is just what I have been looking for. Your theme is incredible, is it available for download??
Nathan Cross
[...] WP Columnize [...]
[...] WP Columnize [...]
Super nice! Thanks so much for sharing your talent. btw I used Style Teaker v 0.11 and tossed your codey bits in there. Made it super simple for a super but simple fellow!
Happy New Year.
[...] WP Columnize [...]
[...] WP Columnize [...]
[...] a nice plugin (WP Columnize) that allows you to easily create columns for any post you desire. While it takes a little planning [...]
Hi, I enjoyed trying your plugin but found it broke the Event Calendar plugin and I could not fathom what the conflict was. Has anyone else brought this to your attention and why it is doing this…?
Thanks, I”m still hoping one day to use the plugin….
/mark
@Nathan: Thanks for the compliment! My current site design isn’t set up as a download-able WP Theme, but I plan on developing a few shortly!
@Mark: I have no idea why it should conflict with the Event Calendar plugin. No on else has brought to my attention and I don’t use the event Calendar plugin, so I can’t honestly even hazard a guess.
If you can provide some more details as to how it broke the plugin, or a link to a page, maybe I can help.
LOVE it. Thanks. Been wanting this for a couple years. Really appreciate it; I’ve got it in use on my personal blog, which finally looks and reads at it should.
Thanks so much for the great plugin! Works beautifully!
Hello,
I dont know how to use your plugin !!! can you tell me please my error?
[col-sect][column]the weather is nice[/column]
[column]wordpress is a cms[/column][/col-sect]
Best,
Alex
@Alex : Well, in the code provided in your comment, you’re missing the closing square bracket ( “]” ). Other than that I would need a bit more information.
Hello Martin ,
Thanks for you prompt reply.I did it but it doesnt work ? please send me an email where I can send you my user name and password of my blog.
Best ,
Alex
@Alex: I went to your site, and noticed you didn’t set any values for the column classes in your stylesheet. See #4 in the Installation section above. On this site, this is how I have them set:
div.column-sect {
clear: both;
display: inline-block;
overflow: auto;
}
div.post-column {
display: inline;
float: left;
margin-right: 18px;
text-align: justify;
width: 45%;
}
Add these values (or something similar) to your CSS stylesheet.
Hello Martin,
Sorry to borthering you again !!! I m a newbee as you can see !!! where I have to set your values on my stylesheet ?.
As you kow I use wordpress default theme.
Best,
Alex
@Alex: If you’re using the default theme, then you should have a file called “
style.css” located in your theme folder. Open that file and paste the following at the end of your file. This will add style definitions to the classes (.column-sect, and.post-column) that are added by these plugins.div.column-sect {
clear: both;
display: inline-block;
overflow: auto;
}
div.post-column {
display: inline;
float: left;
margin-right: 18px;
text-align: justify;
width: 45%;
}
Hello Martin ,
I think i m going to be sick !!! I past the code on css.style:at the end of:
/* “Daisy, Daisy, give me your answer do. I’m half crazy all for the love of you.
It won’t be a stylish marriage, I can’t afford a carriage.
But you’ll look sweet upon the seat of a bicycle built for two.” */
but it doesnt work !! I used to write a post your easier method and I noticed:
doesnt appears after [column]
Best,
Alex
@Alex: I went to your site and checked it out. You have type something longer than just 4 words. You have everything set up properly, but your text is too short. Try write an entire paragraph of text in each column and you’ll see it align properly.
The reason for this, by the way, is because the columns are styled to be 45% wide of the available space, but because your paragraphs are so short (4 words) they’re not expand the full 45% width available.
Thanks for the plugin, I’m trying to use it but I’m experiencing that when you have a lot of content on the post, when you click on “Publish” or edit the content and then click “Update Post”, everything disappears from inside the tinymce editor. The post is indeed updated and it appears on the site, but I can no longer access the post from editor. It’s just blank whenever I go to the edit page of that post.
I’m not sure if it’s because it has too much content or not, but once I deactivate the plugin and then go back to the edit page, all the content is there again. meaning, it must be something with the plugin I believe. Have you experienced this? And would you have a fix?
Please respond as soon as you can. I appreciate your help.
Thank you
@Ray
I just sent you an email in response, but wanted to post here as well. I tried to duplicate your issue and discovered it was the TinyMCE editor.
I created a post in the HTML editor using the shortcodes from this plugin and then switched to the TinyMCE editor to see what would happen. As I thought, the TinyMCE editor attempts to convert those tags and in the process removes all content wrapped within them.
So it’s best to only use the HTML editor when writing a post that utilizes the WP Columnize plugin.
The plugin seems to break the_excerpt() function. Instead of displaying the excerpt, it displays the entire content.
@Tom, I just tried to duplicate this using my archive listing and couldn’t replicate it. I did notice that any post that didn’t have a manual excerpt (written at the time the post was written), was displayed in it’s entirety, regardless if the plugin was used or not. However any post that had a manual excerpt showed fine. I’m not sure it’s the plugin that’s causing this issue. Can you show an example or provide greater detail?
Since the new update to WP 2.8.4 WP Columnize is messing up my posting and editing options like crazy. I think this plugin needs to be updated for the new wordpress.
@Michael Grills: I’m on WP 2.8.4 and haven’t noticed any issues with this plugin. Can you give a specific example of what’s happening?
Hi,
I have noticed a conflict with XSPF Player and WP Columnize.
For a strange reason I can not run both Plugins on the same Blog.
Maybe it’s because of the [ sign that XSPF Player use ?
[col-sect][column]
[xspf]_start(Playlist)[/xspf]
@ Stéphan: I”m not sure why there would be a conflict. I went to the XSPF plugin page and it says it’s only compatible up to WP v2.2, so perhaps there’s an issue there. The square bracket ( “[” ) used by both plugins is used to denote a shortcode macro for WordPress. Any plugin that uses the shortcode language has to use the square brackets, so I don’t think that’s causing the conflict.
What issues are you having exactly?
[...] WP Columnize [descargar] [...]
Howdy,
The plug-in has been working great, but after updates it now shows [column] in posts.
I’m not sure why that’s happening. This site is on the latest version of WP (2.8.6) and the plugin seems to be working fine. You may want to check any compatibility issues with other plugins.
[...] following is a test post to check the compatibility of WP Columnize with the latest version of WordPress (2.8.6). This post was created on 11/13/09 but is being [...]