Do you know how to make a WordPress Child Theme?
OF course, your theme will look suitable for your website but at some points, you will need to edit them. Making changes to the child theme is a preferable choice to edit your site.
Also, learning about the child theme is one of the basic WordPress things you should know.
Let’s get through the process of creating a WordPress child theme.
Table of Contents
Why Should You Use Child Themes for WordPress?
In WordPress, a child theme acquires all the parent theme’s features, functionalities, and others. On the other side, editing the child theme without changing the parent one is possible. It will shorten the time and effort of editing the site for you.
Also, your WordPress theme updates stay safer and more stable. When you customize the child one, all changes and customizations on the parent will stay the same. Users can use this child theme on other WordPress websites as well.
Notices Before Making a Child Theme
To make a child theme WordPress, coding skill is required since you will work with HTML and CSS. Knowing what to change is significantly important. Besides, you will need a basic knowledge of PHP, at least copying/pasting the code snippets from other sources.
We sincerely advise that you should practice in the development environment. This is a place where you can do it without being scared to mess up your main site. It’s like you kill 2 birds with one stone: one is moving it to the testing field and one is used for theme development.
One more thing, the parent theme should fit the appearance and functionalities to your purposes. Indeed, the fewer changes you make, the better your site will become.
In the below parts, we will use the LearnPress theme as an example for a better illustration of the WordPress create child theme.
Building the First Child Theme
You have 2 options when making child themes WordPress. You may use the manual way to get familiar with all files. Otherwise, applying a plugin will work with complicated files and folders.
Now, we will begin the customization.
Using Code To Create WordPress Child Theme
To begin, you will open /wp-content/themes/ in the WordPress Installation and make a new folder for your WordPress child theme. Name it as you like.
Then, you have to create the first 2 files for your child theme. Open a text editor and paste the below code into the empty doc:
1 Theme Name: LP Child Theme
2 Theme URI: https://www.wpbeginner.com/
3 Description: A LearnPress child theme
4 Author: ThimPress
5 Author URI: https://thimpress.com
6 Template: learnpress
7 Version: 1.0.0
8 Text Domain: learnpresschildYou can change the information as you plan and save this file to your style.css file in the recent child theme’s folder. Well, you have just made the child theme’s main stylesheet.
Next, you will make a 2nd file to import the stylesheets from the parent theme. Make a new document in your text editor and copy this code:
1 /* enqueue scripts and style from parent theme */
2
3 function learnpress_styles() {
4 wp_enqueue_style( 'child-style', get_stylesheet_uri(),
5 array( 'learn-press-style' ), wp_get_theme()->get('Version') );
6 (
7 add_action( 'wp_enqueue_scripts', 'learnpress_styles');When you use LearnPress as the parent theme, this code will start working. Thus, most themes will work like this. Save this file and it will become your child theme’s functions.php folder.
After those steps, you will have a basic child theme. In the “Appearance”, choose “Themes” and “Activate”. Therefore, your site will begin to use the child theme. If you need to customize, move to the next part.
Using Plugins to Create WordPress Child Theme
We suggest you use the Child Theme Configurator plugin. Since it requires no coding, you can easily make changes and customizations.
First, install the plugin on your site. For more guides about plugin installation, see our guide about how to install WordPress plugins.
When activating, you go to “Tools” -> “Child Themes” and choose LearnPress in the parent theme asking popup. Choose “Analyze” to check the compatibility to be a parent theme. Next, you will have to name the child theme’s folder for saving files and where to save them. In the default setting, choose “Click to Edit Child Theme Attributes”. Then you will fulfill the child theme’s information.
When making a child theme manually, your child theme won’t inherit menus and tools from the parent theme. To solve it, use the Child Theme Configurator.
At last, choose “Create New Theme Child” to finish. In this step, your child theme will have the functions.php and style.css for further development. Apparently, remember to preview your child plugin. Afterward, you select “Activate & Publish” to publish your child theme.
Now, we will start customizing your WordPress child theme.
WordPress Child Theme’s Customization
We will create a child theme on WordPress a little unlike the parent theme by adding code to the file “style.css”.
Copy Code from the Firefox/Chrome Inspector
You can use the Inspector widgets of Chrome and Firefox to discover the needed CSS code. Besides, you can use these tools to access all sites’ CSS and HTML elements.
To see a CSS file of a post or o site, right-click and choose “Inspect”. Your screen will split into 2 halves and you can see the page’s CSS and HTML. When you move the mouse over the HTML lines, the inspector tool will show you in the uptop window. Also, do the CSS rules.
There will be a temporary color change in the back. To make it permanent, copy this CSS rule line and paste in the child theme’s style.css file:
1 body {
2 background-color: #fdf8ef;
3 )Save changes and preview the site. Besides, you can re-launch this for any element in the stylesheet of the theme. Well, we give you a full stylesheet for a child theme here:
1 Theme Name: WPB Child Theme
2 Theme URI: https://www.thimpress.com
3 Description: A LearnPress child theme
4 Author: ThimPress
5 Author URI: https://www.thimpress.com
6 Template: learnpress
7 Version: 1.0.0
8 Text Domain: learnpresschild
9 */
10
11 .site-title {
12 color: #7d7b77;
13 )
14 .site-description {
15 color: #aba8a2;
16 )
17 body {
18 background-color: #fdf8ef;
19 color: #7d7b77;
20 )
21 .entry-footer {
22 color: #aba8a2;
23 )
24 .entry-title {
25 color: #aba8a2;
26 font-weight: bold;
27 )
28 .widget-area {
29 color: #7d7b77;
30 )
Copy Code from the Parent Theme’s style.css File
As you can see, it’s possible to copy from the parent theme style.css file paste it to the child theme and customize it.
For instance, the code for the page’s background color is:
1 background-color: var(--global--color-background);‘–global–color-background’ is a variable used in the theme’s various places. You will have to change the value of the variable if you need to change the color in those places at the same time.
Move to /wp-content/themes/learnpress in the WordPress installation folder and open the file style.css in the text editor to look for the –global–color-background’s place. That variable can be changed with another variable. You can find a big bunch of color variables in the parent theme’s style.css file.
After selecting the suitable color options, you copy and paste that code line into the child theme’s style.css file, and replace the old ones with the chosen new ones for your color tendency. Then, the colors will be divided based on the planned color schemes. This process will make your color schemes consistent and quickly edited.
Customizing the Template Files of WordPress Theme
In a theme, file-handling areas in a website are called templates. The templates are usually named after the section they handle. Thus, some important sections are managed by various files or content templates.
To customize a template, find that file in the parent theme and copy it to the child theme. Then, open it in the text editor and start modifying it.
We will show you a tutorial for this process with the file footer.php. Copy it to the child theme’s folder and open it in a plain text editor. For example, let’s delete the “Proudly powered by WordPress” link in the footer and add a copyright notice. To start, delete all between the <div class=”powered-by”> tags.
1 <div class="powered-by">
2 <?php
3 printf(
4 /* translators: %s: WordPress. */
5 esc_html__( 'Proudly powered by %s.', 'learnpress' ),
6 '<a href="' . esc_url( __( 'https://wordpress.org/',
7 'learnpress' ) ) . '">WordPress</a>'
8 );
9 ?> </div><!-- .powered-by -->Then you will paste in the code you find below those tags in the example below.
1 <div class="powered-by">
2 <p>© Copyright <?php echo date("Y"); ?>. All rights reserved.</p>
3 </div><!-- .powered-by -->Choose “Save Changes” and when you come back to the site, you will see the new copyright notice.
Adding Functionalities to Your WordPress Child Theme
To change or add a function to your site, you will have to look for the functions.php file. This file uses PHP code to make this process run.
Usually, you are guided to copy and paste code snippets into the function.php file but they will be deleted when you update PHP or your theme. Therefore, we suggest you should use a child theme to add the code snippets. Well, let’s move to the adding widgets process. Add the code snippet into the functions.php file of the child theme.
1 <?php
2 // Register Sidebars
3 function custom_sidebars() {
4
5 $args = array(
6 'id' => 'custom_sidebar',
7 'name' => __( 'Custom Widget Area', 'text_domain' ),
8 'description' => __( 'A custom widget area', 'text_domain' ),
9 'before_title' => '<h3 class="widget-title">',
10 'after_title' => '</h3>',
11 'before_widget' => '<aside id="%1$s" class="widget %2$s">',
12 'after_widget' => '</aside>',
13 );
14 register_sidebar( $args );
15
16 )
17 add_action( 'widgets_init', 'custom_sidebars' );
18 ?>Save and navigate to “Appearance” -> “Widgets” to see the new tool. Additionally, you can look for more information about adding a function area. You can add lots of features by adding code snippets to your site’s functions.php file.
That’s all about how to create a child theme in WordPress. Let’s move to the part of the fixing error.
Fixing Errors When Create a Child Theme
You can meet any problem making a child theme at any moment. Therefore, you should not give up easily.
Syntax problems can be caused by some missing in the coding process. Also, it’s the most popular error that all users can meet. Besides, if things don’t go right, you can always delete the WordPress theme or child theme and start over.
Conclusion
We hope you can acquire knowledge about making a child theme through our article. Thanks for your readings!
Read more: How to Fix the HTTP Error 500 WordPress
Contact US | ThimPress:
Website: https://thimpress.com/
Fanpage: https://www.facebook.com/ThimPress
YouTube: https://www.youtube.com/c/ThimPressDesign
Twitter (X): https://twitter.com/thimpress
