Do you want to create an Astra child theme manually in WordPress without using any third-party plugin?
Creating a child theme by using any plugin is very easy, but it is not safe.
It comes with risks of security for your website.
So, what is the most secure way to create any child theme without mishap, where you will be creating a child theme yourself?
Is there any easy way to create an Astra child theme out of harm’s way?
If you want a detailed answer, stay in touch with me. I am gonna explain the whole process.
Let’s get into it.
What Is A Child theme? & Why Do We Need It?
Before learning about the child theme, you need a little overview of what a parent theme is.
Basically, we call our main WordPress theme “A Parent Theme”, which you purchased from any WordPress theme provider, marketplace, or selected from the WordPress theme library.
Installing it, we create our basic version of the website.
There are millions of themes out there in the market. We choose as per our business.
It can be personal or professional like e-commerce or for your own blog etc.
We customize it according to our industry, by using user-friendly templates, page builders, and plugins.
Your WordPress theme is not the end product of developers.
From time to time, developers improve your theme by adding new features by making it lightweight.
Not updating your WordPress theme, you will lose lots of new features and won’t be able to make the most of it.
So you must use your updated version of your existing theme.
At the same time, you need to customize your parent theme code for your need.
But by updating your theme, you will lose all those custom modifications i.e., CSS, functions files that you did to your theme separately.
Now you connect these two gears through a solution, i.e., child theme. Read more about parent theme and child theme.
Create A Child Theme Manually Step by Step :
Creating a child theme on WordPress takes little coding work. Still, it is easy.
Even if you are a non-techie, simply follow the step-by-step guide.
I am going to cover everything but the kitchen sink.
1st Step : Via FTP/SFTP, SSH, or the File Browser in Control Panel
- First, you will have to access your site because you need to upload a few files.
The foremost approach to do this is via FileZilla (FTP/SFTP), SSH, or the file browser in your WordPress hosting provider Control Panel.
We are going to access our site Via File Manager with cPanel. You can read this official guide of cPanel Docs.
- Second, you need to create a folder where you can place all the required files of your child theme.
To create this folder, you will go to your file manager in the control panel of your hosting.
Here you can see in the picture.
- Third: Click on the public_html folder, go to the wp-content folder. Then go to themes.
Name this folder using the parent theme’s name.
Then add “-child”. Here we are creating a child theme of Astra.
If you are using another theme, make sure to give the name of your existing theme.
Here, the child theme folder name is “astra-child”.
This folder is the directory of your child theme.
2nd Step: Creating a Stylesheet for Your Child Theme
Now we need a stylesheet file that will contain all the CSS rules and declarations for the child theme.
So we are going to create a new text file, that is “style.css”.
If you don’t have CSS knowledge, you can get a beginner guide from these websites and YouTube channels.
- CSS Tutorial – W3 School.
I personally learned HTML, CSS, JavaScript from w3school.com. It is the best platform for beginners.
- CSS Tutorial Zero To Hero By freeCodeCamp.org [YouTube].
From the freeCodeCamp YouTube channel, you will get an actual visual guide. Both these platforms are very handy.
In that stylesheet file, we need to create a header comment at the top of the file.
Without this comment, the stylesheet will not work, and it contains basic info about the child theme.
We just need to add two things, the theme name, and the parent theme’s name.
You can also add other information like this description, author name, versions, and tags. Here, you can see-
/*
Theme Name: Astra Child
Theme URI: http://wpthememonk.com/astra-child
Description: Use Astra Child Theme as per your need.
Author: Krishna Nath
Author URI: https://www.wpastra.com
Template: astra
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: astra
Text Domain: astrachild
*/3rd Step: Enqueue The Parent and Child Theme Stylesheet
The finishing line is: enqueue the parent and child theme stylesheets if it is needed.
- Now, what is Enqueue?
We need to connect the parent theme to the child theme.
When you connect the child theme to the parent, whatever you will be doing in your child theme files, it will override the parent theme’s files.
Not only CSS but PHP, JavaScript, and unchanging resources like images too.
It operates the same templates, but it enables you to override whatever file of the parent theme.
You link your modifications to the child theme, while the parent theme continues untouched and unaffected because it sits on the top of the parent theme.
That is Enqueue in simple words.
To Do That:
Now we need to add a short line of code that connects the parent theme to the child.
The everyday method was: importing the parent theme stylesheets using @import inside style.css.
Now, it has become an old-school process, and it is not recommended by WordPress either, because it takes time to load the stylesheet.
You know how important the load-time is. If your site take more than 3 sec to load, 57% of visitors will leave your site instantly and 80% of visitors won’t come back.
Even, nearly half of those visitors will share the negative impact to their friends that they experienced.
We choose this method when we are going to change a few codes in our child theme.
Then we need this code:
@import url("../astra/style.css");
Method Recommended by WordPress:
You know how important your page load time is. Google is hard-nosed on its policies.
So your theme must load quickly.
To have an optimized page load time, we are going to use this method.
Always remember: If you have a fully loaded site, you must have to use this method.
It requires a bit of coding knowledge, a few php codes.
The advanced way- enqueue the stylesheets : adding a wp_enqueue_scripts action and using wp_enqueue_style () in our child theme’s functions.php.
Now, you need to go to our WordPress admin, then click on appearance > theme editor.
Now, we must create another file in your child theme directory, naming it function.php.
Lastly, add the code below-
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>Add Custom Code Additionally to Astra Additional CSS File:
1st Step:
You know there are 180+ ready to import starter websites!
Here, I have selected—Personal Fitness Trainer Template.
I am going to customize this template, adding CSS. (You will customize the way you want).
2nd Step:
Once you activate the child theme, just click on the customize button.
Then scroll down until you get the Additional CSS section, then click on it.
3rd Step:
In the very last part of that customizing box, you will get a blank area where you can add or change your custom CSS tag, which will override the parent theme.
Here, I want to change the color of this starter template. Right now it is black.
I am going to make it red. Have a look at this picture below.
After adding this code, I am going to click on publish.
You can see it is red now. (If you don’t have any coding, you can hire any freelance WordPress developer from any freelance platform like Fiverr, Upwork, Freelancer, etc.).
Hurrah! It is that easy.
How to Delete Astra Child Theme:
Deleting an Astra child theme is like walking in the park, but it might not be straightforward if you don’t do it one after the other.
All we have to do is go to the Appearance >Theme.
Then activate your parent theme first, next click on the child theme.
Delete it.
You will see that your parent theme is working on your site.
Warning! After Deleting your child theme, you will lose all those custom modifications that you made to your site separately in child theme folders.
Is Creating A Child Theme Manually The Safest Way To Create A Child Theme?
Yes. Absolutely. It takes some PHP and CSS codes, but you don’t have to install any other third-party plug-in.
Is There Any Other Way to Create a Child Theme?
Yes. Using a plugin and if the theme provider provides it officially.
Do I Actually Need a Child Theme in 2022
Not really. There are a few methods. Following them, you can add additional files to your theme without creating any child theme for your site. You can read it here.
On a final note:
Creating any child theme manually takes little coding work, but it is not that hard. In fact, there is a big reason for security.
If you follow this step-by-step guide that I have so shown above, you can create it smoothly, though there is another easy method.
Isn’t it a more secure way to create a child theme? What do you think?
Sharing Is Caring!
About The Author
