Getting Started with the Genesis Theme Framework – Part 1

16 January 2011 comment icon4 | Categories: tutorials

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.

4 Responses to “Getting Started with the Genesis Theme Framework – Part 1”

  1. themesforge on 16 January 2011 at 8:44 pm said: Permalink

    [New Post] Getting Started with the Genesis Theme Framework – Part 1 – http://themesforge.com/tutorials/getting

  2. Ruthie on 5 April 2011 at 7:52 pm said: Permalink

    Starting a new site using Genesis framework hoping to get good enough to build my own child theme.
    Followed this lesson and all OK except I can’t or don’t know how to have my page named “home” use the home.php template. It’s not showing up in the drop down menu on “edit page”. If I go the “quick edit”, I have a Parent choice of Main Page only and a Template choice of Default Template, Archive or Blog.
    Think I’m missing something very basic. Thanks.

    • Ed on 5 April 2011 at 8:32 pm said: Permalink

      Hey Ruthie,

      This is one that always gets people at the start so you’re not alone.

      home.php will not appear in your Template dropdown within the edit page area of WordPress. home.php is reserved by WordPress exclusively for loading your homepage by default if it exists. There’s no need to set this via the page templates.

      What you need to do is create the home.php file and then if you want to display a specific page as your homepage do it via the Reading options page in WordPress (wp-admin/options-reading.php) and select a static page. In fact you don’t even need a home.php if all you want to do is display a static page as your homepage. (Unless the design is different in which case you would wrap this up in a home.php).

      You can see more here about the logic of WordPress template hierarchy and home.php
      http://codex.wordpress.org/Template_Hierarchy

      “If a visitor goes to your home page at http://example.com/wp/, WordPress first determines whether it has a static front page. If a static front page has been set, then WordPress loads that page according to the page template hierarchy. If a static front page has not been set, then WordPress looks for a template file called home.php and uses it to generate the requested page. If home.php is missing, WordPress looks for a file called index.php in the active theme’s directory, and uses that template to generate the page.”

  3. mary on 21 June 2012 at 4:30 am said: Permalink

    This tutorial’s 2nd part is found here: http://themesforge.com/tutorials/genesis-framework-getting-started-part-2-creating-a-custom-homepage-template/

    In case other readers are also looking for it. 🙂

Leave a Reply