AppThemes Docs

Creating Grandchild Themes

Before we will begin, I would like to clarify that creating grandchild themes is not supported in WordPress, and probably will never be. We’re not going to exactly describe how to make grandchild themes but the title feels appropriate for the process described below. Fear not, it’s 100% WordPress legit!

Why Grandchild Themes Might be Needed

We wrote several tutorials about creating Child themes which are the easiest way to style and change default functionality of our themes. But since we opened the Marketplace, AppThemes and collaborating developers have created many, ready to install child themes for our app themes.

Let’s say now, that you are using ClassiPress, but you don’t want your site to look like every other ClassiPress site out there. To get a fresh new look to your site, you’ve decided to purchase child theme (like Flannel, Eva or SuccessWeb) from our marketplace or elsewhere.

Then, after some period of happily using your child theme, you have decided to change the styling a little, add new javascript, or re-design one of the templates. How do you make modifications to the child theme without creating problems for yourself?

The first thing that may come to mid is to create a “Grandchild Theme” in the same way a child theme is created. unfortunately, WordPress does not support that (it would create “sick” hierarchy where the final result would have long tree of dependencies).

So what do we do now?! There is an alternative – create a “Grandchild theme as a plugin”!

Step 1 – Plugin base

We can visit now “WordPress->Plugins” page in the WordPress admin, and see our newly created plugin. It should look something like this.

Step 2 – CSS and Javascript files

You can activate your new “Flannel – Grandchild” plugin, refresh the front page, and check view HTML source to ensure that the new files are there.

Step 3 – Styling

It’s as easy as creating styles any other place. For example, let’s change the text color in user welcome widget. Add the styles shown below to “grandchild-styles.css” file

.home .shadowblock .user p {
	color: #FF00FF;
}

You can see results here.

Step 4 – Scripting

Again, this is as easy as creating scripts in any other place. As an example, you can replace the footer ‘Powered by…’ note to ‘Changes made by…’ by adding the below scripts into “grandchild-scripts.js” file

jQuery(document).ready(function() {
 
	jQuery('div.right').html( "<p>Changes made by Your Name</p>" );
 
});

You should get something similar to what you see here.

Step 5 – Templates

To make replacing templates as easy as possible – in the same way it is done with child themes – we will use ‘template_include’ filter to check for templates in ‘templates’ folder in our plugin.

You can see the end result here.

Download

To give you a head start, you can download the plugin created in this tutorial by clicking here.

Like this tutorial? Subscribe and get the latest tutorials delivered straight to your inbox or feed reader.

Your rating: none
Rating: 4.8 - 21 votes