Children WordPress Themes – What are they for and how to create them?

Tutorial on how to create a Child Theme for your Main Theme

Kids WordPress Themes

If you want to have a lot of headaches with your WordPress site, start by changing the theme of your installation without creating a child theme first. You need to know about THEMES CHILDREN!

Because headache is something you don't want, this article aims to explain what it's for and how to create Child Themes and how these themes can save your peace when you need to make a modification to your site.

Many people complain about missing their changes due to total ignorance about the Children's Themes. The complaint ranges from features that have stopped working (third-party codes that are gone), to banners that have gone missing from the pages.

Understanding this feature makes it possible for you to make changes to an original theme of WordPress and not suffer from their losses in future updates.

So simbora for the content!!!

What is a Son Theme?

The best setting for Child Theme is definition found on the official WordPress website:

"A child theme is a theme that inherits the features and styles of another theme, called the parent theme."

When you create a child theme, it is all "based" on an existing theme. The moment you create a Child Theme the existing theme becomes the Father Theme.

There is no Son Theme without father theme, for it depends completely on its father to function. It will do nothing and cannot be activated without the original theme present.

The child theme is who will receive the changes in place of the Father Theme. That's the great advantage of using it and that's what will rid your life of certain headaches.

You'll understand this better in the next topic.

Why use child themes?

There are two big reasons:

The first big reason is to preserve the features and functionality of the parent theme that have changed and would be fatally lost in a future update.

The second big reason is to make changes, but considering inheriting the main features of the original theme.

When to use a Child Theme?

You'll use The Child Theme when you need to deliver something customized, but in an agile way that maintains the main features of the original theme. Or when you need to make minor changes to the theme.

When is it not indicated to use Child Themes?

It is not indicated to use the child theme when you intend to drastically change the Theme.

By doing this you stop inheriting the features of the main theme and spend a lot of time in development which contradicts one of the main features of using The Children's Themes which is agility.

In this case it is indicated that a Theme of Zero be constructed.

How to create a Child Theme

Now let's go to a walkthrough explaining how to create Child Themes and that you can already apply the knowledge acquired here in your installation.

But if you want to learn with more riches of detail, in the Web Designer PRO Course we have a whole module on Children's Themes.

Web Designer PRO- Online Training - Online Web Design Course

1 - Creating the Theme folder

The first thing is to access the directory in the WordPress installation where the themes are located. By accessing, via FTP, the directory where the WordPress installation files are located, it is in "wp-content/themes".

in the folder "themes" you'll find a list of themes. You must create a new folder in this directory, which folder will receive the Child Theme files.

You must rename this folder to the name you intend to use in child theme. Do not use spaces in the name to avoid causing errors.

In the example of this article the folder will be called "fundamentals-of-design-theme" which corresponds to the name Fundamentals of Design Theme.

This folder should have two files that you will create (style.css is functions.php) and that will be the minimum for your Child Theme to work.

In short we will have:

  • the child theme folder;
  • the style.css file;
  • the functions.php file.

2 - Creating the style sheet (style.css)

The file "style.css" it is mandatory for the Child Theme to work.

You can use an HTML editor to create this file. With notepad it is already possible to create this file making sure that the extension is ".css".

At the top of the file should be inserted a header with information about the new theme and referencing the Parent Theme.

In our example, the Son Theme will be built from the theme "Twenty Twenty" which is a standard WordPress theme and that should be present in the installation.

In your case you will have your own theme that you will want to create the Child Theme.

Let's go to the example (read each statement):

/*
Theme Name: Fundamentals of Design Theme (Here is the name of Theme Son)
Theme URI: https://wordpress.org/themes/twentytwenty/ (Here's the Theme address in the Themes Directory of the WordPress website, if any)
Description: Twenty Twenty Child Theme (Here describes that the Theme is the son of the Twenty Twenty theme)
Author: David Arty
Author URI: https://davidarty.com (Theme author website)
Template: twentytwenty (Fundamental and mandatory part for operation - This name corresponds to the name of the Parent Theme folder)
Version: 1.0.0 (Version)
License: GNU General Public License v2 or later (License)
License URI: http://www.gnu.org/licenses/gpl-2.0.html (License Address)
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready (Tags describing theme features)
Text Domain: twentytwenty (Enables theme metadata to be translated)
*/

In fact, much of this code is not required if your theme is not distributed to the community. Then you can sum it up with the most important parts for the theme functionality. See below:

/*
Theme Name: Fundamentos do Design Theme
Description: Twenty Twenty Child Theme
Template: twentytwenty
Text Domain: twentytwenty
*/

Reinforcement here attention to the name present in the line Template. This name must match the folder name of the Parent Theme for everything to work.

The next lines of the file are dedicated to the CSS styles that will replace the Parent Theme styles.

After this edit in the file you should go up for your hosting, in the child theme folder, and you can activate the Theme in WordPress.

Child theme to activate

