Adding Content Columns To Custom Functions

Breaking up your content into columns is easy simply by using some HTML and CSS code.

Its simply a matter of adding a block of CSS code to your child themes style.css.

All you need to then is paste the HTML into your editor and presto! you have any number of content columns.

But what if you want to display columns of content in an area outside what your editor allows?

What if you want to display content columns using conditional tags?

The simple answer is you can and its easy when using Genesis hooks with custom functions.

Content Columns Before Posts

This code will display 2 content columns before your posts.

However, it will also display the 2 content columns on all archive pages like your home, blog and category archives.

To fix this, you can add a conditional tag to your custom function so the columns are only displayed on single posts.

Content Columns Before Single Posts

This code displays 2 content columns using the genesis_before_post hook and the conditional tag is_single for display on single posts only.

Change the hook location and conditional tag to suit your needs.

Content Columns After Single Posts

This code will display your content columns after the comment form:

Most child themes already include a after posts widget so you probably won’t want anything else displayed in the same location.

Styling Content Columns

Simply use the column classes to style the content in and around your columns of content.

Here’s some sample code which you can modify:

Another option is to install a shortcodes plugin and use shortcodes to style the content in your columns.

You can add colored content boxes and lots of other styling choices using a good shortcodes plugin.

Other Options

Alternatively, you could add a new widget area in any genesis_hook location and paste the HTML for your content columns into a text widget rather than add the content columns in the custom function.

Or you could simply create 2 widgets side by side.