Genesis column shortcodes with custom classes

(tl;dr download .zip here)

I, more often than not, roll out WordPress sites these days using Genesis as my framework of choice for theme development. It’s mostly because I’m lazy, and it does a bunch of stuff for me that I can’t be bothered to do myself (which gives me more time to focus on actually developing cool things… and sleeping)

One of the things the Genesis Framework has built in is column classes to divide up content into column blocks, but using these in pages means writing out HTML which scares most clients and users away. There’s a plugin — Genesis Easy Columns — which allows users to drop in column shortcodes at the click of a button that do the work for you. Great for clients, but it’s pretty basic… e.g. I can’t specify additional column classes, so making one column a different colour (or a different font size, or whatever) that I want clients to be able to edit later on is a pain in the arse.

I’ve very quickly created my own column shortcode plugin which does much the same job as GEC — in that it allows you to specify columns with a shortcode — but approaches it slightly different. Firstly, it’s just one shortcode (which allowed me to type a shitload less code) and secondly, it supports additional classes. And also doesn’t have nice user-friendly clicky buttons but I might get round to that in 2020.

It’s basic, but it does the job, and if you want it you can download it from its shiny new GitHub repo. I don’t really have any intentions on adding this to the WP plugin database (laziness) but I might be willing to make it better in the future so feel free to leave feedback on this entry.

How do I use it?

Let’s say you want two columns, you’d probably do something like this:
[columns size="one-half" first="yes" classes="foo bar etc"]some content[/columns][columns size="one-half" classes="alt"]some more content[/columns]

Or for three columns:
[columns size="one-third" first="yes" classes="foo bar etc"]column 1[/columns][columns size="one-third"]column 2, no classes on this one[/columns][columns size="one-third" classes="numberthree"]column 3, extra classes on this one[/columns]

etc etc… use the Genesis column classes as a guide. Remember to always set the first attribute on the first column in a row.

Note: while this is designed to work with the column classes supplied in the Genesis framework, you could easily make it work with your own WordPress theme by nabbing the columns CSS available in github.

Support?

Hahahaha you know I have 2 kids and a million jobs, right? Good luck with that.