Picture Guide To Develop Custom WordPress Child Themes in 2021
A child theme is a theme that adapts the theme and functional parts of its parent theme automatically. When you enable a child theme, WordPress tends to use its code for both design and functionality. As a result, if the child’s theme does not get to consume any code for updating existing functionality, WordPress will apply the parent theme's files to your website.
The following are three major reasons why you should use a child theme on your website:
- To save and maintain modifications: TWhen you update a parent theme, the changes you made to your theme's files are lost.
- To keep your codes structured:Create separate files for individual code snippets. This will make it easier to track your changes.
- To accelerate the development:There is no need to redo the code because child themes inherit functionality from parent themes, making development quicker and faster.
The steps for developing a child theme for your WordPress website are as follows:-
STEP 1: Begin the process of generating a new theme directory in your WordPress installation.
Go to your site's theme directory (/wp-content/themes) using your cPanel account login (or an FTP client).
Create a child theme directory with the same name as the parent theme. For best practices, the child theme should have the same name as the parent theme.
STEP 2: Create a CSS file (style.css)
Start filling up your brand new child theme's empty theme directory. To do so, we must first create a style sheet and then add code to define its name and parent theme. While you generate a style sheet for your child theme, the code will import the style sheet from the parent theme.
If you want to work with numerous style sheets, you'll need to add the following code snippet.
Create a new style.css file in the new child theme directory (/wp-content/themes/).
Then, in the style.css file, copy and paste the following lines of code.
The values for theme name and template determine the name of the child theme as well as which theme WordPress should regard as the parent theme. The imported line imports the CSS rules from the parent theme into the child theme. As a result, when you activate the child theme on your website, the content and styling will be visible.
Apart from the changes you want to make to the theme's aesthetic, your child theme is technically ready to go at this point. Custom functionality can assist you in adding a functions.php file to your child theme's directory, allowing you to make modifications to the styling. So that you can skip Step 3 and go straight to Step 4.
STEP3: Building a functions.php file
WordPress developers frequently apply custom code to enhance the functionality of a WordPress theme. Remember that if you add custom code to your parent theme's functions.php file, the modifications you make will be overwritten when you update your theme. To avoid this, apply the necessary adjustments to a separate functions.php file for the child theme. Create a new file called functions.php in your child theme directory (i.e. /wp-content/themes/your child theme name), as seen in the image below.
Then, in the functions.php file, copy and paste the following lines of code:
In the code above, we simply inserted the PHP open tags to the functions.php file. For bespoke functionality, add its code below the comment line (i.e. Line 2).
To add many style sheets from your parent theme to your child theme without slowing down your site, use the wp_enqueue_style() method. Simply add the following lines of code to the functions.php file to accomplish this.
STEP 4: Activating the child theme that was created by hand
Now that our child theme is ready to use, we can activate it and test it on our WordPress site. Navigate to Appearance > Themes in the admin area of your site. The new child theme will appear in your list of installed themes. To preview your site, click the Activate button.
Final views on theme customization
What are the options for customizing child themes?
After you've finished installing and activating your child theme on your website, you can finally start modifying it!
Here are a few crucial items to consider or change as you prepare the design and functionality of your theme:
- Custom CSS styles can be added to your website.
Add it to Appearance > Editor, and from this page, you may also access the other files. - Make use of theme hooks
Filter hooks change existing functionalities, whereas action hooks provide additional functionality to your site's theme. - It's essential to include template files.
If you want to make large-scale changes to your theme, such as defining a new template, you can create template files for your child’s theme by following the same methods you used to create the style.css and functions.php files.