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:

WP admin >> Appearance >> Editor >> Styles >> style.css

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.

WordPress Columns using Genesis

WordPress Columns using Genesis 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.)

WordPress Columns in Visual Editor

WordPress Columns in Visual Editor

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

WP-admin >> Appearance >> Editor

 


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.


Reference

 

Enjoyed this post?

Easily subscribe to keep get all new postings via email. No We Don't Serve Spam - Ever!

We respect your privacy

Comments

  1. Thanks for posting this. I’ve used the Genesis CSS column classes, but there is no padding in the columns. Are there any classes that I could add that would add the padding?

    • Helena Asmus Lim says

      Hiya Tom,
      I am so sorry for the late response. I have not been attending to this site for so long. (Long story).

      I hope you have found your solution re. adding padding to the Genesis CSS column classes by now. In case you haven’t, I will try to give you a short opinion on how you might add padding.

      You just need to modify the generic class that came with Genesis. That would be found in style.css. However I would NEVER MODIFY that file. Rather I would create another css file which is an addition (not a replacement) to the site’s css files.

      In that personal css file, I would do my css style adjustment.

      For example, if I wanted to add a left padding of 20px to all two-columns.
      Genesis already has a class for this: .one-half

      So in my personal css file, I might have the following:
      .one-half {padding-left: 20px; }

      I hope that helps and makes sense.

Your Comments? Tips to share?

%d bloggers like this: