Getting Started with the Genesis Theme Framework – Part 1

So we’ve been doing a lot of development work with the Genesis Framework from StudioPress over the past few months and I thought I’d share with you some of our experiences in the form of a Getting Started with Genesis tutorial series.

Over the series, we’ll bring you through the basics of creating your first Child theme. So Part 1 starts right now!

How do I setup my first Genesis WordPress child theme?

The first really really important thing to remember is that Genesis is like any other WordPress Parent/child theme relationship. You must have the parent Genesis theme installed before you build your first child theme. For now, we’ll assume you’ve got your hands on Genesis and have installed the parent theme like any other normal WordPress theme.

Right, next step!

The first thing I do is create a new child theme directory inside wp-content/themes – call this directory whatever you want to call your new Child theme – for now let’s go with “myfirstborn”.

Right now you’ve got an empty child theme directory. Let’s go ahead and populate it with the building blocks for your child theme. To do this, I generally copy in the starter files included in the sample Genesis child theme available over on StudioPress – go grab the sample Child theme and copy the contents into myfirstborn.

Ok, now you should have the following in myfirstborn:

• functions.php
• screenshot.png
• style.css
• images/

The very next thing you need to do is to open style.css. Right at the top of the css file you should see the following:

[codesyntax lang=”php”]

/*
	Theme Name: Sample Child Theme
	Theme URL: http://www.example.com
	Description: This is a sample child theme for the Genesis Framework
	Author: Your Name
	Author URI: http://www.yourdomain.com
	Version: 1.4.1
	Template: genesis
*/

[/codesyntax]

These few lines of code are actually quite important for your child theme as they are what will end up being displayed within the Manage Themes section in WordPress.

Go ahead and update this info to match your child themes name etc. IMPORTANT: Do NOT change the last line. [codesyntax lang=”php”]

Template: genesis

[/codesyntax]

This is the key line in the css file that let’s WordPress know that this is a child theme and what the parent’s name is. Once you’re done make sure you save your style.css file.

Still with us? Ok great, you’ve basically got your child theme setup and ready for action!

The more work you do with Child themes, the more you realise just how powerful they are. Basically you will spend most of your time working with 2 files, functions.php and style.css.

The big temptation with any child theme development in the beginning is to stray back into the parent theme to make some random changes and tweaks. Please don’t – persevere! It’s going to be difficult in the beginning if you’re used to tweaking/hacking normal/parent WordPress themes and being able to see exactly what’s going on right in front of you in the editor. But you’ll find the more you get into the discipline of a child theme framework, the more you will begin to understand and benefit from this way of developing themes. Right now in fact your child theme ONLY has a functions.php and style.css and a bunch of images, but if you activate and load it in WordPress you’ll get a fully working theme – spooky right? How does this work? Well this is where we get to the heart of Parent/Child theme frameworks. In a nutshell, when you load a child theme with just a plain old functions file it will inherit it’s parents characteristics – and that will include the parent handles how it is configured to display the content page being requested. So if it’s your homepage and the parent has a home.php – then the child will load home.php.

This is where we get to the first big stand out feature of Genesis for me – the well developed and easy to understand markup structure. You can the a visual reference of Genesis’s default markup here. The StudioPress guys have clearly invested a lot of time in coming up with a rock solid markup and style structure that should not be taken for granted. With a bit of practice we’ve been able to shorten our theme development lead time from 5 days to about 2 days due to Genesis taking care of a lot of the repetitive tasks theme developers typically would undertake like SEO optimisation, browser testing etc.

So what if I want to change the default markup?

No parent theme no matter how good it is will ever do everything you want it to do. Well the good news is that Genesis has an extemely powerful set of Hooks and Filters that let you customise your child theme virtually any way you want. Check back soon for Part 2 when we start to get a bit more detailed and take a closer look at the real power of the Genesis framework.