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… (Continues below.)

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” use. After typing your post text, or inserting images (like so) earth_globe_sm 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 and adapt them to your theme.

Installation

  1. Download the “mish_wp_columnize.zip” folder, then extract.
  2. Upload the uncompressed folder to your plugin directory (wp-content/plugins).
  3. Activate the plugin through your Admin Dashboard.
  4. 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

You can put columns on one 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]

Example 2

Or you could put each element on its own line. (Easier to read your markup this way.)

[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 attempts to accommodate 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, as the TinyMCE editor will strip the
/
tags.

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:

[col-sect][column]<h3>An Introduction</h3>

While this isn’t:

[col-sect][column]
<h3>An Introduction</h3>

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

First the Article,
Now the Comments

The individual views expressed within are those of the respective commenter and are not reflective of my own or my clients’. 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…

@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.

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-column class 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 divs with a class of .post-column inside the lead story container on the main page. You would still set the styling for your .post-column class as explained above in this post.

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

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.

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?

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.

FYI, I noticed some very strange spacing at the head and foot of the columns that seemed to come from extra [p] tags around the columns’ [div] tags when the columns got written. I had to add the following to the filters to get them to go away.

/**
 * Hitting "enter" once after closing a [column section] forces a [p] tag at the beginning of the section
 * This should remove the errant [p] tag and force it after the section.
 */
$col_content = preg_replace ( '@@', '', $col_content );
$col_content = preg_replace ( '@(|)@', '', $col_content);
$col_content = preg_replace ( '@(|) (|)@', ' ', $col_content);
$col_content = preg_replace ( '@(|)(|)@', '', $col_content);

You may want to include them with the other filters at the bottom of the file: wp-columnize/mish_wp_columnize.php

Just wanted to give you a heads-up. I just tried this in 2.9.2 and, while it worked, it broke Lightbox 2 (and any alternative I tried, ThickBox, SlimBox, FloatBox, etc). Not quite sure what the problem might be. As soon as I deactivated it, the lightwindow started working again. Might be something worth looking into.

@malevola: Thanks, I’ll look into it!

@doc: Thanks for pointing this out. I’m not sure what could cause a conflict, but I’ll look into it.

Hello, thank you for the plugin, I followed your instructions and it worked perfectly so thank you, you rock :)

@Emma, thanks! : )

Cool plugin, very useful. However, I’m having an issue with this page:
http://fgmea.org/?page_id=43
In IE7 it looks as expected-an image in the left column, a list of links in the right column
In Firefox it’s all in one column. Any ideas?

Here’s my code from the HTML editor for this page:

FGMEA Newsletters

[col-sect]
[column][/column]
[column]
All Issues:
January 2009
Summer 2008
Winter 2008
June 2007
December 2006
June 2006
January 2006
[/column]
[/col-sect]

Just installed thsi plug in and it’s working great! thank you so much!

@Rod: If the content in the first column is too wide, the second column will be forced under it, not next to it. Can you post a link to an example?

@Gret: Thanks!

Super super and nothing else broken so far! Many thanks for this Darrin! Oh, and what a theme you got here!

Bless you

Hi, i am using 3.0 and have a problem with the second column being a line lower dispute it not being an extra also it posts a [/column] that is visible on the published page, i really need to get this site done for a client, you can see an example of this on a test site at: http://drclown.ubeop.com/

Jay

PS. you can just get back to me on this if you want ot edit out my example if you feel your readers would benefit, especially interested to know if it is 3.0 ready. I need such columns on two sites and will donate if i can get it working for them.

Thanks in advance!

Hi,

When I installed the plugin and activated it, I receive this error:

Plugin could not be activated because it triggered a fatal error.

Fatal error: Cannot redeclare column_shortcode() in /home/vothiquy/public_html/wp-content/plugins/wp-columnize/mish_wp_columnize.php on line 124

Can you help me with this?

Thanks

@vo thi quynh yen: You have another plugin or function which is using the same function name of “column_shortcode()”. Basically that error is telling you that that function is already defined somewhere else and can’t be redefined in WP Columnize. You should check your other plugins or functions.php file to see where the conflict is.

how do i add borders to the columns..i did try the css border attribute and nothing showed up

