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 theme 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 Theme Framework?
In short, a theme 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 theme framework and how it is structured.
What is a Child Theme?
A child theme is an extension of a theme 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 theme framework, I’ll go into detail with each one.
A Screenshot
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.
Theme Files
The Genesis theme 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.
A Stylesheet
Many theme 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 and sift through 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 theme 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 any images that a theme requires. Use this to hold background images, icons, navbar gradients, and what not.
In Conclusion
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.
About Brian Gardner
Brian, thanks for the great explanation of the child theme concept! I like the framework concept a lot, and I’m looking forward to trying Genesis (note to self: need to upgrade my StudioPress license).
One thing I’m curious about is what (if any) performance implications arise in the framework/child theme scenario? Similarly, does this complicate plug-in compatibility issues?
Hey Jeff – thanks for the kind words, and glad to hear you’re liking the concept. As far as I know, there shouldn’t be any issues with the framework/child theme scenario – it’s really no different than using any other theme. Even though they load as two, technically they function as one.
this all makes so much sense.
have set aside this weekend to play with Genesis (build a new client’s website using it).
please don’t let any last minute plans spoil my fun !
I also bought Genesis with the Mocha Theme – i took a short look yesterday and gonna play withit over the weekend. I think i dont need my WP Theme Bookmarks anymore
Im interessted in if the SEO Features of Genesis collide with the All in one SEO pack..
anyway – Great work! Love it!
If you use All In One SEO, the built-in Genesis SEO features are ignored.
Great Work Brian, have a site just in mind for this,
So, do we install Genesis and a child theme and then activate the child theme?
Presumably we can’t just install the child theme?
You’re correct, Andrew – Genesis must be installed first in order for the child theme to run.
Great post, Brian. When you have absolutely nothing else to keep you busy, would you consider writing a post about syntax and strategies for making typical mods? For us “old dogs,” who are more comfortable with old-school changes to sidebars and page templates, hard-coding category-x.php pages, etc., some of this new-fangled stuff is less than obvious. Maybe if I actually learned PHP instead of faking it, I’d be faster on my feet!
Possible topics would include: how best to use Genesis code to deploy different layouts for different post categories, strategies for multiple sidebars, and sidebars that combine widgetized and non-widgetized content.
Keep up the good work!
Brian et al
have learned a ton since the plunge into wordpress (a necessity of sorts seeing as i am definitely not a coder – though the deeper i get the more curious i’ve become — wish i had the time to learn more)
- my question is two fold – 1) as per blog about child themes – can we simply forward a design (PSD) and if approved you guys (and gals) will code for us? and 2) as per MarkR’s comments above does in inhibit our ability to make changes to the code (i have created multiple sidebars etc via trial & error cut and paste etc)
- i am also running an old rev magazine theme and chromeV2 which are great yet could use some updating and i am on the fence as to whether to migrate to a new theme or try to ‘build’ a child
- what i like about the child theme environment is hopefully the ability to make regular changes seeing as the web changes and any stale style or functionality is about as obvious as non-current content
- and by the way, the pool of resources and minds here is nothing short of awesome / thanks
Thank you Brian for the easy to understand explanation of parent and child themes. I finally get it!
Just when I was used to using Thesis…. I’ve opened up everything and am going through the tutorials now… but my question is regarding the css – isn’t it faster to load (cache?) the parent stylesheet and just add an over-riding child stylesheet? And if there are obvious benefits (less code – less FINDING the right code to edit in the stylesheet. All I need is firebug) – will this change in the future as more wp users get more comfortable with multiple stylesheets – what is the long term impact on my clients if I put in a ‘full’ stylesheet into the child theme?
Thesis doesn’t use a parent-child approach, so you can’t compare with Genesis.
With child themes, only the child theme style.css is served to the browser and the Genesis stylesheet is completely ignored. That’s why all CSS related to the child theme should be in the child theme’s stylesheet. So, in terms of performance there is no difference to the way a “normal” theme works in this respect. Clearly, in terms of stylesheet editing, it’s exactly the same as using a normal theme too – only one stylesheet to worry about.
Hi!
Can’t seem to find this info — if you purchase the Genesis Framework, are you then licensed to use it on multiple sites, or just one, as with the stand alone themes?
-Mike
You can use it on as many of your sites as you want.
Great, thanks!
Brian, I really like the setup here. Thanks for the Streamline child theme – it’s the one I like best in terms of customising to do a hundred different things.
I’ve been messing about with your friend Cory Miller’s Builder framework – your tutorial helped clarify the parent/child relationship better than any I’ve seen! One thing I like about the iThemes approach since Flexx is the ability to build a stucture with widgeted areas etc. Any plans for something similar with Genesis?
I love the basic guide for Genesis. Thank you so much for this wonderful framework. I can’t wait to play with it.
I am interested in the Mocha Child theme. Thanks for explaining the child theme scenario. I was trying to search forums but cant get in. I’d like to know if the header can be changed or the Mocha Font in header?
Viewing content and Tutorials on the forum is reserved for Members.
Yes, we have tutorials on changing the header.