WordPress Columns – How to with Genesis Theme

There are times when it is just handy to be able to easily create WordPress columns in your posts. And without having to resort to endless fiddling or using HTML to create tables (not preferred).

This is where Genesis/StudioPress Themes for WordPress is so cool because it already comes pre-built with CSS Column Classes.  You can easily have up to 6 columns, just by applying the existing CSS class. (If you don’t have a Genesis/MyStudioPress theme but would still like to enable multi-column styling, see “Other ways of adding WordPress Columns” below.)

Whatever Genesis (aka MyStudioPress) child theme you are using, as long as you have the  Genesis Framework (theme), you will be able to find this pre-built Column Class in your child theme’s default style.css

You can search for “Column Classes” at:

---

How to create WordPress Columns using the Genesis “Columns Classes”

Since the Column Classes are already pre-built in Genesis, all you have to do is apply the CSS to your post/page.

This is a screenshot of examples of WordPress Columns using the provided Genesis in-built Columns Classes.

You can also see a full demo version of this at Genesis Demo on Column Classes.

 

Code for 2-columns

<div class="one-half first">First Half</div>
<div class="one-half">Second Half</div>

---

Code for 3-columns

<div class="one-third first">One of Three Columns</div>
<div class="one-third">Two of Three Columns</div>
<div class="one-third">Three of Three Columns</div>

 

As you can see, it is really quite easy to create columns for your page.  All you need is a bit of basic HTML code. Then apply the pre-built CSS Columns Classes.  The same coding format applies for 4, 5, or 6 WordPress Columns.

---

Other ways of adding WordPress Columns

A. Using Plugin

There are a number of plugins you can use if you are not comfortable with HTML and CSS.
For example you can get the Div Shortcode Plugin (mentioned by Bill Erickson). You can read how to use this plugin at Bill’s blog at Using Columns with Div Shortcode Plugin.

Tip: This can use this plugin with any WordPress theme.  It is not exclusive to Genesis or StudioPress themes alone.

B. Add Multi-column CSS code

If you don’t have a Genesis/MyStudioPress theme but would like to have easy column styling as well, then you can copy the convenient WordPress Columns CSS Styles here, courtesy of Bill Erickson and GitHub.  You just need to add it to your existing stylesheet.

 

---

Bonus!  WordPress Columns in your WP Admin Editor

Being able to “see” the columns in the WP editor as you are working could be very useful.

There is only 2 parts to this process. You only have to do once.

Tip: You can also add other styles into your editor-style.css so that it shows up in your WP Visual Editor. For example, adding the headline styles will show you how your h2’s and h3’s will look like while editing. This is a good idea as long as you are not prone to make changes to your standard stylesheets.

Part 1: Columns Classes into new .css file

1. Create new: .css file:   editor-style.css
2. Copy & Paste: copy the pre-built Column Classes and paste them into a new editor-style.css file.
   You can copy the Columns Classes from:
   WP admin >> Appearance >> Editor >> Styles >> style.css

   or from Bill Erickson’s multi-column css at GitHub

3.  Upload: upload your new .css file into your child theme folder.
   So after your upload, it should be at:
   [your wp-folder]/wp-content/themes/yourChildTheme/editor-style.css

Part 2: Modify functions.php
Just add this code:

add_editor_style( 'editor-style.css' );

into your child theme’s functions.php

---

After you have done this, whenever you use the WordPress columns classes, you will be able to see the columns displayed in your Visual editor in WordPress. (In image below, it shows me using a 3-column example.)

You will also be able to see and access your new editor-style.css within

 

---

I hope you have found this useful for creating your own WordPress Columns with ease. Do you have your own way of doing it? Have to got more tips to add to this? Please feel free to share in Comments below.

---

• billerickson.net – Using Columns by Bill Erickson
• studiopress.com – How to Use Content Column Classes (For Studiopress Members Only)
• wpsmith.net – How To Add Genesis Custom Content Columns to the Editor (Another approach. Genesis specific.)