WordPress child theme: what is it for

WordPress child theme: what is it for


Do you really need a WordPress child theme ? In this article, I will explain to you what it is for, in which case you should use it and how to create it …

1 – WordPress child theme: what is it for?

A child theme inherits the functionality and design of the parent theme and allows to modify it by adding custom code (PHP, JavaScript and CSS scripts).

Using a child theme is a “good practice” and a safe solution to modify your parent theme or to add new features to your site.

⚠️ Important: Under no circumstances should you make changes directly in the parent theme, as these will be lost in a future update or could damage your site if your code contains errors.

Did you create your WordPress site on your own or did you entrust its design to a service provider? Check if your site is well built, if its architecture is good and if the best practices have been carried out … My WordPress guide in PDF accompanies you step by step in the creation of your site but also in the verification and understanding of it. Do not delay in correcting the “mistakes of the past”.

2 – Why and when to use a child theme?

Once you have chosen your WordPress theme, you can create and install a child theme, but concretely, this is optional and it won’t be useful only if you need to code new features or if you need to edit files present in the parent theme.

This means that you will need to have good knowledge of programming languages ​​(PHP – HTML – JS). If not, then your child theme will be UNNECESSARY.

For example, if you are using a page builder such as Divi Builder or Elementor Pro this greatly reduces the need to install a child theme on your site.

Indeed, these tools are so powerful that you can perform most of the extensive customizations directly on the site, without having to code PHP, HTML, JavaScript or CSS in a child theme. And that is great news for all users who have no coding skills!

So to summarize: a YES child theme is a good practice… But if you don’t know how to code, it’s absolutely useless!

I prefer to insist on this subject, because I receive many messages regularly: how to create a child theme? What’s the point ? Is it useful? If you are asking yourself these questions, you don’t really need to create one. Some students or users take their heads for hours because their child theme does not work… Honestly, forget it 😇 If you don’t know how to code a child theme (which only requires a few lines of code), then you won’t know how to code the rest either. And so, it will not serve you …

3 – How to create a WordPress child theme?

If, on the other hand, you know what to do with your child theme, have a fondness for code and have some ideas and skills to make changes to your parent theme, then go for it!

In fact, creating a child theme is not that complicated to achieve.

It might contradict my previous talk, but if you don’t know how to code you are able to do it in a matter of minutes.

There are many tutorials on this subject on the web and the official WordPress documentation can help you.

If you want create your own WordPress child theme, you need the parent theme files as well as a text editor such as :

To retrieve the parent theme folder, just upload your free theme since official WordPress catalog and save it on your computer.

If it is a paid theme, you can download it from your account on the official store of the theme on which you ordered.

Step 1: Create the style.css file

The CSS language allows you to act on the appearance of the elements of a web page: change the colors or the size of the font, add margins, etc.

If the theme offers a lot of customization options, you may not need to resort to adding custom CSS, knowing that you need a minimum of knowledge about it. If you are interested in learning CSS, there are many resources on the Internet on the subject (here for example).

The style.css file is required for the proper functioning of your child theme.

It can be used to add CSS code which will be taken into account instead of that of the parent theme.

Note, however, that a field dedicated to adding CSS is also available in the administration of your site, via the tab Appearance> Customize> Additional CSS. This can save you from using the child theme’s stylesheet.

Each WordPress theme is made up of various folders and files whose basic architecture is common to all themes. Some themes have more files / folders than others, as you can see:

Child theme - style.css file
Each parent theme has a file style.css

The file you need for create your child theme is the file style.css. Just locate it in the parent theme folder, open it with a code editor, copy the first lines of the file and paste them into a file of the same name, which will be used to create your child theme.