@phil: try setting the border properties on the div.post-column element. Like so:

div.post-column {
    border-left:1px solid;
    display:inline;
    float:left;
    margin-right:18px;
    padding-left:10px;
    text-align:justify;
    width:45%;
}

Hey,
This plug-in has been working great for me! I’m new to coding…but I was wondering if you knew if it was possible to have two different columns widths on different pages on my website. I want to have 3 columns on one page and two on another. It there something I can add to the stylesheet to allow this?

Thanks!
Allie

@Allie, using this plugin, no. It was designed to handle 2 columns per post/page. You may want to check out Sam’s: WP Post Columns.

Thanks for the plug-in. It works great for me!

Hi, great pluggin but i seem to be having trouble with tags surounding the div i.e.
, hense the page will not validate. Please coul;d you point me in the correct direction. Thanks

@claire: if you’re trying to include code in your comment, please wrap it in backticks (`) or use the code button. The filter strips all code out of comments unless backticks are used. Also, could you clarify “tags surrounding the div”? I’m not sure what you mean.

Thanks,
db

Hey, great plugin!

I would like to style my columns differently, however, the class for each column is the same. Am I missing something? I went in to modify your work, but…, it is to complex for my grasshopper skills. Would it be too much to ask for you to modify your code in order to identify each column? If I can already do this, then ‘no cookie for me’! Thanks,

Sean

Just found this (after a long search!) and it does exactly what I want it to (to simply add three images in columns at the bottom of a static page). Brilliant!

Just two minor things –
Like Sean, I’d like to be able to style the columns individually if possible (and I’m a complete novice at all things WP and php!),
How do I get rid of the extra empty that is added at the top of column-sect?

I had some problems with the plugin adding <p><div class="post-column"> so I added this to the plugin `$col_content = preg_replace ( ‘@@’, ”, $col_content );
$col_content = preg_replace ( ‘@@’, ”, $col_content );`.

And since excerpts don’t allow shortcode I added this to my functions: add_filter('the_excerpt', 'do_shortcode'); and finally this to remove any extra tags `remove_filter(‘the_excerpt’, ‘wpautop’);
function wpautopnobr($content) {
return wpautop($content, (is_page() ? true : false));
}
add_filter(‘the_excerpt’, ‘wpautopnobr’);`

Hi, how can I put the columns into the php code?

Doesn’t seem to work anymore in the latest version of wp or am I the only one having a prob?

Hey Darrin,

I’m having an issue getting the columns to work, and think there is a problem in my code. I’m going for a three column page, and the html looks fine, so I’m guessing the problem is my code (which I’ve never really used before!) The page is listed above.

‘div.column-sect {
clear: both;
display: inline-block;
overflow: auto;
}
div.post-column {
display: inline;
float: left;
margin-right: 5px;
text-align: left;
width: 100%;

Can you help? Thanks so much!

Hi there,
I’m using your plugin and it works great except for one thing. It renders the text into a column and has split the text into two columns as on my resume, HOWEVER if I use the same shortcode on my other pages, like on the page with my research papers on it, it doesn’t break the code into two columns (or on another columns besides the resume page).

http://kglyphics.com/?page_id=495

I would appreciate any help with what I’m doing wrong.
Thanks!

Works perfect!

OSX 10.4
Safari 4.1.3
but in Firefox 3.6.28 a scroll bar appears.

I’m not worried, I have CSS to solve it, but it isn’t elegant. I don’t know if that occurs using newer versions of the software I can’t install.

Thank you!

Excuse me … I use WordPress 3.4.2

I installed this plugin in WordPress 3.5. It doesn’t do anything at all. Bummer! Looks like a sweet little unit. Any plans to update it?

@ greg Weird, this site runs 3.5.1 and it’s working fine. Maybe you have a conflict with another plugin?

Make Yourself Read, Leave a Comment

Comment moderation is enabled. If you don’t see your comment, either it’s your first time commenting, you’re spam, or there was a glitch. If it’s two of the three, no worries, it’ll show up soon. (* Indicates a required field.)

If you want a commenter avatar, check them out here.

Allowed XHTML: <a> <abbr> <blockquote> <em> <strong>
Enclose code in backticks (`); no need to encode, the filter will do that for you.