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 WordPress.com 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.. [http://justintadlock.com/]

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

<https://www.wp-code.com/>

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 google.com 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"
src="http://ajax.googleapis.com/ajax/libs/yui/2.6.0/build/yuiloader/yuiloader-min.js">
</script>

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: "http://ajax.googleapis.com/ajax/libs/yui/2.6.0/build/",
require: ["utilities","container","tabview","reset-fonts-grids","datatable"],
onSuccess: function() {
//instantiate your DataTable here...
}
});
// Load the files using the insert() method.
loader.insert();
})();
</script></code

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.

Posted on Leave a comment

Add Action Hack to Register Sidebars, Menus and Widgets

Hybrid Child Menu Order

I have been editing, WordPress.com themes for more than 5 years not, and I have been doing these just by learning from books but mostly learning by doing. Today, 29 June 2017 I found myself confused why some of my extended/ additional widgets appear before Main Sidebar/ Widgets and why others appear after main sidebar/ widgets

/* Register sidebars. */ add_action( 'init', 'hybrid_theme_register_sidebars', 11 );

Hybrid Child Theme Sidebars / Widgets after adding action hooks
Hybrid Child Theme Sidebars / Widgets after adding action hooks

For example in my Hybrid Theme we have Primary, Secondary and Subsidiary Sidebars, plus Before Container, Before Content, After Singular, After Content and After Content Widgets. These are the “Main Sidebar/ Widgets” that come with the Hybrid Theme. Now, when I want to add more widgets/ sidebars to my Child Theme that I call “Hybrid Child Theme”. I added Home Sidebar, Archive Sidebar, Home Top Sidebar, Home Middle Sidebar and Home Bottom Sidebar, then when I click on Admin “Apperaance/Widgets”, it will appear like below:

Hybrid Theme Child Widgets before Changing the Order
Hybrid Theme Child Widgets before Changing the Order

After adding Number “11” to the add_action in functions.php, then the order of the additional widgets and sidebars follow after primary widgets and sidebars, as seen in the following image

Exactly the same thing happens with Menus, the primary and secondary menus appear after the additional menus in Child Theme if we register the additional menus without adding Number “11” or “12” or whatever it is after add_action Hooks. The following image shows the order of menus before adding the number

Hybrid Child Menu Order
Hybrid Child Menu Order Before Adding No. 11

Now after adding number “11” in this cafe, like this

then the following is what happens on the Admin Menu section

Hybrid Child Menu Order
Hybrid Child Menu Order after Adding No. 12

/* Register additional menus for HybridChild theme. */ /* Register additional menus for HybridChild theme. */ add_action( 'init', 'hybrid_child_register_menus', 11 );

For me this is a good revelation, from learning by doing. I know many people in the world out there have known this for long time, but for me at least, this is a useful experience to write and post it here.

Posted on Leave a comment

Hello world! I am Yahoo! Addict, and Hybrid Theme Lover

I am Yahoo! Addict, and Hybrid Theme Lover

Yes, I love Yahoo! its elegance display, and I love Hybrid Theme by Justin Tadlock for its simple, comprehensive, and more importantly expandable rock solid WordPress.com theme called “the hybrid theme”, or it is named as “WordPress.com Theme Framework” by Mr. Tadlock himself.

The Hybrid Core Framework is easy to extend to whatever I want. For example, I can add more menus and contents wherever I can, as well as create custom posts and do other things just by adding theme support “add_theme_support();” As I repeatedly say in this blog, the Hybrid Theme Framework is also structured in  a way that elementary theme developer will understand what these framework is doing for the theme.

I have added more things, pages, functions, widgets and menus, but I can still allowed to do so.

I do not want to bee too defensive to these framework, but I must acknowledge Hybrid WordPress Theme is the last one I have tried. For a few years I have been working with other theme framework, even I started with the “revolutionary work” on theme framework called “sandbox” at PlainTxt Blog, created by  Scott Allan Wallick.

I did spend sometime to learn how Sandbox WordpPress Theme