One of the things I like the most about WordPress is the huge set of available themes. You can have a completely new site within minutes, just by replacing your current theme with a new one. And not only this: all themes can be customized, one way or the other, with your specific needs!
A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme. Child themes allow you to modify, or add to the functionality of that parent theme. A child theme is the safest and easiest way to modify an existing theme, whether you want to make a few tiny changes or extensive changes. Instead of modifying the theme files directly, you can create a child theme and override within.
In this post I would like to talk about a problem we faced a few days back, during a migration to WordPress. The customer wanted to use a Genesis-based theme. For those who don’t know what Genesis is, it is a Framework (there are others, like Thesis) that simplifies the creation of new themes. Whenever you want to use a Genesis-based theme (for example, Jane), you have to install the Genesis theme and the theme you want to use, which is no more than a child theme that extends Genesis. The customer required some deep modifications to the theme, so we had to get our hands dirty and modify the theme’s source code… The problem? One cannot create a child theme of a child theme (a “grandchild theme”)!
When you have to adapt a child theme, there is no other option than the the easiest option is to modify the source code of the child theme (EDIT: you can also create a plugin to create a grandchild theme). This may entail some problems in the future, when the theme is updated. The only guideline I can recommend in such a situation is minimize the coupling between the changes you make and the original child theme.
In our particular case, we had to modify the files
style.css (we needed a few new lines) and
functions.php (we had to remove some hooks and add new ones). These are the steps we followed to avoid the copuling as much as possible:
- Create two new folders inside the Jane theme’s root folder:
- Place inside the original folder the files you will modify. In our case,
- Create the same files inside the customizations folder:
- Create the same files inside the theme’s root folder (they are no longer there):
- Make sure that the files in step 4 include the contents from steps 2 and 3.
- Do your customizations in the files create on step 3, and make sure to keep them somewhere safe (this way, if a theme update removes them, you’ll still have them).
The resulting folder tree structure is as follows:
Now, you are probably wondering how the files in step 4 look like (step 5). These are the results in our example.
/* Theme Name: jane Description: A chic and simple premium WordPress Theme. Author: Lindsey Riel Author URI: http://www.prettydarncute.com/ Version: 2.0.0 Tags: black, white, photography, clean, simple, plain Template: genesis Template Version: 2.0.0 */ @import url(original/style.css); @import url(customizations/style.css);
<?php require_once( 'original/functions.php' ); require_once( 'customizations/functions.php' ); ?>
As you can see, our modifications are somehow unrelated to the original version of the theme, so it is much easier to maintain and track the code. When the theme (Jane, in our case) is updated, you just need to repeat the process and, hopefully, the files inside the customizations folder will work out of the box! Keep in mind, however, that not all files inside a theme can be modified using this approach: adapting a template file, for example, would require to add the code “inline”.
I hope the previous steps help you, folks! And please, feel free to share your experience in the comments section.