How to Use Genesis Column Classes Plugin

by Puneet on April 29, 2011

This post will help you understand how to use Genesis Content Column Classes Plugin. You can check out the demo here. Download.

How to use the code ?

Copy the code for the number of columns you want to create. In your WP Post editor switch to HTML editor mode and paste the code. Now, you can add your own text and switch back to Visual editor mode.

Creating Two-Columns

To create two columns, use the following classes:

  <div class="one-half first">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>  <div class="one-half">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>  

Creating Multiple-Width-Columns

To create two columns, use the following classes:

  <div class="one-half first">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>  <div class="one-fourth">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>  <div class="one-fourth">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>  

Creating Three-Columns

To create three columns, use the following classes:

  <div class="one-third first">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>  <div class="one-third">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>  <div class="one-third">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>  

Creating Four-Columns

To create four columns, use the following classes:

  <div class="one-fourth first">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>  <div class="one-fourth">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>  <div class="one-fourth">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>  <div class="one-fourth">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>  

Creating Five-Columns

To create five columns, use the following classes:

  <div class="one-fifth first">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>  <div class="one-fifth">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>  <div class="one-fifth">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>  <div class="one-fifth">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>  <div class="one-fifth">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>  

Creating Six-Columns

To create six columns, use the following classes:

  <div class="one-sixth first">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>  <div class="one-sixth">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>  <div class="one-sixth">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>  <div class="one-sixth">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>  <div class="one-sixth">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>  <div class="one-sixth">This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.</div>  

Get free e-mail updates

{ 56 comments… read them below or add one }

Samuel Haugum May 9, 2011 at 5:11 pm

Hi
I use wordpress pages as include in a ordinary site.

Trying to implement multicolumns, but my included page will not render the columns.

Do I need to attach a stylesheet to accomplish this you think?

Any help greatly appreciated!

Reply

Puneet Sahalot May 9, 2011 at 7:32 pm

Hello Samuel,

You need to apply the css classes as shown above. Simply, follow the instructions given and you will be able to make multi-column layouts.

Reply

Miguel Becker May 11, 2011 at 1:21 am

Thanks so much for this simple yet effective, easy and powerful plugin. You can see a demo of the 2 column code here: https://cac.beckermarketingcreativo.com/

Many thanks!

Reply

Puneet May 11, 2011 at 2:20 am

Glad to know that my plugin helped you out :) Thanks for the appreciation!

Reply

vattenpipa May 12, 2011 at 3:07 am

Hi, thanks for the plugin.. works really easy and simple. perfect!

Reply

G-Hawk June 6, 2011 at 2:17 pm

hi! im having this problem hope you can help me…
I´m puting the columns inside a something like this

column1
column2

the problem is that the background dont cover both of the columns… i´ve try almos everything… so far i dont know what else to do… any ideas?? this is an example : https://testarea.eltecnofilo.com/?p=166

Reply

G-Hawk June 6, 2011 at 2:20 pm

oops. the textbox ate the css code… this is my example again:

-div id=”contenido”-
-div class=”one-half first”- columna 1 -/div-
-div class=”one-half”- columna 2 -/div-
-/div-

Reply

Puneet June 6, 2011 at 4:22 pm

Hi,

try this :
-div id=”contenido”-
-div class=”one-half first”- columna 1 -/div-
-div class=”one-half”- columna 2 -/div-
-div style=”clear:both;”- – /div-
-/div-

Reply

G-Hawk June 6, 2011 at 9:47 pm

It worked!!! thank you !!!! excelent plugin!!!

Reply

Puneet June 10, 2011 at 5:22 pm

Glad to know that :) thanks for the appreciation :)

Reply

Serhat June 15, 2011 at 1:16 am

Hello, i have a questions.
(i can a little speak eng.)

i want 3 columns like this

columns 1/3 end other columns 2/3
like this;
x – 2x total 3 columns?

Reply

Puneet June 15, 2011 at 4:03 am

Hi Serhat,

You won’t be able to create three columns as 1/3, 2/3 and 2/3. You can only create two columns this way: 1/3 and 2/3 that adds up to 1
If you want to have three columns you will have to use either 1/3 , 1/3 ,1/3 or 1/2, 1/4, 1/4 or some other combination which adds up to 1.

Reply

Serhat June 15, 2011 at 4:19 pm

Hello again, thank you for your answer. i’m trying to other combination. Maybe it would be as I want.
Good job.

Reply

Jen July 8, 2011 at 6:26 am

Hey there – just wondering if there is an easy way to add a thin black vertical line between the 2 columns? Thanks so much for the awesome plugin!

Reply

Aaron August 4, 2011 at 8:57 am

How would I code 1/5, 3/5, 1/5 ?

Reply

Rebecca August 18, 2011 at 2:52 am

Hiya

Have tried your code and it works great. can you incorporate images and/or videos so that they are in columns? Basically i want to create boxes on the page – say four with content in them….

Reply

