skip to Main Content

How to Create a WordPress Child Theme

You have spent a lot of time creating the ideal theme for your WordPress site and you want to make modifications and customization adjustments without risking the site’s look and functionality. Creating a WordPress child theme allows you to make changes and experiment without fear of losing the original content and design elements.

Whatever level of experience you have at creating files and updating coding, mistakes happen that can impact the style and function of the site while you are making changes and experimenting with style and design elements. A WordPress child theme offers the complete freedom to try out new elements without risking losing anything from the original site. Simply create an identical version of the site and work off that child version while the parent theme retains the original.

When you create a secondary child theme WordPress the characteristics of the parent theme can be used to customize coding to update the theme without having the changes overwriting the original site. All changes you make are tracked and separated from the parent site to keep the integrity of the site while adjustments and updates are being made.

What Is A Child Theme?

If you are new to the world of website design and development, you may be asking what is a child theme and how does it work? When you create a child theme WordPress is allowing you to make minor or wholesale changes to your WordPress site without losing the look, style, and functionality of the original.

How a WordPress Child Theme Works

A WordPress child theme is saved and stored in an individual directory separate from the parent theme with its own style and function parameters in style.css and functions.php files. Additional files can be added as needed that are not used in the parent theme. Styling and layout details can be modified using any relevant .css and .php files regardless of whether they are present in the parent theme.

Figuring out how to create a child theme allows you to get the most of a customized design update without losing the parent theme’s basic function elements. WordPress will load your sub-theme first and fill in any missing styles or functions.

Benefits and Features of How to Make Child Theme in WordPress

Learning how to create child theme WordPress adds a wide range of benefits and features to the process of redesigning or modifying your website. A child theme can be customized to you specific needs and preferences and allows you to work from the foundation established to improve and adjust the original site.

The following are benefits when you learn how to create a child theme for your WordPress website:

Modifications and updates are portable and replicable

Customization is kept separate from the parent theme

Parent themes can be updated without risking losing any changes made in the child theme

Test modifications and updates without risk of losing original theme, look, and functionality

Save time spent developing website by using existing thematic and design elements

Working on an existing design and development is an effective educational tool to learn more about WordPress website design and administration

When to Use WordPress Child Theme

If you are making rather minor changes and modifications to your website, plugins can be purchased to make simple individual changes to the style and functionality of the site. There plenty of options available to update font styles, color schemes, and other minor updates to the site.

However, if you are looking for more of a comprehensive redesign that up change major style and function elements, it is best to learn how to make child theme in WordPress that will afford you the freedom and flexibility to experiment and make wholesale changes without losing the original design of the site on the parent theme.

How to Create Child Theme WordPress

WordPress has come a long way to help even the most inexperienced web developer and administrator create the ideal website for their purposes and applications. The user-friendly interface makes it easier than ever to follow step-by-step instructions for how to create a child theme for your website. To figure out how to make child theme in WordPress you will need to create a new theme directory, a stylesheet for your WordPress child theme, and pull in the styles from the parent theme.

  • Click File Manager in the hPanel.
  • Find the themes folder in the path “public_html > wp-content > themes.”
  • Create a new folder with a unique file name identifying the child theme separately from the parent theme. It may be easiest to simply add a -child suffix to the existing parent naming structure.
  • Create a style.ccs file inside the new folder you just created and populate it with the following code format:

/*

Theme Name: Child Theme Name

Theme URL: http://yourdomain.com

Description: Twenty Seventeen Child

Theme Author: Your Name

Author URL: http://yourdomain.com

Template: companyname

Version: 1.0.0

Text Domain: companyname-child

*/

  • Update the code to reflect your specific naming decisions so it will properly link to the parent theme. Save and close.
  • Create a functions.php folder in the WordPress child theme folder. The content will need to be updated with the child theme data and not the parent theme file content. Copy and paste the coding below into the blank functions.php file.

<?php

add_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_styles’ );

function enqueue_parent_styles() {

wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’/style.css’ );

}

  • Activate the child theme files you created by going to the website and accessing Appearance>Theme. It should look identical to the parent theme until you customize the date to your new child theme.

Customizing Your WordPress Child Theme

Now that you have the WordPress child theme set up, it is time to customize it and set up the modifications you have in mind. Adding new template files will override the files on the parent theme and allow you to modify and update styling and function parameters.

You will need a basic understanding of CCS rules and inspection of elements to recognize the code and class they are assigned to. Get started by clicking on Customize>Additional CCS in your new WordPress child theme. The following specific examples with code templates will help you change basic style and functionality elements on the site.

