Genesis Framework: My new WordPress Starting Point

When it comes to developing WordPress themes, there are plenty of options. You can start from scratch every time, you can build you own starter theme as a base to tweak, or you can use a theme framework and create a child theme. In my time as a WordPress developer, I’ve gone through all stages, but have now settled on a theme framework, using Genesis Framework from StudioPress for all of the sites I develop. Not only is it powerful with hooks for everything you can image, but it’s also secure as hell with each major release vetted by core WordPress team members. So what all does it offer? Let’s dig in, shall we?

Old Process: Write each theme from scratch

Back in the old days, I would create a new folder and start coding a theme from scratch, adding every file as needed. Thinking back, I want to smack myself for writing the Loop in every template over and over, but I was young and things were just starting out for me in WordPress. Some of you may still be in this boat, and I would recommend moving up as soon as possible to speed up your development.

Moving in the right direction: My starter theme

It didn’t take long for me to create a starter theme to use on all sites. At first it just lived in a folder on my computer, then in Dropbox, and then it went up on Github when I started using git for version control (which everyone should be doing). It’s gone through many iterations, adding new functionality, refactored code, and streamlined the whole process.

WordPress Starter Theme Github

In its current form, my starter theme uses Compass and SASS (specifically SCSS) for all of the CSS wizardry – preprocessors make things so much easier, so I recommend checking them out if you haven’t yet. I added in a responsive grid framework from Chris Coyier, broke out most of the content into template parts, and built out theme functions to define everything I think is needed as a starting point for a new theme. Feel free to clone or fork it on Github and send pull requests with anything you think might make it better!

This technique has worked well for me, but then I found Genesis and it will be powering the vast majority of projects going forward.

Genesis Framework: My new process

Enter Genesis Framework, the core theme from StudioPress. After hearing great things on Twitter from well respected WordPress developers such as Bill Erickson and Jared Atchison, I decided to pick up a copy for myself. I grabbed the Minimum child theme with it (which is what powers this site) and went to town digging into the documentation, reading the source code, and adding functionality. I immediately loved what I saw – Genesis is rock solid!

In addition to the security and speed of the platform, it offers a full grid setup that I can easily implement to speed up theme development. With the numerous hooks available, it’s easily to drop in any additional content or modify things for any output needed. You can also change the page layout on the fly on a per-post/page basis, which makes it very easy for clients to tweak settings without breaking their site. It’s updated frequently, adding features, hooks and functions to make developing with Genesis even better.

To make things even quicker, I adapted my WordPress Starter Theme for Genesis and put it up on Githubfork it and contribute with anything that might make it better for everyone!

Genesis Starter Child Theme Github

Genesis fits my development style perfectly. The support included when you buy Genesis is also top notch, so if run into any issues, StudioPress is there to help you out.

Where do we go from here?

The one current limitation of Genesis for my development style is that it doesn’t have native HTML5 support. In my Genesis Starter Child Theme, I have an HTML5 doctype in place, but it’s still not using header, nav, section, aside, footer and other HTML5 elements I typically use. There are ways to override each area in Genesis to use the elements, but I decided to leave it be since these are all coming in version 2.0 in the near future, so this won’t be an issue for much longer. My plan going forward is to use Genesis on every WordPress project I can, which should be all of them once full HTML5 support comes in version 2.0.

I would highly recommend buying a copy of Genesis if you do theme development for clients or yourself. It’s only $59.95 and you get updates and support for the life of the product, which is worth every single penny!

Comments

  1. says

    I’ve been poking around in your Genesis Starter Child Theme. It looks very comprehensive – or to put it another way, there’s a lot to get to grips with!

    I currently use Eddie Machado’s Bones-for-Genesis, which has been very good to me – but it looks like he won’t be continuing development for Genesis, so I’m looking for an alternative. BfG focused on being mobile-first, with most CSS in resolution-specific stylesheets. I see you have a breakpoint mixin; do you generally use it to bring in resolution-specific files? Or do you find it sufficient to keep everything in the your standard partials?

    • says

      Hey Cormac – sorry I didn’t get to reply earlier – been really tied up some personal things.

      I generally don’t do mobile-first, but that’s just a style preference more than anything else. You could easily go mobile-first using the breakpoint() mixin. Just code it mobile first and use the mixin (or any @media bubbling in SASS) and add whatever breakpoint code you need. I usually just write my media queries nested in the selectors that need them to keep it concise – it’s what works best for my brain :)

  2. luke says

    Are you able to use SASS ( SCSS) with the child themes. Do they already have a SASS file or do you need to create and setup?

    Bout to jump into SASS and frameworks so would be great to know>?

  3. says

    Hi Matt,
    Thanks for the overview of your development process over the years. I am now between where you were at stage 2 and 3, now looking for a more streamlined way of doing front-end development with WordPress. I have used Bootstrap in the past and am thinking about switching over to Foundation for their grid system, but would also like to use the Genesis framework to manage WordPress core features. I have purchased the Genesis Framework and have been looking closely at it…

    Have you tried using Foundation or Bootstrap with Genesis before?

    You mentioned that Genesis has a grid system, are you referring to the 6 column classes? I couldn’t find anything beyond that. To me 6 columns doesn’t seem flexible enough for quick layout development, but I could be missing something here. I do enjoy using sass so am grateful that you have baked it into genesis, as time feels wasted if I am not using nested selectors, variables, and mixins anymore. I hope there is a Sass Genesis Framework option in the future.

    Any thoughts or pointers on the above?

    Thanks,
    Tim

    • says

      Hi Tim.

      Thanks!

      I’ve played around with Foundation and Bootstrap, but I don’t really see a need, personally, for using such a huge framework with Genesis. Genesis already handles all the main layout CSS for you (you can tweak it to your needs), so trying to shoe-horn Foundation or Bootstrap layout into that is a bit of overkill. I use the column classes for laying out things inside the content areas as needed, but I just customize the Genesis CSS for layout tweaks.

      • John McCarthy says

        Just going through this process now. For about a year, I’ve been using Bootstrap then Foundation. At first they taught me about modern workflows, UI elements and how a complex site might be written. But really, the most I’ve used from frameworks is a few grid classes and maybe a jQuery plug-in. I’ve been attempting to create a front end framework for WordPress myself this past week and no matter what I do, I still feel like most of what I’m adding is unnecessary for 90% of websites.

        Matt’s starter projects are great to get you going. I may still bring across some mixins and scss functions from foundation which I enjoyed such as their rem-calc(). But I now really look forward to writing only the CSS I need.

        Thanks for sharing Matt

  4. Vajrasar says

    I already have commented agreeing over the fact that Genesis IS rock solid!

    My Question –

    What role does a starter theme has when you can have genesis sample theme bundled with the framework. I mean, I have not used any starter theme and if the project needs custom development, I start it over genesis sample theme. Am I doing it the wrong way?

    • says

      The starter theme bundled with Genesis is very bare-bones. In my starter child theme, I put in all the functionality I typically use, as well as a few other things that make it easier for me to start a new site. Either way, you’re using some kind of starter child theme whether you use something like mine or what StudioPress provides.

      • Vajrasar says

        I will download yours to peek at what differentiates it from the genesis sample theme. Thanks for the quick reply!

Trackbacks

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>