Nelio's blog

Latest News and Updates in Nelio's World

parent-child-in-the-air.jpg

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.

David AguileraGrandChild Themes – Effective customization of Child-themes (based on Frameworks)
Share this post

5 comments

Join the conversation
  • Greg Turner - April 8, 2014 reply

    You wrote, “When you have to adapt a child theme, there is no other option than the modification of the source code of the child theme. ” This is absolutely false. There is another way. I have yet to find any change to the child theme that can not be put into a specially written plugin.

    David Aguilera - April 8, 2014 reply

    Thanks, Greg! You are absolutely right. The sentence was too hard… ;-) I edited the post and specified that one may write a plugin for creating grandchild themes.

  • Bass Jobsen - May 11, 2014 reply

    Hi David,

    Thanks for writing this post. Very interesting subject. The problem is not new, but your solution is at least useful. What is your advice for theme developers? I’m currently developing JBST. Although developed as an Framework is see the problem you mentioned many time. Most themes on themes.jbst.eu are child themes of our JBST parent theme. These child themes work well, but indeed updating is a risk after optimizations and changes to the code.
    JBST has a built-in Less compiler, Less code can be saved to the database and preserved when updating the theme.
    Other files such as functions.php, styles.css and less/custom.less will be overwritten when updating.
    For the coming third version of JBST i will pay more attention to this problem. For version three will do the following things:

    Users can separably update and have under version control both the theme and the core.
    1) remove /functions/ to /core/ and release /core/ separated from the theme(s). All themes such as sold on themes.jbst.eu or released on wordpress.org should have their own version of the core. Creating a child theme (of any parent including the core) will be easy now and the way to go. Developers can update the parent theme including core or the parent only without touching the modifications in the child theme.
    What do you think about that? Did I forgot something? Please let me know.
    And last but not least should i consider to wrap the core functions in a plugin too? Such as for instance https://github.com/vafour/vafpress-framework-plugin

    2) make all Less code independent of WordPress / PHP code
    To make it possible to compile the Less code with Grunt or Gulp.

    Other suggestion? Thanks and regards.

    Bass

    David Aguilera - May 12, 2014 reply

    Bass,

    Thanks for your comment and for sharing your own experience. Unfortunately, I think theme developers do not have many options here. If you want to release and updated version of a child theme (which was possibly tuned by the user), there’re going to be conflicts. In my opinion, we should teach our users the problems they may encounter when modifying a child and the importance of being careful. For example, this post tries to teach an important lesson: whenever you (user) update a child theme, make sure the changes you make can be easily stored somewhere else save! If the theme’s updated, you’ll have your customized files somewhere.

    Another option that’s worth trying for customizing child themes is implementing the changes as a plugin, as Greg pointed out.

    Now, regarding your questions, I am not sure I understood you properly. What you are saying is that you have a parent theme P and a child theme C. The idea is that, before releasing C, you build C such that it includes all the relevant parent files. This way, when you users install C, they do not need P, which means that C will be (from the user’s point of view) a parent theme. Is this right? If that’s the case… yeah! It should work, and it looks quite neat to me.

    Please, let us know how this workflow works!

    Regards,

    Bass Jobsen - May 14, 2014 reply

    Hi David,

    Thanks for your quick and comprehensive response. Your example with P and C is exactly what i’m going to do and yes, i will keep you updated.
    C in this case will be a parent theme from the user’s point of view indeed.
    Adding the relevant parent’s files to C can also be done with a plugin i think. Main problem with the plugin is that we can’t release such a theme on wordpress.org. Theme which requires a plugin to install are not accepted.

    Thanks and regards,

    Bass

Join the conversation