Why should you never customize WordPress on an existing parent theme? What happens to your settings when you update the theme you are using?
The answer is that they are lost, and your hard work of building a site in accordance with your brand and your messaging guidelines and preferences will be lost as well.
A child theme allows you to create a separate CSS stylesheet and add additional functionality that will not be lost or affected when the parent theme is updated.
This can be done manually or by installing a plugin to create a child theme. Let’s start with the manual process.
Create a new directory
Start by creating a new directory for your child theme. You can use an FTP client or access the existing wp-content / themes directory through cPanel.
To use cPanel, go to your hosting control panel. Select a file manager and navigate to the directory where WordPress is installed.
It is usually found in a directory named public_html. Find and open the wp-content folder. Click Create New Folder and enter a name for your child theme. Make sure to give it a name that you will recognize later. A good example is nameofparenttheme-child.
Do not include spaces in the filename to avoid errors.
Due to internal processing, the folder name must include the name of the parent theme (theme “slug”), as shown in the example below.
Create a CSS Style Sheet
Style sheets are used in WordPress themes for two reasons.
- The placement of styles affects the look and feel of your site.
- The main theme style sheet is where WordPress looks for information about the theme.
You might not want to add new styles to the child theme. However, the stylesheet still needs to exist to define features such as your theme name and parent theme name.
Hence, you need to create a new stylesheet for your child theme. So, your next step is to create a text file for your CSS stylesheet that will define the rules governing the appearance of your child theme.
The child theme’s CSS file will take precedence over the parent theme.
You need to include the following information in the text file:
- The name of your theme.
- The name of the parent directory of the theme.
- Title and description that make sense.
Remember to include the following header comment at the top of the file in your stylesheet. WordPress will read this information and know that a child theme is being used.
You want to pay close attention to the template tag. It tells WordPress what your child’s parent theme is. Please note that the folder your parent theme is in is case sensitive.
Technically, you can now activate your child theme. However, if you want to create a more complex child theme, you will need to add your own PHP functions.
Create a functions.php file in the child theme (in the same directory as the style.css file you created). Things like additional message formats should be added here.
As with your CSS file, changes or additions to your PHP file will automatically merge or override parent functions.
For things like message formats, which are added with add_theme_support (), they act as overrides, not merges.
When using add_theme_support (), you need to take some additional steps for the child theme to override the parent.
This can be tricky, so refer to the post by WordPress theme review team leader William Patton about using WordPress post formats.
Add Styles and Text to Override the Main Appearance Function
Your next step is to make sure that your child theme either inherits the functions and styles of the parent theme, or reflects the new ones you want to use.
Styles are used to change the look of your site. Scripts extend functionality. The way you add styles and scripts to your WordPress site is as important as the content of the files.
How to achieve this in WordPress.
Queuing refers to the way that styles and scripts are added to WordPress sites so that they can influence what users see when they visit your site.
Using multiple plugins to achieve the same result often leads to compatibility issues and site breakdowns.
Wp_enqueue not only improves the performance of your website by reducing plug-in overhead, it also improves the user experience.
How to use “wp_enqueue”
To display styles for your child theme, you will need to use a function called wp_enqueue_style ().
This function accepts several bits of information, but the most important are the name (or “handle”) and location of the file.
Inside your functions.php file add the following code.
This code adds the stylesheet from the parent directory and then also adds the stylesheet for the child that we created earlier. Note that the parent-style text must match the parent theme name with -style appended to the end.
Activate your child’s theme
If you have created files for your child theme on the server in the wp-content / themes / yourthemename folder, then it will be available in the WordPress dashboard for activation.
- Log in to your control panel.
- Select Appearance> Themes.
- Your child theme should be on the list.
- Select Preview to see how the site looks with the new child theme.
- When you’re satisfied with the way it looks, click Activate to launch it.
If you created your child theme not on the server, but in the wp-content / themes / yourthemename folder, you should archive the new child theme folder.
- Log into your WordPress dashboard.
- Select Appearance> Themes.
- Click Add New.
- Select a theme to download.
- Drag the zipped file into the new box or click the file selector and navigate to it on your computer.
- Once downloaded, you can preview and activate it.
Add Template Files
To override other templates, you can copy them from the parent theme to the child theme. Any template files that have the same name in the child as in the parent act as overrides. Then change the content of the templates as needed.
To add new templates, just create a new file with the correct name and add your own content. The section above explains the manual process.
Now let’s take a look at how to create child themes using a WordPress plugin.
Use WordPress Plugin
Log into your WordPress dashboard. Click Plugins> Add New. Find a child theme.
The first plugin you’ll see is the child theme configurator. As you can see in the screenshot above, this is a good choice because it is:
- Compatible with the current version of WP.
- Has many installations.
- Was recently updated.
Click Install Now> Activate. The next step is to go to Tools and select child themes.
Find and select the parent theme from the drop-down menu. Select Analyze to make sure your theme is suitable for use as a child theme.
Below is a step-by-step guide to setting up the child theme configurator. If you decide to use a different WordPress plugin, you can easily find a guide on how to set it up.
As you now know, child themes are separate themes, some of which depend on the parent theme.
When you are using a child theme, WordPress will look for the child before the parent and follow the style and functionality of the child if it exists.
Save a lot of time, hassle and future headaches when updating a parent theme by creating a child theme that will not be affected by the update.