When you're activating Child Theme in the WordPress panel, there in Appearance/Themes, you'll notice that it doesn't have a skin. But we will resolve this issue on a topic later.

You can also test the new theme by visiting a page of the site. And you'll be amazed by a page with no style at all.

Page without CSS styles
Page without CSS styles

But don't worry! We're on the right track! This will be fixed in the next step when queuing the CSS files using the "functions.php".

3 - Queue the style sheets of the parent theme and child theme through the "functions.php" files

The "functions.php" is a file present in your WordPress theme, and it is loaded before any theme template file.

This file is powerful because it determines several features of a theme. For those who have advanced knowledge of PHP and WordPress documentation it will be possible to use this file to replace, or edit features present in the Parent Theme.

But here we will use to queue the stylesheets using wp_enqueue_scripts action is wp_enqueue_style() in the child theme.

Create a file by calling "functions" in your editor and save with the extension ".php". Enter the following code:

After editing go up the file "functions.php" to the Child Theme folder on your hosting to test.

One important thing to emphasize is that unlike styles, the "functions.php" of the Father Theme is carried before that of the Son Theme.

Now see that when visiting a page of the site the visual style will be loaded. But despite being the same as the Father Theme, the predominant style will always be the Son Theme.

What happens is that the Parent Theme styles are currently being loaded. But just overwrite them by changing property values in the file "style.css" of the Child Theme and that the look changes.

Testing a child theme with minor changes

To verify the effectiveness of creating the Child Theme you can test by making certain edits. For this you must master at least the CSS and HTML languages.

There are different levels of editing for a Child Theme according to complexity.

Low complexity editions

Where you edit with CSS some existing HTML element in the Parent Theme without changing or other HTML Elements.

A simple example that serves to test whether the child theme is working is to change the color of a title from a page. Here's an example.

Step 1:

We first inspect the HTML element through the Browser Inspector in use to identify the name of the CSS selector.

Inspecting HTML element

Step 2:

Now we take the selector identified in the HTML code and use it to set a new color for the titles through CSS in the file "style.css" of the Son Theme.

stylizing page title

We saved the file and went up to the Child Theme folder. We've uploaded the page to see if the main title has changed to red color.

Page with color change (red) in page title

Changing the color of the title to the red color is the final confirmation that the Child Theme is working.

If you can get here you are enabled to set up a Child Theme.

What has been exposed so far is essential so that more complex changes can be made from this point. However the types of editing treated below would be indicated to know a little PHP.

Medium complexity editions

This issue is when you need to change an HTML element in a PHP theme file. In this case you need to upload a copy of the Parent Theme file to the Child Theme folder.

WordPress themes are composed of several template files in PHP (in addition to CSS and JS). They are modular and reusable files, used to generate web pages on your WordPress site. Some template files (such as the header and footer template) are used on all pages of your site, while others are used only under specific conditions.

You can see the relationship of these files in the Model Hierarchy no site WordPress.

Changes to these files will be made in The Child Theme. When you upload one of these files to the Child Theme Folder, it will assume all functions at the expense of the existing file in the Parent Theme.

Use this feature sparingly. If you believe you should edit a large amount of files that make up the Theme, consider whether it's no longer appropriate to create a Theme from scratch instead of a Child Theme.

Not to mention that any adjustment so the Theme developer makes to any original file will not be passed on to the Child Theme in future updates. Child Theme only inherits the functionality of the files that are only in the Parent Theme directory.

A simple example is to include a subtitle (tags Headline) in the file responsible for displaying the site header (header.php).

NOTE:In the event of a PHP error, avoid editing between the PHP opening and closing tags(" and "?" >) if you're not sure what you're doing.

High complexity editions

Here you need good knowledge of PHP and WordPress documentation.

This type of editing aims to change some line of PHP code in a specific file and as in the previous topic should be used sparingly. Or change a parent theme feature through the "functions.php" or also include a new feature.

Child Themes Setup Video Tutorial

To reinforce what you learned here in the article I provide a video below that shows the configuration of a Child Theme in a practical way. Check!

Conclusion on Children's Themes

If you need to make specific changes and don't want those changes to be lost in future updates the use of WordPress Child Themes is the way to go.

It is common for people to complain about missing changes to their WordPress sites, and Child Themes is to avoid this. But as mentioned in the article, use consciously not to lose the full potential of the main theme and in a way that makes the development process agile for your project.

Now tell me in the comments what you think about The Children's Themes.

Enjoy and share this content with your friends!!!

Hug!!

Ed Francisco

hello! This is Ed Francisco, a Chief of Design since its first lines of content and codes.

Speaking of code, I believe HTML is the most remarkable web technology that has allowed me to get to where I am, and also write these lines about me for you.

I have a degree in Production Technology (this is where I got to know HTML) and a Technician in Digital Production, Web and Multimedia (where I improved my knowledge of HTML).

I'm from São Paulo from the East Zone. I ventured trying to unravel the mysteries of the web since 2008.