How To Modify WordPress Theme Using Child Theme?

There are various great free and paid WordPress themes available. But what if you want to customize purchased theme per your own needs and preferences? There are so many examples of little things we all want to change. In that case it is needed to modify WordPress theme.

A color here, a font size there, perhaps different call to action on the buttons. They are various reasons site owner would like to make changes on his “parent” theme. The problem is modified theme changes will be lost once you update WordPress theme.

Creating “child theme” solve this by providing all of the functionality of chosen theme while allowing you to update it without the fear of losing any changes. In this case basic understanding of CSS/HTML is required. Or copy/paste code snippets from other sources.

Big number of WordPress users modify WordPress theme without the use of child theme. This may be due to a lack of understanding as to what a child theme is, or due to the perceived difficulty of creating one.

 

What Are Pros & Cons of Using Child Theme?

Advantages and disadvantages are generic and based on common use cases. It can be different based on your requirements. Some advantages can be disadvantages in your  scenario.

It is recommended to carefully evaluate the pros and cons in the context of your site requirements. Do you really need a child theme? If your changes are minor, then you might be able to get away with plugins or just using the options in the theme.

If your changes are extensive and spread over a large number of files, then you might be better off creating your own theme. Is this the right parent theme? Choosing the right parent theme is crucial.

It should provide most of the required functions right out of the box, otherwise you will be customizing and overriding way too much. You should also make sure that the theme has the potential to stay around for a long period of time or at least as long as you plan to use it. It should also provide periodic updates, especially security updates.

 

PROS

1. Safe Updates

A child theme automatically inherits the parent theme’s features, styles and templates. This allows you to make changes to your site using child themes without ever modifying the parent theme. When a new version of the parent theme arrives, you can safely update it as all your modifications are saved in the child theme.

2. Easy to Extend

A child theme built on a powerful theme framework allows a great deal of flexibility without writing a lot of code. You can selectively modify only the template files and functions that you need without going through other template files. You can add new functionality and much more.

3. Fallback Safe

When you are creating a complete theme you need to think about all the possible scenarios and code for them. However, when you are working on a child theme and you forget to code for something, then there is always the parent theme’s functionality available as the fallback option.

 

CONS

1.Unintended Changes

If you happened to extend any of the custom features in the child theme, then there is a possibility that your changes might be broken on an update of the parent theme. Sometimes, the themes have not been designed and implemented with child themes in consideration which makes it harder for it to be extended.

2. Lack of Updates

Choosing the right theme to extend is crucial. It is quite possible that active development of the parent theme might cease and the theme is abandoned. It is also possible that the parent theme is not updated regularly with latest WordPress versions and security updates.

3. Learning Curve

If the theme does not adhere to the standards and common coding practices, it could increase the learning time.

 

How To Modify WordPress Theme Using Child Theme?

Child themes are separate themes that rely on a parent theme for most of their functionality. If you are using a child theme, WordPress will check your child theme first to see if a specific functionality exists.

If it doesn’t, it will use the parent theme. This is great because it allows you to modify only what you need. Child themes should always be used if you plan on modifying even a single character in your theme.

To create a child theme for your theme, you will need to do the following steps:

  1. Create a theme directory in your WordPress install
  2. Create a stylesheet with information about your child theme
  3. Pull in the styles of your parent theme

Once these steps are completed you can activate your child theme and your website will look exactly the same as before, but it will be using child theme.

 

1. First you need to open /wp-content/themes/ in your WordPress installation folder and create a new folder for your child theme. You can name this folder anything you want. For this example I will be creating child theme for Twenty Fourteen default theme and name it twentyfourteen-child

 

creating-wordpress-child-theme

 

2. The next step is to create a stylesheet file. This must be named style.css. It can be created in Notepad and uploaded to child theme folder or by using provided tools in cPanel File Manager.

Copy and paste the following code into the file you’ve just created:

 

how-to-create-wordpress-child-theme

/*

Theme Name: Twenty Fourteen Child

Theme URI:

Description: My first child theme, based on Twenty Fourteen

Author: Your Name

Author URI: http://yourwebsite.com

Template: twentyfourteen

Version: 1.0.0

Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready, responsive-layout, infinite-scroll, post-slider, design, food, journal, magazine, news, photography, portfolio, clean, contemporary, dark, elegant, modern, professional, sophisticated

Text Domain: twenty-fourteen-child

*/

@import url("../twentyfourteen/style.css");

 

The last line in this code imports parent theme’s stylesheet to the child theme. This is the minimum requirement for creating a child theme. You can now go to Appearance » Themes where you will see Child Theme.

You need to click on activate button to start using the child theme on site.

Because all we have done is import the original theme’s CSS, the theme will look exactly like the original. To modify your theme’s CSS, you can add any changes to your child theme’s CSS file below the @import line. All new CSS information is added after the original theme’s CSS is loaded.

 

Editing The Functions.php File

Functions.php is where a theme’s main functions are typically stored. A parent theme’s functions are always loaded with the child theme. If you need to add more custom functions to your theme then you can do so by creating a new functions.php file within your child theme folder.

NOTE: Creating functions.php is not necessary. It is used in case you want to add more custom functions.

creating-child-theme-folders

 

The new functions will be loaded right before the parent theme’s functions. Your child theme’s functions.php file should start with a php opening tag and end with a php closing tag. In between, you can add your desired php code.

<?php

Your code goes here!

?>

 

Editing Other Template Files

Beyond CSS and Functions modifications, you can also make structural changes to your theme by adjusting the php template files. This should be done with care. By editing the PHP files you can adjust any part of the theme.

Unlike editing the functions.php, where the original theme’s functions are imported automatically, PHP files are edited by replacing the file entirely with a new one.

The theme’s original file is ignored and the new one is used instead. The first thing we need to do is replicate the old file before we start to modify it. To do this, simply copy and paste the theme’s original file into your child theme folder ensuring that the file name and location is exactly the same.

For example, if we want to modify the exampletheme/includes/navigation.php, then we would copy and paste this file to exampletheme-child/includes/navigation.php. Or if you find all this confusing don’t worry, there is plugin for creating child theme.


DISCLOSURE: Posts may contain affiliate links. If you buy something through one of those links, I might get a small commission, without any extra cost to you. Read more about it here.

Leave a Comment

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

Scroll to Top