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.

Tutorial

Receive New Posts by Email

Comments

  1. Hey Bill,

    Interesting alternative to just using the column class div tags. I like it because it seems to compartmentalize things much easier.

    Have you ever encountered any problems adding a vertical column rule to the Genesis column class CSS? I’d just like to have a simple 2x vertical divider between the columns.

    I’m only asking because no matter what CSS or CSS3 markup I use, nothing is generated.

    Thanks again for your work. Your tutorials have really helped me over this last year to learn the Genesis back end.

    1. I’d recommend adding a 2px border-left on all the different options ( .one-half, .one-third…), then remove the border from .first.

      The only issue you’ll have is that the lines won’t all be the same height (each one will be as tall as the div the border is applied to). There’s two possible approaches for same line height with differing divs:
      – Add a div wrapper, like .one-half-wrapper, which will add a background image in the right place. Do the same for .one-third-wrapper… so that each one puts the lines as a background image.
      – Use jQuery to automatically resize them to the height of the longest one.

      1. Ok, that was almost too simple. 😉

        Thanks for the help. It worked just fine.

        For anyone curious, I just added this line to the main column class section of the CSS for the Minimum Child Theme:

        border-left: 1px dotted #3f9291;

        and just simply added border:none; to the #column class .first: section.

        Thanks again and happy new year.

    2. Hi Bill,
      Sorry if this has already been asked/answered but I can’t find anything. Is it possible to use the column classes and attach them to another class? I tried an add_filter approach without much luck.

      For example: I want to display content from a front page featured post widget in 3 columns. I guess I could add the percentage value but thought it may be better to use the column classes.

      1. Yes, these classes can be applied to any element on the page. Unfortunately I don’t believe the featured post widget has any filters in place for customizing the classes.

        Personally I remove the featured post/page widget from every site I build and create custom widgets.

  2. Thanks Bill – this is great! I’m combining this with the sample child theme that you’ve provided under GNU – bless your heart, as they say in the south! 🙂 I’m also looking for some direction on how to include plugins in a theme that wont be deactivated if the owner changes the theme. Do you leave instructions to leave certain plugins installed? however, this plugin for columns without the theme-specific css will still break the layout – do you think css like this belongs in a plugin?

    1. Take a look at the Core Functionality plugin.

      Yes, the CSS for this would work well in a plugin. It might be a good idea to remove it from your child theme, create a stylesheet called columns.css in your plugin, and then use wp_enqueue_style to add that style to the site.

  3. Hi Bill,

    Couple quick questions:

    1) Is there any way to use both the Div Shortcode Plugin and editor styles at the same time? For example you can’t insert one-half columns with the plugin and have the columns actually render in the Visual Editor can you? I assume this isn’t possible but thought I’d ask.
    2) If you add a div, like [div class=”one-half first”] IMAGE [end-div], and the image is floated, in the visual editor the image will appear outside of the shortcode. Is this just a limitation of the editor or any way around this?

    1. 1. Unfortunately no. Shortocdes are not executed in the editor. This is the specific reason they are being used in this instance (as opposed to writing the HTML).

      2. “That’s a feature, not a bug”. Floated images will float next to everything, including the text and shortcodes after them. Because there’s not actually an HTML div there to separate it, the visual editor is displaying it correctly.

      1. Thanks for the reply Bill. What ended up being the best solution for my current issue today with a client (that prompted my questions) was something in the Smashing Magazine article (http://wp.smashingmagazine.com/2011/10/14/advanced-layout-templates-in-wordpress-content-editor/) that I would have noticed a lot sooner if I hadn’t just skimmed the article the first time. They use a grey dotted border and a light background to style certain divs in the visual editor only. For some dumb reason, it never occurred to me to use the admin stylesheet to outline sections/columns in the visual editor and style them in a way different from how they would be presented on the front end. Before I was just copying and pasting relevant CSS to the admin stylesheet and not altering it. Now the chances of the client backspacing over one of my pre-set divs is greatly reduced since the individual divs are clearly marked. Just thought I’d share that, in case someone else finds it useful in the future.

  4. I must be thick because I think I’ve followed the instructions to the letter and neither method works for me. I get one portion of text above the other not columnated.

    1. Do you have the column class CSS in your style.css file? Open style.css and search for one-half. If nothing comes up, you don’t have it. Add this CSS to your stylesheet.

  5. Hi Bill – thanks for the article

    I really want to have the all-visual-editor option here for my html-phobic clients. But, the problem I keep having with div short code plugins, or the Genesis Simple Column Shortcode plugin, is extra line breaks and getting added after the shortcode, pushing content down on subsequent columns. I think this is happening because more often than not, the first line of each columns is wrapped in an or tag, and the translation between visual and html editor does not want the shortcode and the tag on the same line for some reason.

    Any ideas on how to solve this? Did I make the issue clear? it’s a bit hard to describe without images.

    Thanks!

    1. If you put the shortcodes or divs on their own paragraph, WordPress won’t wrap them in paragraph tags. Ex:

      [[div class=”one-half first”]]

      My content goes here

      [[end-div]]

      Another approach you might try is the Raw HTML plugin. I know it’s popular with membership plugins that require you adding shortcodes and markup to your pages.

  6. I couldn’t get nested div’s to work using this plugin. I’m trying to the following

    div class content box blue
    – div one -half first
    – end
    – div one-half
    – end
    end

    I was expecting entire block of div wil have blue background, but only first few lines have blur box.

  7. Hi Bill

    How would I go about changing the CSS to allow for uneven columns in a four column layout. ie.
    First Column: 40%
    Second Column: 10%
    Third Column: 40%
    Fourth Column: 10%

    Is this possible or should I use a plugin?
    Thanks

  8. I have activated the plugin and copied and pasted the div short code you provided as a test.

    What I get is the test stacked on top of each other and not in columns. Am I missing something critical?

    This is the left column

    This is the right column

  9. 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]

    1. Correction, I am pasting your code into the “Visual” side of the editor.

      [div class=”one-half first”]

      This is the left column

      [end-div]

      [div class=”one-half”]

      This is the right column

      [end-div]

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

  11. 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.
    🙂

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

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

  13. 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?

    1. 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">

      1. 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?

  14. 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?

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

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

  16. Dear Bill,

    Is there a way to leave an earlier column empty without the content of a later column moving back? – I am having the same issue as Vinicius (just a couple posts above). Is the post after that a work around? (The side by side widgets with assigned classes.) If yes, how do you assign classes that way?

    Millions of thanks
    Maria

    1. You could try adding this to the CSS file:

      .one-half, .one-third, .one-fourth, .one-fifth, .one-sixth { min-height: 1px; }

Leave a comment