Using Column Classes

Genesis comes pre-built with a great bit of CSS called Column Classes. This allows you to easily make multiple columns of content with a bit of CSS. You can also add this to any theme with this CSS.

There’s two different ways I set up client sites to use this:

  • Adding Editor Styles
  • Div Shortcode Plugin

Adding Editor Styles

If the client is somewhat comfortable with HTML – she’s not afraid to click the “HTML” tab in the editor – then I’ll add the column classes to the editor’s stylesheet. This will make it so the columns are visible in the editor and the client can easily see where the content she’s writing will show up. I also recommend using the fullscreen editor when using this because the inline one is a bit too small.

In your theme, create a file called editor-style.css and add the column class CSS styles to it. You can also add any other styles you’d like reflected in the editor (I often add the headlines styles so the client can visually see how her h2’s and h3’s will look from the editor).

Then, add this to your functions.php file: add_editor_style( 'editor-style.css' );.

That’s it! Now when editing a post, switch to HTML view and add this:

<div class="one-half first">
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
</div>
<div class="one-half">
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
</div>
view raw gistfile1.txt hosted with ❤ by GitHub

When you switch back to Visual view, your editor should look like this:

Div Shortcode Plugin

For those who get completely lost in the HTML tab, I have a plugin that let’s them use [[div]] shortcodes. Once Div Shortcode Plugin is activated, they just have to write something like this in the Visual Editor:

[div class="one-half first"]
This is the left column
[end-div]
[div class="one-half"]
This is the right column
[end-div]
view raw gistfile1.txt hosted with ❤ by GitHub

The benefit here is that they can see exactly where in the Visual editor one column is ending and another is beginning. They’re able to control div’s without ever switching to the HTML view (where they might get lost).

Other Notes

When building out a site, I’ll often create two sample pages using each technique so the client can choose which is best for her.

If every page will have the same number of columns, you might consider pre-populating the content area with default text. This way they never have to switch to HTML mode to create the columns – they are there already.

It looks like a future version of Genesis might include icons in the TinyMCE Editor for creating the columns, which will give you one more way for doing this.

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk

Reader Interactions

Comments

  1. Chess says

    Thanks Bill,

    I added the custom class code to the bottom of my styles.css page. But the page still renders with the content displayed in one column. I have the Div Shortcode plugin activated.

    This is what I pasted into the text side of the test page that I’m using to work with columns

    [div class=”one-half first”]

    This is the left column

    [end-div]

    [div class=”one-half”]

    This is the right column

    [end-div]

  2. Easy Mark says

    Hi there, Bill:

    Thanks for posting the code and the clear instructions on how to do this.

    This might not be the right place to ask this, but I thought if anybody would know, it would be you.
    I noticed that genesis columns seem to all be equal proportions, such as:

    1/4 | 1/4 | 1/4 | 1/4

    Is there an easy way to have have columns that are unequal like this:

    2/3 | 1/3

    Or something like

    1/4 | 1/2 | 1/4

    or like

    3/4 | 1/4

    Thanks in advance. I apologize if this is easy to do and I completely overlooked it before.

  3. Chris Adams says

    Thanks Bill – really helpful & really useful for clients – especially those that are unused to columns and so on. I’ve incorporated a very light border to all columns too to make it more obvious to the client.
    🙂

  4. Nelson says

    Hello Bill,

    I went to your another blog post which is explaine how’d you use the columns in different way I think this is more complex than what you have here. here is the link: https://www.billerickson.net/genesis-portfolio/ here I saw a function which includes the one-half, one-half-third etc. are these classes from the css that address the comuns? If so, that simply means that you can call classes on the css with php or even javascript I guess, am I right?

    Can you explaine every line of code would that be alright?

    https://gist.github.com/billerickson/16bee44567fe30c9de52

    • Bill Erickson says

      The first part looks at the global $wp_query object to make sure we’re only altering the main query. Without this, it would affect other post listings on the page (ex: a widget that shows recent posts).

      The $column_classes array is a list of classes that lets me translate a number (ex: 3) into the correct class name (ex: one-third). $column_classes[3] returns ‘one-third’. Arrays start their count at zero (ex: $column_classes[0] ) so the first and second items in the array are empty.

  5. Vinicius says

    I’m used to bootstrap where I can show diferent amount of columns on mobile and desktop.
    Like six columns in a row for desktop and 2 columns for mobile.
    Is this possible with column classes? If so, how?

    • Bill Erickson says

      These column classes typically go full width on mobile. If you want to show different columns on mobile, I recommend creating a different set of mobile-specific column classes, like .mobile-one-half. You would then do this: <div class="one-sixth mobile-one-half">

      • Vinicius says

        ok, thanks. That helps.

        One more thing.
        If there’s no content inside a column the next column will push it’s content over the empty column.

        On your demo page try to remove the content from inside of .one-half first column.

        How do I fix this?

  6. martin allman says

    Hi – I’ve created two new widget areas in my template which I want to lie side by side. I’ve assigned classes of one-half first & one-half to do this. I just wondered if this is a good way of creating adjacent widget areas?

  7. Pelle says

    Hi

    I got it right with the editor in wordpress it shows 2 columns but when I view the page in browser it does not show 2 col. Why?
    I created a css file called editor-style.css and add your code 2colums then I added add_editor_style( ‘editor-style.css’ ); in function.php

    • Bill Erickson says

      It sounds like you added the column class CSS to your editor styles, but not your theme’s styles (used for display of website). Edit your theme’s CSS file and add the column class CSS.

Leave A Reply