Style.css file
Get the header from the parent file to create the child file
  1. Open the file style.css from parent theme using a text editor such as SublimText. Locate the comments placed at the beginning of the file, starting with the characters / * and ending with * /. Select the header code (including the characters / * and * /) and copy it to a blank document also named style.css, created using your text editor. The name of the file is very important, be careful not to change it.
  2. The first line, Theme name:, is used to enter the name of your child theme. For my example, the child theme is called Twenty-twenty child.
  3. The second line is a line that does not exist in the parent theme file, you need to add it. It is Model: where you must enter the name of the directory (folder) of the parent theme. For my example, this is twenty-twenty (not Twenty Twenty). The other lines in the header can be left as they are, but you can edit them if you want or delete a few if needed.
  4. Edit the line The description: if necessary.
  5. Keep the line Text field: if it is present.
  6. Line Version: allows you to specify the version of your child theme, for example version 1.0.
  7. Line Author: allows you to enter the name of the author of the child theme (you) and Author URI: allows you to enter the author’s website address.
  8. Keep other lines of credit or license.

⚠️ Important: there is never a space before the colon (:) at the beginning of each line. If you add a space, your theme will not work.

So to summarize, here is what the code of the style.css file of your child theme should look like:

/*
Theme Name: Twenty Twenty Child
Template: twentytwenty
Description: Twenty Twenty Child Theme
Text Domain: twentytwenty
Version: 1.0
Author: La Webeuse
Author URI: https://la-webeuse.com/
Theme URI: https://wordpress.org/themes/twentytwenty/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

Step 2: create the functions.php file

Now let’s move on to the second essential file to create your WordPress child theme: the file functions.php.

The latter allows to queue the CSS of the parent theme and to code new features (in PHP and HTML).

Good to know: what you code in your file functions.php is not code that is interpreted in place parent code (as for CSS) but this code is interpreted extra from that of the parent theme.

This is what the code in the file should look like functions.php of your child theme:

Functions.php file
Functions.php file

This code is (usually) the same for all child themes, just copy the code below and paste it into a file named functions.php (created for the occasion):

< ?php 
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

For now, this file does not need anything more to work and it is after this that you can add PHP code to bring new features to your theme.

Step 3: Create the screenshot.png file

The file screenshot.png is optional.

This is the image that illustrates the theme in the administration of your site. If you don’t add this file to the child theme’s folder, no image will be displayed on the tab Appearance> Themes (but your theme will still be functional).

However, an image that indicates that it is the child theme of such or such theme makes it easier to spot it:

Screenshot.png file
The file screenshot.png is optional but it allows you to easily locate your theme.

You can create this image using image processing software or use any 1200 * 900px image, named screenshot.png.

Important

The parent theme must be installed for the child theme to be functional. In the image above, you notice that three themes are installed: Twenty Twenty, Twenty Twenty Child and Twenty Seventeen. Even if you are not using it, it is recommended to have at least one other theme installed in addition to the theme activated on your site (it will act as a fallback theme). Remove other unused themes that can represent security holes if you don’t update them.

Step 4: Assemble Your WordPress Child Theme Folder

Now that you have all the files you need for your WordPress child theme, you just need to bring them together in one folder named as the name of the parent theme folder with the suffix -child.

For example, in the case of the theme Twenty twenty, the name of the parent theme folder being twenty-twenty, the folder of the child theme will be named twenty-twenty-child.

Assembly of the child theme

To install the child theme on your site, compress the child theme folder at ZIP format and upload it from the site administration (tab Appearance> Theme> Add> Upload).

Once the child theme is installed and activated, you can start the customizations (tab Appearance> Customize) as you would for a parent theme. The child theme inherits all the options from its parent!

do you know that The Webeuse offers training to help you find your place on the Web?

Pack of 4 training ebooks in PDF

4 – In conclusion: do you need a WordPress child theme?

Well, you got it, creating and installing a child theme is a recommended best practice, but you also understand that it is not mandatory.

To be honest, I who mainly use the Divi theme, I hardly need to use a child theme anymore since Divi has its Theme Builder. A theme builder is a tool that allows you to customize any file of the parent theme directly from the site using blocks and modules… And without knowing how to code! So if you are using a tool that offers the functionality of Theme Builder, creating a child theme is almost useless.

Tip: there are child theme generators!

A child theme might not work if you forget a single comma or add an unwanted space, for example. To avoid this kind of error, you can use an online child theme builder. There are several such as the one proposed by WP Cooking Pot or that of Page creation frame. There is also a WordPress plugin which allows you to easily create your child theme.



Source link

Leave a Reply