GrandChild Themes – Effective customization of Child-themes (based on Frameworks)

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!

As far as I know, “all” WordPress themes provide a Settings page that permits the customization of a few aspects of the theme, such as the addition of custom CSS fragments or the inclusion of JavaScript code. Therefore, if you have to customize a theme, I recommend you first look for the specific settings it offers and, if you find what you need there, use it. However, there are some situations in which the offered options are not specific enough and, therefore, you must tweak the source code of a theme to achieve the expected results. In these cases, I recommend you use Child Themes:

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:

1. Create two new folders inside the Jane theme’s root folder: jane/original and jane/customizations.
2. Place inside the original folder the files you will modify. In our case, jane/original/style.css and jane/original/functions.php.
3. Create the same files inside the customizations folder: jane/customizations/style.css and jane/customizations/functions.php.
4. Create the same files inside the theme’s root folder (they are no longer there): jane/style.css and jane/functions.php.
5. Make sure that the files in step 4 include the contents from steps 2 and 3.
6. 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:

• jane/
  • style.css
  • functions.php
  • ...
  • original/
    • style.css
    • functions.php
  • customizations/
    • style.css
    • functions.php

Now, you are probably wondering how the files in step 4 look like (step 5). These are the results in our example.

• style.css:

  /*
     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);

• functions.php:

  <?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.