Child Themes

The child themes can be considered extensions to themes that are part of a parent theme. They let you modify the existing theme without editing the code of the theme. It is often that is as simple as minor color adjustments, but they can also be incredibly complex and can include customized overrides to the theme’s parent.

The article you’ll find out what the child and parent themes look like, the best way you can make your own modifications using child themes, as well as what elements of a parent theme that are able to be rewritten.

What are child and parent themes?

Themes that are parent themes

The majority of themes, unless they are an unrelated theme, are technically child themes. In essence, this means they are fully-functional themes, which are able to be downloaded and activated by WordPress.

The parent theme should have all the required files as specified within The the Theme Structure documentation. In addition, you don’t require anything extra to allow your theme to be an underlying theme.

Children themes

A child theme contains everything that is in its parent theme as default. This includes its design as well as the functions. However, it is also possible to modify the parent theme, without altering the parent theme’s file. That means you (or the children theme’s users) will still receive updates from the parent theme and not lose the modifications.

Themes for children:

• Your modifications should be adaptable and reproducible.
• Make sure customizations are separate from the theme’s parent.
• Let parent themes be changed without losing any modifications.
• You can save time on development since you’re writing only the code you’ll need.
• They are a great method to begin your journey towards creating full themes.

 

What is the grandchild theme?

It’s not possible at the moment. There only are two levels in the hierarchy of themes two levels: child and parent.

But, when it comes to building blocks are used exist, there are additional ways to present the content at the front of a website (they aren’t element of the layer that is called theme):

• WordPress it self (default theme.json)
• The Parent theme
• The Child theme
• Customizations by the user (can override theme.json templates, themes and patterns)

In a sense the user’s customization layer functions as the “grandchild” theme of sorts. The main difference is that the modifications are saved to the database, not the filesystem.

Beyond that there isn’t any conventional method for creating an installable theme for grandchild.

How do you create an child theme

Let’s make an alternative theme to The theme that is the default Twenty Twenty Four theme, which comes with WordPress.

Create the parent theme folder

Your child theme requires to be given a name. This could be whatever you would like your theme’s name to be however for this example let’s call your theme “Grand Sunrise.”

Create a new folder inside your wp-content/themes directory that contains a kebab-case variant of the name you want to use for your theme Grand-Sunrise.

Create an HTML0 style.css

The next step is make a new file called style.css. It’s the sole required file that allows a child theme to be in existence. The majority of style.css files should have a File Header, as well as the necessary header fields that are described in the Main Stylesheet documentation (please go through this document in case you haven’t already completed it).

As stated in the Main Stylesheet documentation, there is a second field required for declaring a motif an infant theme.

 

There is a caveat for one of the Template field. It has to be a 100 100% match to the name of the folder for the theme’s parent folder, with respect to the theme folder in the wp-content/themes directory. In this case, we know that the Twenty Twenty-Four theme folder is located at wp-content/themes/twentytwentyfour. This means that the Template value has to be twentytwentyfour.

Install and then activate the child theme

If you’re not currently working in an environment that allows development, and you have your theme stored in the wp-content/themes folder, you’ll need transfer it to the folder immediately. Depending on your configuration you’ll have a few alternatives, but the simplest is to create a zip file of your theme. Then transfer it onto your testing website through Appearance > Themes Create New within your WordPress administrator.

For more details about how to integrate themes to WordPress site, check out the article Adding A New Theme on the WordPress Documentation website.

After your theme has been installed When you are ready, head to Themes > Appearance within your WordPress admin to locate the theme you have installed. Select the Activate button as seen in the image below:

 

It’s likely to look the same from the parent theme moment because you’ve not modified it yet. But you’ve successfully made an additional theme for your child.

The child’s themes can be customized

When you customize your child’s theme, the entire functionality that is covered in this manual is readily available. However, there are some points to keep in mind. These you’ll discover in the next sections.

loading style.css

 

Before moving on to this section, make sure to read the including assets guideline, that explains the process of loading style.css in greater depth. In the documentation, you’ll be able to be taught how to queue stylesheets using this WP_enqueue_Style() function on the appropriate hook (note that child themes are loaded prior to their parent themes).).

The best method to queue stylesheets is when the child theme is loaded with both the parent’s style.css as well as the theme’s style.css. However, not all themes can use this method. So, you need to look at your code for the theme that is used to find out the stylesheets it’s enqueuing. This differs for each theme and there aren’t any strict guidelines.

In the event that the primary theme load both stylessheets the child theme will not have to do anything. Its stylesheet will automatically loaded.

For this theme Twenty Twenty-Four theme, it doesn’t load a stylesheet any time. Therefore, you’ll need the ability to import your style.css using functions.php like this code snippet

 

If the theme you’re using only uses its own stylesheet it is also possible to make use of the above code to load the children theme’s style.css.

If the parent theme loads only the active theme’s stylesheet, such as via get_stylesheet_uri(), then it will load the child theme’s stylesheet. In this instance you might want to also query the stylesheet for your parent theme via functions.php Your code will look as follows:

 

Parts, templates, and patterns

If you are building your own children’s theme, you will have the option of overwriting any template, part or pattern within the theme that you are using. This is done by putting in an image file with the same name to the child theme. It is important to note that patterns should be registered in the same Slug field.

You can also include brand new parts, templates or patterns in your child’s theme even if they don’t exist in the parent theme. For more information on these options, check out these sections in the Handbook:

• Templates
• Patterns

Utilizing functions.php

Contrary to patterns and templates, the functions.php file in the child theme doesn’t supersede functions.php file that is in the theme that is parent. Actually, they’re both loaded and the child theme is loaded prior to the parent.

In this way it is possible to modify the functions.php of the child theme is a simple, easy method to alter the functionality that a theme parent, or WordPress.

Imagine that you want to include the PHP feature to the theme. The most efficient method is to open the functions.php file and add the function in there. It’s not as a good idea because the following time that your template gets changed, your function will vanish!

It’s better to make an additional theme, and then incorporate your customized code into the children theme’s functions.php file. The function will perform exactly the same thing from there, but with the benefit of never be affected by any future changes to the parent theme.