Easy Columns WordPress Plugin
As a blogger and a marketer, you know that the content editor in WordPress can limit how you format your content. What’s worse, your theme can also limit you as well.
If you’re designing a product or business site, one way to call attention to your services or product features is to put the information into nicely formatted columns. While there are paid themes that have a column, or magazine style layout, they may only allow you to show columns on certain pages.
To solve this problem, I’ve written a plugin called Easy Columns. Easy Columns allows you to convert any page or post, in any theme, to a magazine style layout in just a few clicks.
With Easy Columns, you can insert unlimited number of columns and at least fifteen combinations of 1/4, 1/2, 3/4, 1/3 and 2/3 width columns – your magazine style layout is only limited by your imagination!
The plugin creates a magazine layout in your pages by enabling a small library of shortcodes in your theme. These shortcodes can be manually added in the editor, or by clicking the Easy Columns icon in the editor and selecting one of fifteen combinations of columns.
Easy columns also adds the ability to add DIV tags to your content without having to switch from the visual editor to the HTML editor!
Shortcode Syntax
The following are all the shortcodes available in Easy Columns:
[wpcol_1quarter id="" class="" style=""] [/wpcol_1quarter] [wpcol_1quarter_end id="" class="" style=""] [/wpcol_1quarter_end] [wpcol_1half id="" class="" style=""] [/wpcol_1half] [wpcol_1half_end id="" class="" style=""] [/wpcol_1half_end] [wpcol_3quarter id="" class="" style=""] [/wpcol_3quarter] [wpcol_3quarter_end id="" class="" style=""] [/wpcol_3quarter_end] [wpcol_1third id="" class="" style=""] [/wpcol_1third] [wpcol_1third_end id="" class="" style=""] [/wpcol_1third_end] [wpcol_2third id="" class="" style=""] [/wpcol_2third] [wpcol_2third_end id="" class="" style=""] [/wpcol_2third_end] [wpdiv id="" class="" style=""] [/wpdiv] [wpcol_divider] [wpcol_end_left] [wpcol_end_right] [wpcol_end_both]
Optional Parameters
- id = any unique alphanumeric ID. An ID will allow you to apply additional style to your columns or manipulate them with JQuery or JavaScript
- class = any W3C compliant CSS class name.
- style = any W3C compliant CSS. With this parameter, you can add inline style to individual columns.
You can also bypass typing the shortcodes in and get right to adding content by clicking the Easy Columns icon in the editor 
and selecting what column layout to insert into your content:
Pixel Level Control
In the Easy Columns option panel, you can override the default CSS and apply your own pixel or percentage width for each column type if you need stricter control over the look of the columns.
Demo
For a quick demo of all the columns, view the Easy Columns Demo Page.
Download
Can’t wait to get your hands on the Easy Columns WordPress plugin? Have at it – download away!
Easy Columns
Enjoy!
{ 122 comments… read them below or add one }
← Previous Comments
Hi there! Great Plugin! I am wondering how I can included images in the columns. Everything was working fine until I tried inserting an image and it does not show up on the webpage.
Thanks so much!
Megan,
Images should be no problem in the columns. It may be that the images are wider than the columns you’re putting them into, so they may be breaking the CSS. Do you have an example?
This plugin has one major flaw:
.wpcol-last needs this as it’s margin:
margin-right: 0 !important;
(I’ve only added the “!important” part to what you already had.)
The reason is that when you use custom widths, the custom margin overrides the last column margin, making it wrap down if your margin is wide enough so that they can’t fit on the same “row.”
I’ve just installed this plug-in and seems to be working great (WP 3.2.1). I need to test it a bit more. Thanks for doing such a great job and making our lives a bit easier!
Hi there.
The plug-in is awesome, I have to say it saved some time to me
I was wondering – when I put columns with text, they are too close to each other, so that it’s hard to read the text in one column. How would I include a “space” between 2 columns (let’s say in 1/3 column scenario?).
Thanks
Marek
Hey,
I really want to use this plugin but am having difficulty with it. I enter in the code and the columns show up properly but I have no way to change the font color in the columns and it clashes with my background. Maybe I’m just HTML-ignorant but I really don’t understand how to change the font color and would love for someone to give me the heads up on how to. Thanks for the great plugin!
Easy columns doesn’t do any formatting other than putting content into columns. If you need to change the color on a bit of text, you may want to make sure you select just the text and change the color. The WordPress editor likes to select chunks of text and it may be selecting the shortcode as well as your text, which can cause problems. When that happens, the <span> tag ends up wrapping around the shortcode. When the shortcode gets executed, it renders a <div> tag, which will brak the font style you tried to apply.
Unfortunately, the WordPress editor can be a little pushy in what text it selects, so that’ll happen. Hope that helps!
Ah! My bad. You just have to be super selective when changing the font color. I don’t know why this was being so difficult for me! Just have to select the text exactly and you can change it in the editor, piece of cake. I was thinking I had to do something in that style=”" tag there. Thanks for the help, Pat!
Hi Pat,
My guess is this is a real noob question, but how can I add a background color (gray) to the columns?
I can tell you’ve worked hard on this and it’s much appreciated!!
Thanks!
Steve
Steve, You absolutely can add additional styling to the columns. One method is to edit the CSS file directly, and that’s in the plugin folder. You could either edit the css for the column classes directly, or I’d suggest just adding a new class, like .greyColumn. It might look a little like this:
.greyColumn { background-color: #d1d1d1; }When you create your columns, you have the ability to add additional classes to them, so you’d add class=”greyColumn” to the columns you want grey.
The other method would be to insert inline style in the columns like this: style=”background-color:#d1d1d1″ and that column will be grey. Hope that helps!
Hi Pat,
I can’t figure out how to end one column and starting adding text to the next. Could you direct me?
Thanks!
As an example, let’s say you picked two 1/2 columns. The shortcodes would look like this: [wpcol_1half]YOUR CONTENT HERE, COLUMN 1[/wpcol_1half] [wpcol_1half_end]YOUR CONTENT HERE, COLUMN 2[/wpcol_1half_end].
Just make sure you put your content between the [wpcol_x] and the [/wpcol_x] tags and it’ll be enclosed in the column. Hope that helps!
Hi Pat,
Just curious how to I get the columns to line up?
Thanks!
Tracy, just make sure that you don’t add a carriage return between the column shortcodes. A space would work, but any time you hit the return key in the WP editor, it adds a
<p></p>tag which can shift things downward. Hope that helps!Hey there,
Just curious as to why my third column is dropping down to a new line. I have not hit return between the shortcodes.
Thanks, looks like this will be easy to use.
Dan,
It could be that the content (perhaps an image, a div or other content?) is wider than your columns. Do you have a link to test?
← Previous Comments
{ 3 trackbacks }