If you’re a frequent WordPress user, you’re probably familiar with child themes. If you’re new to WordPress, or if you haven’t used child themes before, this post is for you!
In this article, we’ll explain the purpose of child themes and how to quickly create them. your own.
What are child themes?
A child theme allows you to make changes to your WordPress theme and keep them separate from your regular (“parent”) theme. They’re useful for a number of reasons, but mostly because they allow you to keep your theme up to date without erasing modifications in the process.
Simply put:
<ul
Why should you use a child theme?
There are several good reasons to use a child theme:
- It protects your parent theme from errors. If you make a modification to your theme and break your site in the process, it’s easy to fix. Just delete the child theme file and copy a new one from the parent theme. If you modified the parent theme directly, it will take much more time and effort to fix.
- Keep your customizations separate. It is always good practice to keep additions or modifications separate from the original file, as makes it easy to see and adjust the changes. Most WordPress themes have a designated “Custom CSS” section for precisely this reason.
- Your changes will not be erased if the theme is updated. Keeping your theme up to date -the date is essential for security reasons. But if you make changes to your parent theme, they might be removed after any update. The solution? Use a child theme. Child themes will remain the same even if you update the parent theme.
Step-by-step guide to creating a child theme
For this tutorial, I will be using our theme, Astra. Regardless of which theme you are using, the process should be basically the same.
There are three ways to create a child theme:
- Using our Astra Generator child theme
- By installing a child theme plugin
- By manually creating files and folders in your WordPress directory
Method 1: Using the Astra child theme Generator
Here at Astra, we have a powerful tool that allows you to create a child theme for our Astra theme. The Astra Child Theme Builder allows you to create a child theme with the click of a button.
To use the generator, go to this link and fill out the form. If you click on “Advanced Options”, you can add additional details such as Author, Description and Folder Name. You can also add a screenshot if you want.
Then click Build. The child theme will be downloaded to your computer.
You can add it to your site just like any other theme: go to Appearance> Themes then click Add New.
That’s it! You now have a new child theme, which you can edit directly in the Theme Editor.
Method 2: Use a plugin
There are several free plugins available that allow you to create a child theme. They all work more or less the same way, although some have unique features.
Sub Theme Configurator
With over 300,000 installations, this plugin is the one and only the most popular child theme plugin available. It has over a dozen options that allow you to customize your child theme.
Let’s see how to use this plugin to create a child theme.
1. Download the plugin from this link and upload it to your WordPress website.
2. After activating the plugin, go to Tools > Child Themes to use the plugin.
3. On the first tab, you’ll see a wizard for creating a child theme. Select your parent theme, then click the Analyze button to have the plugin evaluate it.
If your theme is suitable (as is the Astra theme), you will receive a confirmation message .
Below the confirmation message are a series of settings. First, give the theme directory a name. Note that this is the name of the folder, not the name of the theme itself.
Next, choose where to save the styles. You can use the default style.css file or save it in a separate style sheet.
In the next step, choose how the parent theme’s style sheet will be accessed. Read the Enqueue Style Sheet section below for more information on this process.
Open the theme attributes panel by clicking the button. Here you can add the child theme’s name, website, author, and author’s website.
In the last step, you can copy menus, widgets and other settings from your theme parent theme to child theme.
Finally, click the button to create your new Child Theme. Done!
Other Plugins
These other plugins work in a similar way.
Child Theme Helper: This plugin has a “Wizard” guides you through the process, step by step.
Generate Child Theme – This is a standard plugin for creating a child theme. It’s simpler and has less features than other options, allowing you to create the child theme more quickly.
Childify Me – Another solid plugin with a few different customization options.
Child Theme Creator by Orbisius – Another popular plugin, with over 30,000 installations.
Child Theme Generator – A simple but highly rated plugin.
Method 3: Create a child theme manually
If you’d rather create a child theme yourself, you can do that too!
Step 1: Go to your site via FTP/SFTP, S SH or File Explorer in cPanel
First, you’ll need to connect to your site in order to upload some files. The easiest way to do this is via FileZilla (FTP/SFTP), Putty (SSH) or the file explorer in your host’s control panel (cPanel or Plesk)
Not sure how to do it? Read one of the guides below.
- To access your site via FTP/SFTP, please read this guide.
- To access your site via SSH , read this guide.
- To access your site through the File Manager in your control panel with cPanel, read this guide.
- To access your site through the File manager in your control panel with Plesk, read this guide.
Once you are logged into the site, go to the /wp-content folder. Then go to /themes.
There, create a folder for the child theme and call it astra-child. The first part of the name should be the name of the parent theme, followed by a hyphen and the word child.
Step 2: Create the Style.css file
Now we need to create a file style.css to contain your CSS code. CSS, which stands for Cascading Style Sheets, is the style sheet language used to design elements on websites.
If you’re new to CSS, check out some of these beginner’s guides:
<ul
</ ul
Already comfortable using CSS? Open your favorite text editor, create a new file and save it as style.css.
Then copy and paste the text below. Be sure to change the content to match your own website or company name.
/* Theme Name: Astra Child Theme URI: http://example.com/astra-child Description: Astra Child Theme it’s an amazing theme. Author: Brainstorm Force 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 */
Then add the file to your site’s astra-child folder via FTP/SFTP, SSH or cPanel/Plesk file manager.
Step 3: Enqueue the stylesheet
Now we need to add a short line of code that connects the parent theme to the child theme.
There are two ways to do this. ; the former is easy but inefficient, while the latter takes more time but is recommended by WordPress.
Method 1
This first method is deprecated as it increases the amount of time it takes to takes to load the style sheet.However, it’s much simpler to do, and if your site isn’t particularly large, there are very few practical downsides.
This is especially true if you’re only doing a small number of edits to the child theme.
Simply add the following code to the end of your style.css file:
@import url(“../astra/style.css”);
Method 2
The second method is recommended by WordPress.org, but requires a bit more technical knowledge and is the preferred method, especially if you have a larger site and are trying to optimize page load time.
In the WordPress admin sidebar, go to Appearance> Theme Editor.
Select your child theme and browse to the file functions.php doesn’t have one, create it.
The first line of this file should be a PHP opening tag (<?php), followed by the following code:
add_action( ‘wp_enqueue_scripts’ , ‘ my_theme_enqueue_styles’); function my_theme_enqueue_styles() { wp_enqueue_style( ‘ astra-child’, get_stylesheet_uri(), array( astra ), wp_get_theme()->get(‘Version’) // this only works if you have Version in the header style); }
Ase Be sure to replace astra-child with your own child theme name and array(astra) with the parent theme’s slug.
Note that unlike the style.css file (or any other file) , the child theme version of functions.php does not overwrite the parent theme file. Rather, it just adds the code from the child file to the parent file. As such, you don’t need to copy the entire main theme file.
Step 4: Activate the theme
Once you have loaded the theme, open your WordPress admin and go to Appearance> Themes. Your theme should now appear in the list. Turn it on.
Since we haven’t added any new code yet, the child theme will be exactly the same as your parent theme.
Step 5 : Add customizations
Now, let’s add some customizations. To do this, you’ll need to be familiar with HTML and CSS. If not, check out our links above.
The easiest way to make a specific change to your website’s theme is with your browser’s inspect tool. In most browsers, including Google Chrome, Mozilla Firefox, and Apple Safari, you can do this by right-clicking on an item. When you do this, a developer panel will appear on the side of your browser window.
For example, right-click the top header, then select Inspect. strong>. This will open the developer sidebar.
Since we specifically inspected the header, you can see the HTML
tag displayed. Since we want to modify this header (and all headers), we want to target the H1 element.
To do this, go to Appearance> Edit Themes . On the right hand side, select your child’s theme. Then add the following code to the style.css file.
h1 { color: blue; }
Save the file and return to your site page. The header title should now be blue.
Great job! You have created a child theme. Any time you want to make changes to your theme, add them to this style.css file, and not to your parent theme’s style.css file.
You can also upload the modified file directly via FTP/ SFTP , SSH, or the file manager.
Other WordPress theme tips
How to change other files in your theme
Each The WordPress theme (including our Astra theme) is made up of several .php files. These include comments.php, header.php, body.php, footer.php, etc.
These files are called “template” files and should not be modified directly, for the same reason that you should not modify styling. css. If you want to change any of them, you can follow a process similar to what we did above.
For this example, we’ll use the header.php file.
Open the file and copy all the content . Then paste those contents into a new text file on your computer. Make any modifications to it, making sure you don’t change anything else.
When you’re done, save it as header.php and upload it to the child theme folder via FTP/SFTP, SSH, or File. Manager.
For future changes, edit it directly in the WordPress editor (by going to the Theme Editor) or re-upload the updated file.
Functions.php
We can also do something similar for functions.php, the file that controls many of the processes on your site. Unlike the style.css file (or any other file), the child theme version of functions.php does not overwrite the parent theme file.
Rather, it simply adds the code from the child file to the file. major. .
- First, open the functions.php file in your theme.
- Copy all the text, then paste it into a new text document.
- Make any changes, then save it as functions.php.
- Finally, upload the file to the same folder as the child theme.
Conclusion
That sums it up! As a reminder, you should always try to use a child theme when making modifications to a WordPress theme. While it may seem easier to quickly modify the parent theme, in the long run you’ll have more trouble.
If you’re subscribed to one of our paid Astra plans, our support team can help you set up a child theme on your WordPress website. Just contact us!
Are you using a child theme? What method do you use to make changes? Let us know in the comments!
.