How to Create a Child Theme in Wordpress

Wordpress child theme of a child theme

You can't really create a "grandchild" theme in the normal sense - i.e make it the child theme of a child theme. It might technically be possible (Smashing Magazine said it was back in 2013) but it seems to be generally considered to be not "Wordpress legit".

What you can do is create the grandchild theme as a plugin - although be aware that it tends to be considered as bad practice because it's an indication of bad architecture, and if you need a grandchild theme "something is wrong". However I can see the logic if you are using a third party theme that is itself a child theme.

Should you use a grandchild theme?

The main practical difficulties with grandchild themes are they they adds another level of "moving parts" into your site, making it more difficult to maintain and debug.

The references I've listed below discuss the practicalities and disadvantages of grandchild themes, so you can decide if this is still an option for you:

  • WP Smith: A Theme Framework, Child Themes, & Grandchild Themes
  • Justin Tadlock:
  • Tom J. Nowell's answer on wordpress.stackexchange.com to the question "Is it possible to make grandchild themes?"


How to create a "grandchild theme" using a plugin:

If you decide that this is the way to go, the following describe how to go about creating a plugin for your "grandchild theme"

  • Mark Barnes: Don’t edit child themes – use grandchild themes!

  • AppThemes: Creating Grandchild Themes

Alternatives to grandchild themes:

Another suggestion is to make a copy of the child theme to customise, although this means it's no longer easy to upgrade the child theme.

This article offers a way of editing the child theme in a way that "minimizes the coupling between the changes you make and the original child theme" ...meaning you don't need a grandchild theme and the changes to your child theme should (hopefully) be minimal, making it easier to upgrade.

  • Nelio Software: GrandChild Themes – Effective customization of Child-themes (based on Frameworks)

Wordpress functions.php child theme

A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme.

How to Create a Child Theme

  1. Create child theme directory (common approach to name child theme as the parent theme plus -child added on the end.)
  2. Create style.css
  3. Create functions.php

The stylesheet must begin with the following (the stylesheet header):

/*
Theme Name: XYZ Child Theme
Theme URI: http://example.com/themes/spacious/
Description: XYZ Child theme
Author: ABC
Author URI: http://example.com
Template: XYZ
Version: 1.0
*/
/* =Theme customization starts here
------------------------------------------------------- */

A couple things to note:

  • You will need to replace the example text with the details relevant to your theme.
  • The Template line corresponds to the directory name of the parent theme, so adjust accordingly.

The final step is to enqueue the parent and child theme stylesheets inside functions.php like this:

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

Lastly, to activate the child theme, in the dashboard go to Appearance->Themes. Look for the child theme you created and activate it. That’s it. Also, make sure the parent theme is also present in the installed themes for the child theme to work. If you now visit your site, it should look all same just like when the parent theme was activated.

NOW, you can make changes in your child theme without any problem!

If you want to modify a parent theme function then you can simply enclose it in a conditional tag to check if a function that name has already been run:

<?php
if ( ! function_exists ( 'my_function' ) ) {
function my_function() {
// Contents of your function here.
}
}
?>

So if you enclose the functions in your parent theme in a conditional tag like this, WordPress will check if there is a function with the same name in your child theme that's already been run, and if that's the case it won't run the function from the parent theme.

Then when you come to write a function in your child theme which you want to override the one in the parent theme, you just give it the same name as the one in the parent theme:

<?php
function my_function() {
// Contents for your function override here.
}
?>

WordPress will run the function in the child theme first, and when it comes to the one in the parent theme, it'll check if it already exists and because it does, it won't run it.

And if you do not wanted to touch parent functions.php then you can:

  1. Assign child theme function higher priority:

    add_action( 'init', 'child_function', 15 );   
  2. Remove parent theme functions from hooks:

    remove_action( 'init', 'parent_function' );

How to create child theme?

You need to add code in style.css of child theme like as follows

/*
Theme Name: your child theme name
Theme URI: http://example.com/child-theme-url/
Description: your Child Theme desc
Author: your author name
Author URI: http://example.com
Template: enfold
Version: 1.0.0
*/

/* =Imports styles from the parent theme
-------------------------------------------------------------- */
@import url('../enfold/style.css');

Template : is the your parent theme folder name.
I hope this will help to resolve your problem.

How to move all modifications made in a parent theme to a child theme?

You shall first make a copy of the parent theme you have created lets call it modified-parent-theme.

Then import the original parent theme you chose (lets call it clean-parent-theme).

And Create an empty child theme as described here:

https://developer.wordpress.org/themes/advanced-topics/child-themes/#how-to-create-a-child-theme

Associate it to the parent theme you wanted to use in the main stylesheet: style.css

/*
Theme Name: Your Child Theme
Template: clean-parent-theme
*/

Then you can simply move the files you modified from your theme folder (modified-parent-theme) to the child theme directory.

Those files (like 404.php...) will override Parent theme's files automatically and you will keep the ability to update your parent theme without losing customisations.

WordPress Child Theme - General Understanding

Think of the child theme as a layer on top of the parent theme. By default (if you add nothing to the child theme other than a style.css file), all the templates from the parent theme will be used. The only thing you have to have is the style.css file. If you wanted to override the page.php template for instance, you would simply just make a page.php file in your child directory and WordPress will use that template instead of the parent template. Same goes for any template file or template part.

You can have a functions.php file in your child theme and it will be included in addition to the parent functions file.

Usually the parent's style.css file would be enqueued before the child's style.css file, but it depends on how those files get enqueued. The system is quite flexible.

how to create working Wordpress child theme

In function.php file,

Instead of "aloshop"

wp_enqueue_style( 'aloshop',get_stylesheet_directory_uri() . '/style.css',array( $parent_style ));

use "aloshop-child" to call style.css file.

wp_enqueue_style( 'aloshop-child',get_stylesheet_directory_uri() . '/style.css',array( $parent_style ));


Related Topics



Leave a reply



Submit