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 the CSS at bottom of this page.
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>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]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.
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.
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.
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:
and just simply added border:none; to the #column class .first: section.
Thanks again and happy new year.
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?
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.
Thank you for these instructions!