Puneet August 18, 2011 at 2:56 am

Yep! of course you can add images and videos there to make them in columns. :-)
If you have any issues, let me know, I will be glad to assist you.

Reply

Rebecca August 18, 2011 at 6:42 pm

I thought so, but not sure at all how to do it. I’m not an expert and just trying to give it a go. Any help or suggestions you have on how to do it would really help… Thanks!

Reply

Rebecca August 18, 2011 at 2:52 am

Hiya

Have tried your code and it works great. can you incorporate images and/or videos so that they are in columns? Basically i want to create boxes on the page – say four with content in them….

Reply

Amy August 26, 2011 at 12:37 pm

Hi there, is there way to create columns like so with this plugin..

COLUMN 1 | COL2
————– COL2
CL3|CL4 COL2

? Just wondering, can’t find any WP plugins or ways I can do it.

Reply

Krystle Kelley September 9, 2011 at 4:16 am

*Do you need to upload plugin first for CSS to work?
*Can you use it in your post?

Reply

Puneet September 10, 2011 at 7:55 pm

Hello Krystle,

You need to first upload the plugin and activate it. Then you can use it in your posts/pages. :)

Reply

JAckie September 12, 2011 at 9:08 pm

I want to have three columns with a title, text and then a picture below each text…but the picture wont line with the text, so it looks odd. I’ve tried to make the pictures wider but it doesn’t matter, they still dont line with the column-text.

How can I fix this so everything fit together nicelly?

Reply

Puneet September 13, 2011 at 10:45 pm

Could you please drop a link to your website ?

Reply

Caps September 14, 2011 at 4:34 am

Jackie here is an example of aligning things up. You need to align within the DIV and not for the page.

Remember to use HTML mode:

City of Los Angeles

Reply

Caps September 14, 2011 at 3:47 am

These snippets would be great to add into the toolbar of the text editor. This will allow non coders or authors to be able to craft the layout of their content.

Example Col2 Col3 Col4

When clicked, the appropriate code would paste into the text area of the HTML mode.

Caps

Reply

Puneet September 14, 2011 at 3:45 pm

Thanks! Will try to implement them in future versions either the way you mentioned or by introducing shortcodes. :)

Reply

Caps September 15, 2011 at 7:48 am

Hi Puneet,

I would like to commend you on the great work of having the best solution for layout multi-columns. I suggest you take a look at what Headway is doing for version 3 implementing the layout editor. You would need a developer’s edition to use the API. The idea was to embed into a Headway block a news widget. See my post at: https://headwaythemes.com/screencasts/screencast-tuesdays-layout-editor- al3-0/#comment-2882

Also check out the video demonstrating the new features coming in version 3.0.

Caps

P.S. I will be awaiting your solution of adding these custom buttons to a text editor.

Reply

Ian September 17, 2011 at 12:27 am

Ahoy there,

sorry but I can’t get this working at all. Can you clearly explain what it should look like in HTML mode for 4 columns?

thanks,

ian

Reply

Puneet September 17, 2011 at 12:38 am

Hello Ian,

Simply copy the code mentioned under “Creating Four-Columns” in the article and paste in HTML mode. Later on you can change the text :)

Reply

Ian September 17, 2011 at 12:46 am

Hey Puneet,

yeh did that mate before but no joy. This is the actual code. Perhaps I’m missing something?

————— ——————-
[col-sect]
This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
[column]
——————————–

Reply

Puneet September 17, 2011 at 12:52 am

Hello Ian,
You are missing all “div” tags. Please check the code mentioned above and compare it with the code you are using. You should have all “div” tags with proper CSS class.

Reply

Caps September 17, 2011 at 12:18 pm

Why is this so difficult?

Your content = column 1

second column

Reply

Caps September 17, 2011 at 12:19 pm

These post strip the code.

Reply

Ian September 17, 2011 at 8:08 pm

Hi Puneet,

this is what i have in my html view and its not working so I guess there is something I’m missing from the instructions.

———– —————— ——-

[col-sect]
This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind.
[column]
————– —————
Caps if you’re spouting off at me its because I have no idea of coding. Instead of being lippy, helpful would be better.

Clear concise instructions make life easier.

Reply

Ian September 17, 2011 at 8:09 pm

aha, yes indeed the posts do strip the code so you can take it as read that the divs and bits are in the right place.

Reply

Caps September 17, 2011 at 10:12 pm

testing if code can display as post using the [code] tag.

[code]<div class="one-half first"> column 1 content </div>start new column<div class="one-half"> column 2 content </div>[/code]

Reply

Ian September 17, 2011 at 10:53 pm

Hi Caps,

thanks for the advice but that doesn’t work either. If there is something I’m doing wrong , I can’t work it out.

I’ve even cut and pasted the source code from this site example and nothing!

If others are having the same problem I suggest a screen shot of what should be seen in the HTML view to ensure its being dumped in correctly. Only then can one see if its correct. Following the instructions so far and its failing.