Change Background Color

The CCS role to use when changing the background color of your WordPress child theme:

.site-content-contain {

background-color: #DEF0F5;

position: relative;

}

Update the background-color: value to the color code of your choice.

Change Sidebar Color

Add color to the sidebar of the site by changing the background value in the following code sequence:

.widget {

background: #B9EBFA;

padding: 25px;

}

Change Font Values

Change type, size, and color of the font in your WordPress child theme by pasting the following code:

p {

color: teal;

}

p {

font-family: Georgia;

font-size: 18px;

}

To change the font parameters for elements like headers, titles, and link text, you will need to take the following steps:

  1. Right-click on the text and under Inspect find the CSS style link and open it in a new tab.
  2. Locate the specific code sections you want to edit by searching using CTRL+F and copying the code to the Additional CSS tab and change the values from there.

Change Post, Page Layouts

A WordPress child theme will override its parent style and function, though any new templates must use the same file name and folders that match the parent theme for changes to tack effect. An easy way to make major changes to the layout of posts and pages is to copy the master template files and paste them into the child theme directory and work from there.

Add, Remove Features

Over time, the way you want or need your website to function can change as your business changes. The functionality schemes you set up in the original design may not be as useful or pertinent as it once was. The child theme version of your site allows you to make changes to how the site works and reacts to the user experience while maintaining the original site.

When you create child theme WordPress allows you to add or remove features without affecting the parent theme. You have a separate functions.php file that you can adjust features and functionality. This file houses both PHP and native WordPress functions, or you can create your own function from scratch. These functions dictate the look of the site and how it reacts for the user experience.

  • To begin, open up the functions.php file created for the child theme and paste in the following code:

<?php
//* FUNCTION CODE GOES HERE

  • Next, you must let the child theme know the parent theme you are you are starting from. You can import the style sheet of the parent theme using the @import function, but this method will significantly slow down the process. The quicker and more direct way to do that by pasting the following code and inserting your specific information:

@import url(“../YOURNAME/style.css”);

If all has gone well to this point, the child theme should look identical to the parent theme. You can now customize the theme using the CSS to change the site’s color schemes, dimensions, fonts, and all other design elements throughout the site.

Troubleshooting How to Create a Child Theme

The process of creating and customizing a child theme in WordPress can be a complicated and confusing endeavor, especially for those with little experience in website development and design. There may be times throughout the process that certain style  byand functionality elements are not working or looking as expected. It can be frustrating to do everything right and still not get the results you were hoping for.

Follow these troubleshooting steps to find and resolve the issues:

  1. Make sure the child theme has been activated and that the parent theme is disabled.
  2. Refresh your browser’s cache, as well as those that were created by site plugins.
  3. If you go to settings and toggle the WP-debug function to “true” a message should direct you to the code causing the issue and which file it is in.
  4. Double check to make sure all the files you created for the child theme have been properly named and that the template hierarchy is correct.
  5. Make sure you have saved any changes made from a duplicated parent theme file.
  6. If you removed a function that is still firing, make sure the spelling of the function in the child theme is identical to its parent.

Tips for How to Make Child Theme in WordPress

When you learn how to make a child theme in WordPress you have a valuable tool to help improve your ability to improve your website in a major way. The following are some tips to maximize the effectiveness of creating a WordPress child theme:

  • Never delete the parent theme, even if you never plan on referring to it again. The child theme you have created will not work without an active parent theme.
  • Child themes are ideal when you want to edit a third party theme, as you will never lose the original version.
  • Keep in mind that each child theme needs its own stylesheet and functions file.
  • When WordPress detects two files with identical file names, it will always defer to the one that comes from a child theme, not the parent theme.
  • Pluggable functions can be overridden with a function that has the same name in the child theme.

Contact Buddha WP Today

Tastes and technology change fast in the digital age, making website functions seem outdated without regular updating and modifying the way the site looks and functions. A WordPress child theme allows you to make major changes and upgrades without compromising the information and integrity of the original website.

If you can learn how to make child themes in WordPress it will open up a variety of options and unparalleled flexibility when making large updates to your existing website style and functionality. You can make changes and customize thematic elements without the risk of losing or compromising the original, existing parent theme.

For more information on how to make a child theme in WordPress or to take advantage of the best WordPress resource in the industry, contact the WordPress specialists at Buddha WP today.

This Post Has 0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *