If you’ve been using WordPress for a while, chances are that you’ve heard of Genesis. In case you haven’t, Genesis is a theme framework for WordPress which makes it easier to create themes quickly. Instead of having to create a theme from scratch, with Genesis you create a child theme which will include only your alterations to the Genesis parent theme.
When I first started using Genesis, the biggest struggle I had was knowing where to start. For my first few child themes, I used and adapted code from other child themes just to get the hang of how other developers were doing things. Rather quickly, I was able to build a starter theme which I now use whenever I begin a new project.
What Files Do You Need for Your Child Theme?
My starter theme includes the following files:
- functions.php
- style.css
That’s all you need to get started. The functions.php is where most of the action will happen when working with Genesis. Through the use of WordPress hooks, you can “hook” your own functions into existing Genesis functions to add your own custom code to wherever you need it. If you aren’t familiar with hooks, you’ll want to take some time to get used to them. You can learn more about hooks here.
Functions.php
There are some important things that you will want to include in your functions file in order for your child theme to work correctly. This is how I open my functions.php:
<?php
include_once( get_template_directory() . '/lib/init.php' );
define('CHILD_THEME_NAME', 'THEME');
define('CHILD_THEME_URL', 'http://www.example.com');
define('CHILD_THEME_VERSION', null ;
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css', false, CHILD_THEME_VERSION, 'all' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'), CHILD_THEME_VERSION, 'all');
wp_enqueue_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); ?>
The most important part of this is the first line. This loads the Genesis framework into your child theme, and lets WordPress know that this is a child theme.
Next, your are defining some theme variables that we will use in your theme_enqueue_styles function. You can replace THEME with the name of your child theme and http://www.example.com with the URL of your theme.
Lastly, in the theme_enqueue_styles function, you are queueing up your parent and child stylesheets and loading jQuery.
That’s all you need to get your child theme off the ground. This is, of course, only the beginning. From here it is a matter of getting used to hooking into the Genesis framework in order to customize it for your needs. The Visual Hook Guide for Genesis is a very helpful tool to help you get started. It is not representative of every hook you can use, but it’s a solid start.
