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.
Can you elaborate on this? You install the Genesis them first, then the child theme? How then do you activate the child theme? Same way as ‘parent’ theme? Why are there no install instructions somewhere?
thanks
Yes – that is correct, you load both of the themes into your wp-content/themes directory, then simply activate the child theme like any other. There is a README file in the theme’s folder that has instructions.
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?
Anything on what Lawrence has asked here relating to the widgets, please?
Thanks
No, we have no plans for copying Flexs’s approach.
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.
I have just purchased the Streamline Child theme, and having read above am I right in saying that I cannot use it without buying Genesis? After upload it just says Template missing.
I must admit it is not very clear at all in the purchase area if you do have to purchase Genesis too in order to use.
It states right above the price & purchase button: Streamline requires the Genesis framework.
The difference between the Genesis Theme Framework + {Child} Theme package and an individual {Child} Theme is the need to have the Genesis Framework.
The Child themes will only work if the Parent Theme {Genesis} is installed in your WordPress Theme directory and also, the {Child} theme. You only activate the Child theme though.
If, later, you decide that you want another {Child} Theme, you can purchase it via the lower-cost option, since you would already own the Genesis Theme Framework {Parent}.
So if this is your first purchase of a Genesis Child Theme, you MUST purchase the Genesis Theme Framework + {Child} package.
If you decide you want to purchase the Genesis/Streamline package, we can certainly refund the original purchase so that you won’t have to pay twice.
If creating a custom site utilizing the Genesis frame work . Is it best to use Genesis with a child theme. Or should one try to create their own child theme from scratch? What should I search in support area for that info? I have seen very nice customizations in the Showcase area.
Cheers
I must be dense, I just can’t understand or see the advantage to this framework/child idea. I was just beginning to understand how the WordPress pieces fit together – having more experience with Joomla – and now there’s a layer inside a layer. How is this better again, I’m not sure I understand that? It just doesn’t seem to make my life easier?
I think I will spend a couple of days reading the tutorials and posted messages. I like this whole support concept. This has to be one of the best support forum in the world. Good job.
Greetings,
I’m looking over themes til my webdesigner gets here soon!
I’m an author, have a site and newly committing to actually going to it and updating it.
Want to do a little blogging and bring twitter and my FB fan page to my site.
Sell me! Why would your theme be GREAT for me?
Thanks
RSVP quickly, I hope! He’s on his way!!!
L.
Hi Lydia … I think this will explain why & sell you …. http://technosailor.aaronbrazell.com/2010/04/07/battle-of-the-titans-premium-theme-framework-smackdown/5/
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
+1
Hey,
I have taken pro-plu package…but how do I download the latest Child Themes that you have released…just cant seem to understand that..
Thanks
Thanks for the insight! And great template Brian.
Im just stuck on customizing the header. For my Site I’d like to have my logo in the top left corner, Insted of the streamline logo. Is there a way to do this?
THANKS
Chris
Yes, we have a tutorial on the Support forum that shows you how.
Hey Brian.
Can i install Child & Genesis Theme Framework package to unlimited domains? i can’t get license infos thru the site… If so, does it mean everytime i run a new wp blog, i should install all of this 2 themes together?
Yes, you can install/use them on as many domains as you wish. If you plan on using a child theme, you will need to also install the Genesis parent theme as well.
Hey Hellen – as a purchaser of the “classic” Church theme, you are entitles to the Genesis theme framework and the Church “child” theme. I will email both of those to you.
Thank you for your quick response, does that mean I will get a refund on the $59.95 extra payment for the genesis purchase? Plus, can you tell me how to activate two themes at once? thank you so much.
Thanks for the clear explanations Brian!
question:
Can one purchase just a child theme without the genesis ? Or Genesis theme first? I guess it wouldn’t be a working “cell phone” without it?
Can the child theme be used on other framework themes?
Thanks,
Sabine
You can purchase a child them, but it requires the parent in order to work.
No, our child themes will only work on our Genesis Framework.
Hi Brian,
I am using an older version of streamline blue. Is it possible to upgrade to the Genesis Framework and the streamline child without a major effort? Is there a significant advantage in running the child at this time?
David – there’s really no easy way to upgrade without losing your customizations. This is why we created the Genesis theme framework, so it’s a matter of loading the Streamline child theme and starting from scratch.
Hey Guys (and gals),
Is there anyone here that is able to convert a PSD theme with standard coding to a Genesis Child Theme? I have been using StudioPress and Genesis, but we just had a new design concept brought to us that we would like to use (and I would like to use with Genesis if possible). The problem is that it is not coded for WordPress yet. This is a time-sensitive request unfortunately, but wasn’t sure exactly where to post. I am also a ProPlus Theme member. LOVE everything I can do with Genesis and StudioPress and it would be great if something was possible here! Thanks everyone.
Hey Justin, yes it is possible – do you have a link you can send with the design concept so we can take a look?