WordPress themes also follow a similar path, and that is why the mechanism of child themes was built. Actually, child themes are the recommended way of making modifications to a theme ( the parent ).
If you want to change something about the theme you’re using (change something within its source files, that is), then you should do it through a child theme.
The whole idea of a child theme is that you can modify, and add to the functionality of that parent theme without modifying it directly. The parent remains intact, everything is built into the child theme.
A child theme consists of at least one directory (the child theme directory) and two files (style.css and functions.php), which you will need to create:
- The child theme directory
Your child theme’s stylesheet (style.css) must begin with the following things.
- 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. You may be working with a different theme, so adjust accordingly.
The final step is to enqueue the parent and child theme stylesheets. Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice, as it increases the amount of time it takes style sheets to load. The correct method of enqueuing the parent theme stylesheet is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme’s functions.php.
You will therefore need to create a functions.php in your child theme directory. The first line of your child theme’s functions.php will be an opening PHP tag (<?php), after which you can enqueue your parent and child theme stylesheets.
The following example function will only work if your Parent Theme uses only one main style.css to hold all of the css. If your child theme has more than one .css file (eg. ie.css, style.css, main.css) then you will have to make sure to maintain all of the Parent Theme dependencies.
If your child theme style.css contains actual CSS code (as it normally does), you will need to enqueue it as well. Setting ‘parent-style’ as a dependency will ensure that the child theme stylesheet loads after it. Including the child theme version number ensures that you can bust cache also for the child theme.
Note: When you need to include files that reside within your child theme’s directory structure, you will use get_stylesheet_directory(). Because the parent template’s style.css is replaced by your child theme’s style.css, and your style.css resides in the root of your child theme’s subdirectory, get_stylesheet_directory() points to your child theme’s directory (not the parent theme’s directory).
Setting up Child Theme
From a user’s perspective, using child themes is no different from using standard themes.
- You just go to your WordPress admin, navigate to Appearance > Themes page.
- Click on the Add New button. If your child theme came as a zip file, then you need to click on the ‘Upload Theme’ button. This will show you theme upload option.
- Click on choose file to select the theme zip file from your computer and then click on ‘Install Now’ button.
- After installing both parent and child themes, you can go ahead and activate the child theme.
Note: Keep in mind that you don’t need to activate the parent theme in order to use the child theme.
Note: WordPress will now upload the theme zip file from your computer and install it. It will also check if the parent theme is installed. If parent theme is available from theme directory, then it will try to install it. Otherwise, it will let you know that you will need to install parent theme manually.
If it fails to install the parent theme, then you will not be able to activate the child theme. It will show your child theme as broken on the themes page.
Error “The parent theme could not be found. You will need to install the parent theme, (Theme Name), before you can use this child theme.” The parent theme is definitely installed.”
For customizing your child theme you can override files and functions from your parrent theme.
File override :
When you add a template file to your child theme this will override the parent theme files, but this doesn’t happen to the functions.php file. Both the functions.php file of the child and parent themes will be loaded into the application.
If you want to change more than just the stylesheet, your child theme can override any file in the parent theme: simply include a file of the same name in the child theme directory, and it will override the equivalent file in the parent theme directory when your site loads. For instance, if you want to change the PHP code for the site header, you can include a header.php in your child theme’s directory, and that file will be used instead of the parent theme’s header.php.
You can also include files in the child theme that are not included in the parent theme. For instance, you might want to create a more specific template than is found in your parent theme, such as a template for a specific page or category archive.
Function override :
The child theme functions.php file is loaded before the parents functions.php file, this means that you should be able to override any of the parents theme functions with your own functions.
Before examining the methods for overriding functions in your child themes, it helps to understand how functions work in parent and child themes.
Firstly, you need to know that all of the functions in your parent theme will be run when you’re using a child theme. You don’t have to add anything to your child theme’s functions file to make this happen.
There are three methods you can use to override functions from the parent theme into your child theme:
- Pluggable functions.
- Function priority.
- Removing functions from the hook they’re attached.
To override the parent function you need to add the same function into your child themes functions.php, then you can add your new functionality for that function
Open functions.php fiel from childe theme directory the file is empty , The first line of your child theme’s functions.php will be an opening PHP tag (
Pluggable functions are something you code into your parent theme, so they won’t be any use to you if you’re working with an existing parent theme that doesn’t have them.
To write a pluggable function, you simply enclose it in a conditional tag to check if a function with that name has already been run:
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 add a functions to your child theme, you will get a function is already defined error in your parents theme functions.php file. This is because the child theme function doesn’t override the parents theme function but will just define this function before the parents file is defined.
The way that you will be able to override this function is if the parent function is wrapped in a IF statement of function_exists.
If the functions in the parents theme does not have this IF statement then you are not be able to override any functions.
When you write functions you can assign them a priority, which tells WordPress when to run them. You do this when adding your function to an action or filter hook. WordPress will then run the functions attached to a given hook in ascending order of priority, so those with higher numbers will run last.
The function is attached to the init hook and has the priority. By default WordPress assigns a priority of 10 to functions which haven’t had a priority added, so to fire your function after it you use a number larger than 10.
Removing functions from the hook they’re attached
Sometimes running another function after the first one isn’t enough to override it—you need to make sure the function in the parent theme doesn’t run at all. In this case, you can remove the parent theme function from the hook it’s attached to, using the remove_action() or remove_filter() functions. The one you use will depend on whether the function is attached to an action hook or filter hook in the parent theme.
Once you’ve done this, you can simply write an alternative function to replace the parent theme function in your child theme’s functions file, or you can do nothing if all you wanted to do was remove the functionality from the parent theme.
Note that if you’re trying to remove a function using remove_action() or remove_filter() and the function has had a priority assigned to it, you must include the priority when removing it, or it won’t work.
Why use a Child Theme?
There are a few reasons why you would want to use a child theme:
- If you modify a theme directly and it is updated, then your modifications may be lost. By using a child theme you will ensure that your modifications are preserved.
- Using a child theme can speed up development time.
- Using a child theme is a great way to learn about WordPress theme development.
- Safe Updates. You can easily modify your website using child themes without ever changing the parent theme. When a new version of the parent theme appears, you can safely update it as all your modifications are saved in the child theme.
- Easy to Extend. A child theme has a great flexibility. It does not require writing a lot of code. You can modify only those template files and functions that you need.
Note : When you install one of our themes you must upload both parent and child theme folders to wp-content / themes but you should only activate the Child theme via Dashboard -> Appearance -> Themes.
- Modifying files from the Parent theme folder: While you should never edit files in your Parent theme, if you really must, the safest way to do it is to download a copy of the file you want to modify on your computer, make the changes, and then upload it into your child theme folder.
Note : This way of modifying the files can be used for any files from the parent theme — note that you must re-create the same folder structure in your child theme that exist in the parent theme in order for the modifications to take effect.