How to Add Columns to Your WordPress Posts

Occasionally you will have some content, like a recipe or pricing table, that you will want to place in columns in your WordPress website or blog. Some themes, such as the Genesis child themes, come with column classes, but because you need to switch from the Visual editor tab to the Text editor tab to use them, it may be more complex than you like.

This tutorial makes it easy to use a plugin to add columns to your WordPress post content, whether or not your WordPress theme comes with columns. I reviewed several plugins, and Grid Columns by Justin Tadlock seemed the easiest to use. The advantage of using a plugin is that your columns will still be there if you change themes. Other benefits are that you can actually see where your columns are in the Visual editor, and that you can tell at a glance how many columns you have.

And since it’s the holiday season, and we’re all busy, I’m sharing some easy coconut cookie recipes with the ingredient list in two columns.

How to Use the Grid Columns Plugin

1. Install and activate the Grid Columns plugin in your WordPress dashboard.
2. The plugin has no settings, so you are ready to go.
3. Create a new post in the Visual editor tab, as usual.
4. Add shortcodes with the content for each column; see examples below.

Add Two Columns

These are the column shortcodes to add two columns to your WordPress post.

Notice that each column starts with “column” in brackets and ends with “/column” in brackets. This is the shortcode. You need to use two shortcodes for two columns, one for each column. You use “grid” to identify how many columns you want to use, in this case 2. (Note: I’m only showing examples for equal width columns.)

Add Three Columns

These are the column shortcodes to add three columns to your WordPress post. For three columns, you would add three column shortcodes and add grid=”3″.

Add Four Columns

These are the column shortcodes to add four columns to your WordPress post. For four columns, you would add four column shortcodes and also grid=”4″

For the cookie recipe, I’m going to use 2 columns for the ingredient list, so that it looks like this in my post editor. Notice that I’ve formatted the text inside the shortcodes with bullets and spacing, as usual in the Visual editor.

And here is my daughter’s super easy, super quick coconut cookie recipe with the ingredient list formatted in two columns.

Amber’s Super-Easy Coconut Macaroons

Ingredients:

Directions:

1. Preheat oven to 375 °F.
2. In a bowl, mix all ingredients together well.
3. Spread mixture evenly in greased 9 x 13 inch pan.
4. Bake for 10 – 12 minutes at 375°F or until top is dark golden brown.
5. Let cool and cut into bars.

Rocky Snowballs

And here’s another coconut cookie recipe, my Rocky Snowballs.
Makes 48 small cookies
Ingredients:

Directions:

1. Beat together the sugar, eggs, and vanilla.
2. Beat in the flour and baking powder.
3. Fold in the coconut and mini chocolate chips.
4. Lightly spray baking sheets with cooking spray or oil.
5. Drop rounded teaspoonfuls of dough on baking sheet and flatten slightly.
6. Bake at 325°F for 10 – 12 minutes until lightly golden.
7. Remove from baking pan. Cool. These freeze well.

Have fun with adding columns to your WordPress posts. Enjoy the cookies!

(Note that I don’t use columns often, and so I removed the plugin. This means for smaller screen sizes and mobile devices, there will only be one column for the recipe ingredient lists in this post; using the plugin would always have 2 columns.)