Building a Custom Genesis Theme

Brian Gardner

I’m asked quite frequently about my workflow when I build Genesis themes. While it may vary from time to time, there’s a short list of things I do right away when developing custom themes for folks.

This was true when I developed Becoming Minimalist and Your Boulder, and also when I did my own redesign here. I thought that I’d share the first 5 things I do when building a custom Genesis theme.

1. Remove Unnecessary CSS

I like to run a lean ship, so I approach my style sheet with a minimalist mindset. If I don’t need something, I remove it before I even get started.

Examples of things in a style sheet that I’d remove would be declaration blocks for sidebars, footer widgets, and widget areas that I know I won’t be using.

2. Remove Media Queries

Even though our StudioPress themes are mobile responsive and include CSS for media queries, I make enough changes in a theme that warrants this removal.

Once I’m done designing the desktop version, I’ll go back and add in the media queries. Since I add containers and elements when building a theme, this ensures that I don’t miss anything by the time I finish.

3. Remove Approved HTML Tags

This is something that makes me cringe every time I see it on another site. I’m not exactly sure why, and my guess is that it’s very seldom used by site visitors.

You can remove the approved HTML tags container with this code:

4. Remove Layouts/Sidebars

This is something that quite honestly isn’t necessary, but I still do it. When I know that I won’t be using specific site layouts or sidebars, I feel better removing them.

You can remove the site layouts with this code:

You can remove the primary and secondary sidebars with this code:

Obviously you need to modify the code above depending on which site layouts and sidebars you won’t be using. The code above is what I used on my site, because I’m only using a full-width content site layout and no sidebars

5. Optimize Gravatars

This is a process that for me is really not necessary anymore because I’m using the Mobile First theme I created as a starter theme.

Prior to that, it was the Genesis Sample theme which, at the time, didn’t include functions and CSS to optimize Gravatars for Retina Display. If your theme doesn’t have it, and you want to do this manually, following this tutorial should help.

And there you have it … Once I get these things out of the way, I start the process of developing a custom theme for Genesis. What’s your process like?