With the launch of Genesis in the rear view mirror, I thought it would be helpful to start introducing some of the elements of a framework. They are a relatively new thing in the WordPress world and a lot of people either don’t know what one is or how they work.
What is a Framework?
In short, a framework is a robust WordPress theme that can be utilized out of the box as is, but also easily extended with child themes and hooks. Not only do they provide a number of enhancements above a typical WordPress theme, but they also serve as a platform to build upon for additional functionality. This post will focus exclusively on the Genesis Framework and how it is structured.
What is a Child Theme?
A child theme is an extension of a framework which is comprised of typical theme elements – with Genesis, it includes a screenshot, theme files, a stylesheet, a functions file and an images folder. These elements are grouped together in what’s known as a child theme folder and can be activated like any other WordPress theme. To help explain the relationship of a child theme and the parent Genesis Framework, I’ll go into detail with each one.
All WordPress themes have a screenshoot image included – typically this is called “screenshot.png”, is 600 x 450 in dimension and is a visual display of the theme, which can be seen on the Appearance > Themes page inside your WordPress dashboard. Since child themes have their own folders and are activated like any other theme, they require a screenshot like a standard theme.
The Genesis Framework, which in essence is the parent theme, is where all of the theme files are kept. This would include the typical theme files such as 404.php, comments.php, footer.php, header.php, index.php, page.php, single.php and so on. Child themes can also include these files – and the hierarchy works in a way that if any of those files exist in the child theme folder, they will override the parent theme. In other words, if you customize a footer.php file and place it into your child theme folder, that will be used in lieu of the one in the Genesis parent theme. Currently the only theme files that may be found in some of the Genesis child themes are a custom home.php file, which will control the way a site’s homepage will appear. If one is not a part of a child theme, then the theme will use the index.php file, in the Genesis-parent theme, for the homepage.
Many frameworks are built in a way that imports the parent theme stylesheet, then allows for customizations to be made by way of the child theme stylesheet. While there is nothing wrong with the way that works, we’ve chosen to simplify things and just give the child theme it’s own stylesheet. In other words, if a child theme is being used, the style.css file in the child theme folder has complete control over the way the child theme looks. You don’t have to compare multiple stylesheets to look for and change style elements.
A Functions File
Most WordPress themes have a functions.php file – which is typically a file where you can control certain behaviors of how WordPress is run or how the theme outputs various things. For instance, a functions file can register sidebar widgets and how they are styled, as well as a number of other “function” related things. With Genesis, the functions.php is simple – it calls the entire framework to run and that is the only code found there. The great thing about the way Genesis is built, is that the child theme’s functions file is where a number of things occur – additional sidebar widgets can be registered, and from a development side, custom functions are defined as well as filtered and hooked. (more on that in upcoming posts.)
An Images Folder
This one is pretty self-explanatory – as with any WordPress theme, there is an images folder which is used to hold images that a theme requires. Use this to hold background images, icons, navbar gradients, and what not.
The easiest way for me to explain the relationship between a parent theme and child theme, at least in Genesis’ case is to relate it to a cell phone. The Genesis parent theme is the cell phone, and the child theme is the case you hold it in. You’ll always use the same phone, but if you want to change the way it looks on the outside, you put a cover on it to make it look different. The same holds true with a child theme – as that is what “decorates” the way your theme looks.