I’ve spent hours with different variations of code and am gonna move on to another plugin as this is hopeless. Its a great shame because whoever can master this, is on to a winner.

cheers,

ian

Reply

Puneet September 17, 2011 at 10:55 pm

Hello Ian,

Sorry to hear that it isn’t working for you. Please try to deactivate and then re-activate the plugin.

Could you please drop a link to your website ? I would like to check what’s wrong.

Thanks!

Reply

Ian September 17, 2011 at 11:12 pm

Hi Puneet,

problem solved by deactivating, deleting and re-installing. Must have been a glitch or conflict somewhere but the delete and flush did the job.

Now its working 100% and looks excellent especially with an image with it. Good work fella!

cheers,

ian

Reply

Caps September 18, 2011 at 4:39 am

The solution for post is this plugin, however I have not tested it for a page. After activating the plugin, you need to do nothing else – no shortcodes nor tags, it just works. After you publish, you will see 2 columns.

Newspaper Style Posts
Link: https://epicalex.com/newspaper-style-posts/comment-page-1/#comment-75208

Caps

Reply

Caps September 19, 2011 at 12:51 am

Update on Newspaper-Style-Post:

This plugin breaks other plugins like forum plugins and the WP excerpt function – perhaps some others I’ve not discovered.

If this method of laying 2 columns would be compatible with WP 3.1 and not conflict with plugins/themes, this would be greatly welcomed and extremely handy.

Reply

sam October 7, 2011 at 2:13 am

i plug in the columns, its working but it keeps running into the footer. any reason for that?

Reply

Puneet October 7, 2011 at 12:11 pm

Check if you have any extra div tags in the code. or if you have missed any css class. Or drop a link to your site, I will be happy to help. :)

Reply

sam October 7, 2011 at 12:22 pm

i actually figured it out. i ended up using this.

-div id=”contenido”-
-div class=”one-half first”- columna 1 -/div-
-div class=”one-half”- columna 2 -/div-
-div style=”clear:both;”- – /div-
-/div-

i think the div style=”clear:both; did the trick. thanks again!

Reply

Tom October 12, 2011 at 6:38 am

I can’t get this to work. I have a page of links alphabetized on my Products page. I want to make 4 colums of the links on that page. I’ve tried inserting the 4 column code via html but it won’t make columns. What am I doing wrong?

Reply

sam October 17, 2011 at 5:01 am

try to put this at the top

(your 4 columns code in between)

this at the bottom

Reply

sam October 17, 2011 at 5:03 am

-div id=”container”-

-div style=”clear:both;”- – /div-
-/div-

this is what i meant

Reply

Donato Dandreo December 2, 2011 at 10:20 pm

Hello, I am using your plugin and it really does work well. I am having some trouble with the content below 2 columns. The site is not currently live so i cannot show the link but the only part of the sentence affected is the first sentence is landing in the far right column and then the rest flows fine down the page. I tried adding a break and made sure that the div tags were closed so I am not sure really what else to do? If you need a screenshot just let me know where to send it. I appreciate your help!

Reply

Rosemary February 26, 2012 at 7:10 am

I am using a two column layout. I want to add a footer of my own outside of the last tag. When I do this, it seems to show up OK on some computer screens and not on others. Is there a code that lets me use both two columns followed by a single column on the same page? Thanks! Love your program! :)

Reply

Caps April 3, 2012 at 12:31 am

Hi Puneet,

Why not create a class that does not show tags in the content. There is a plugin which does this, why not create one like this?

https://talkingmanuals.com/review-wp-boxerpro/

I thought this plugin was using your classes but it does not.

Reply

Foruo October 30, 2012 at 12:07 am

Is it possible to place the columns in a different order, for instance:

1/4, 1/2, 1/4

We’re looking at this plugin, with the above-mentioned tweek, to possible solve the current open question logged at https://www.studiopress.com/support/showthread.php?p=613098#post613098.

Thanks for the assistance!

Reply

Puneet October 30, 2012 at 10:59 am

Yes, you can place the columns as 1/4, 1/2 and 1/4.

Reply

Fouro October 30, 2012 at 6:40 pm

Apologies, it looks like the code does not render properly in the comments section here. Essentially, we’re using the example from the Multiple-Width-Columns section above, and instead of using the class called one-half first (which we tried), we are using the following classes: one-fourth, one-half second, one-fourth.

Reply

Puneet October 30, 2012 at 8:51 pm

One thing, that I would like to mention is that if you are using Genesis Child theme then probably you don’t need to use this plugin. As the required CSS for columns comes packed with child themes.
Anyways, your class for DIVs will be : one-fourth first, one-half and one-fourth This should work perfectly.

Reply

Fouro October 31, 2012 at 5:30 pm

Excellent, thank you, the use of “first” worked successfully, and after looking at the CSS file, it’s evident why. Thanks for the help!

Leave a Comment

{ 4 trackbacks }

Previous post:

Next post: