Posted on 1 Comment

Today I have learned One Thing: A Grand Child Theme as a Plugin, and more…

Yes, I said “and more” because I have read other posts regarding grand-child theme as a plugin, primarily by Mark Barnes in his blog with snippets that I am using right now and from my Professor, WPProf. Justin Tadlock. I start by quoting what Tadlock has ssaid in his blog

The idea of parent/child themes became popular because it allowed the parent theme to be updated while keeping customizations intact within a child theme. That system works great. The problems begin when a child theme is updated. Users tend to want to take advantage of the update, but they can’t upgrade because they’ve made customizations

Essentially, we’ve just added another layer to the preexisting problem.. []

Justin clearly differentiates

  • theme framework
  • parent theme,
  • child theme, and
  • grand-child theme

As I always say, Mr. Radlock is very rational, and his logic is simple and easy for me to understand. Well I am not a native English speaker, and I am not a WordPress graduate either. So I can see how difficult it is for me to understand what others are saying when I read their articles on WordPress. This sounds subjective, but I am just saying the truth for myself.

Below is the diagram for reference that Mr. Tadlock has presented in his blog

Theme structure when using a framework, parent theme, and child theme
Theme structure when using a framework, parent theme, and child theme

Theme framework is inside parent theme, and child theme is at the same level as the parent theme.

Next I am going to quote what Mark Barnes said on his blog about this very topic:

Child themes are the easiest way to style WordPress sites. Rather than create a site from scratch, you can create a theme that shares most of its code and styling with a parent theme. The benefits of creating a child theme instead of editing the main theme is that if the main theme gets updates, none of your changes are lost.

But what if you need to modify a child theme? If you’re working with a Framework, like Genesis, it’s very likely you are already using a child theme – and editing that brings about all the disadvantages of editing a parent theme – you lose your changes if the theme is ever updated.

The solution is surprisingly simple. Instead of editing the child theme, create a grandchild theme. It’s very similar to creating a child theme, except you do it via a plugin. You add your custom functions to the plugin, just as you normally would in functions.php (though remember your plugin will be called much earlier than functions.php, so you’ll need to make sure that any code in your plugin only runs when an action is fired).


So far so good, so far I understand what Tadlock and Barnes are saying here. The next challenge for me is this very question,

  • Can I call more than One Grand Child Theme in this one plugin?

Thankfully, the answer is “Yes, absolutely, I can call as many grand child as possible.

This is what I have added

  1. I added a “if ( current_theme_supports( ‘grand-child-theme’ ) ): statement
  2. Then call “what is the name of support, in this case, I have named two different names for two separate style.css; the first one is “hyk-style.css” and “hykchild.css”
  3. These two styles were previously my child themes, but I am now making them become grand-child themes. In fact I can create as many grand child themes as I want.
  4. Then go to the Child Theme “functions.php” and add_theme_support there. These are the two add_theme_supports that I have added for the two Grand Child Style I mentioned above: “add_theme_support( ‘hyk-style’ );
    add_theme_support( ‘hyc-gc-style’ );”
  5. Here is two example of such “if_current_theme_support”
if ( current_theme_supports( 'grand-child-theme' ) ){ if ( current_theme_supports( 'grand-child-theme' ) ){     wp_register_style ('grandchild_style', plugins_url('hyk-style.css', __FILE__).'', array(), $timestamp); }

if ( current_theme_supports( 'hyc-gc-style' ) ){     wp_register_style ('grandchild_style', plugins_url('hykchild.css', __FILE__).'', array(), $timestamp);}

What I do after all these is to comment and uncomment on both

  • add_theme_support( ‘hyk-style’ ); and
  • add_theme_support( ‘hyc-gc-style’ );

If I un-comment “add_theme_support( ‘hyk-style’ ); ” then the grand-child theme delivers “add_theme_support( ‘hyc-gc-style’ );” into my Child Theme.

I must remind myself that I cannot add_support to both of them, because the grand-child theme will call both styles which is not what I want to do.

I hope this is clear for now.

Before I end, I found out that there is another article on grandchild theme by  ·that was written in 2014, “A Theme Framework, Child Themes, & Grandchild Themes“. His explanation makes sense for me of what Justin Tadlock has said in his article, and this is a good article to read.

Posted on Leave a comment

ScreenShots of Hybrid Child Theme So far

Posted on Leave a comment

How I Call YUI CSS Grids in My Hybrid WordPress Theme

I have found there are four ways so far. The first one is by calling it via cdn library simply by using “google.load(“yui”, “2.7.0”); just after the <body> tag in my blog theme header. This looks very simple and the easiest one, but I must admit, I have not yet used this even once. I cannot give any opinion on this. I will do so sometime later.

The second method is commonly used, directly calling the link like this on the header.php of the theme.
<!--Include YUI Loader: -->
<script type="text/javascript"

This is just to call the library. After that we need to call the functions or the reasons we called YUI Library as follows:
<!--Use YUI Loader to bring in your other dependencies: -->
<script type="text/javascript">
// Instantiate and configure YUI Loader:
(function() {
var loader = new YAHOO.util.YUILoader({
base: "",
require: ["utilities","container","tabview","reset-fonts-grids","datatable"],
onSuccess: function() {
//instantiate your DataTable here...
// Load the files using the insert() method.

We can see here, we are calling “reset-fonts-grids”, “skin”, “tabview” and whatever functions we want to use in our blog.

I have used this method for long time now and I have developed some child-themes using this method. However, as commonly known, this is not the way that most bloggers would recommend us to call a JS or CSS library.

Then I used a third way, that is, using “media.php” file under the ‘functions’ folder of my them. If you are familiar with our Hybrid Theme Framework, then you will know what I am talking about here. This “functions” folder is my Hybrid Child Folder, under /library/ folder. In fact my Hybrid Child Themes also use the same structure as the Hybrid Theme folders.

In media.php file, I call any library I would like to call, I register those js, then I enqueue them

wp_enqueue_script( 'yui-utilities' );
wp_enqueue_script( 'yui-tabview' );
wp_enqueue_script( 'yui-bubbling-core' );
wp_enqueue_script( 'bubbling-dispatcher' );
wp_enqueue_script( 'bubbling-accordion' );

I want to use YUI Tabiew and bubbling core, that helps my theme to display tooltips, as you can see in this theme. That is why I call YUI ‘utilities.js’ and then YUI ‘tabview.js” plus bubbling ‘core.js’

A third way of calling YUI Library is directly from the theme functions.php, by adding ” add_action(‘wp_enqueue_scripts’, ‘yahoowp_init’, 11 );” For this function, then I will use

if ( ! function_exists('yahoowp_init' ) ) {
 function yahoowp_init() {

The last way is to call it from a WordPress Plugins folder. I created the media.php file and changed it into a plugin, then I activated the plugin in order to call the Yahoo! UI Library that I needed. I think I will dig more into this method in order to keep my child theme clean so that it can be easily updated.

I will explain more on what these “calls” or “functions” do to my Hybrid WordPress Child Themes in separate entries.