How to Make a Child WordPress Theme

Do you want to create a child theme on WordPress?

WordPress has many interesting themes, but sometimes you are interested in changing it; color, font size, or even change the call to action button . One of the safest ways to modify themes in WordPress is to use Child Theme. In this article we will show you how to make the WordPress Child Theme as simple as possible.

Why Should You Use Child Theme?

Child Theme allows you to use or modify the main theme without having to affect the code in the main theme. So Child Theme is a theme in the form of sub-themes based on the characteristics of the main theme.

When you use Child Theme on WordPress, any changes you make to Child Theme will affect the main theme and when you delete Child Theme, the main theme will return to the beginning.

Child themes you should use when planning to modify the theme even when only modifying one character in the main theme. There are two reasons you should consider: update and organization.

Update

If you modify a theme without using Child Theme, you have two choices: You can choose not to update the theme, or keep updating the theme at the risk of losing any customization in the main theme.

The last option you might be able to take, but the option is not recommended to do. Why? Although the changes made are only one or two characters in the main theme, but after updating, you have to make modifications to the main theme again. This will take some time even if only one or two characters.

But if you don’t update your theme, there will be a lot of risks. One risk of not updating the theme is security. Themes that are never updated are vulnerable to hacker attacks.

Organization

In joint development, you and your team will definitely add code to an existing theme, which may be thousands of lines. Because of the large number of lines of code added, you and your team will probably have difficulty tracking your changes.

When you use Child Theme, you will create a new directory that is still empty so that you can read and add lines of code or files more clearly. Even though Child Theme only contains a few files, it can produce major changes to the main theme.

So Child Theme is suitable for those of you who work as developers or WordPress users who are learning how to modify WordPress themes. When the changes you make are inappropriate and want to return to the original version, you can do it easily. Simply delete Child Theme and your website will return to the original main theme version.

 

How it Works Child Theme

Child Theme is in a different directory than the main theme. For the Child Theme to function normally, each Child Theme directory must have style.css and functions.php files. In addition to these two files, you can add additional files that are customized according to your needs.

The .css and .php files in the Child Theme directory allow you to modify anything from styling and layout parameters to changing and adding lines of code.

When visitors access the website, WordPress will first load the Child Theme first. Then WordPress reduced the style and function of the main theme to complete the Child Theme.

As a result, the majority of settings will take from the main theme but have been modified by Child Theme before being sent to the browser.

Things Needed To Make Child Theme

Requires basic CSS / HTML so you can easily change the theme as desired. Some knowledge about PHP will help a little. If you don’t know how to write lines of code, you can copy and paste lines of code from other sources, you also need to have:

  1. Access to the WordPress admin page
  2. Access to File Manager or FTP Application

 

How to Make a WordPress Child Theme and Customize

Creating a Child Theme is quite easy because you only need to copy and paste from some of the main themes that already exist. In addition, the modification process is also quite simple if you have already learned to use CSS, HTML, and PHP.

Step 1 – Make a WordPress Child Theme

You must access the WordPress directory first using File Manager or FTP Application. After you successfully enter, create the Child Theme directory in the “../wp-content/themes” folder .

Make sure the Child Theme folder does not use spaces, because if you use spaces it will cause errors .

You can add the ‘ -child ‘ prefix in the Child Theme theme section or use another name as desired.

For example, here is how to create a Child Theme on WordPress using the File Manager and Twenty Seventeen themes that are already available by default in WordPress.

  1. Open Control Panel then Click File Manager
  2. Open your WordPress Installation Directory. If you don’t install WordPress in a sub-folder, the WordPress directory is your public_html . Then open the “wp-content / themes” folder .
  3. Click the ” Create New Folder” icon . Enter the name Child Theme and click Create .
  4. Open the Child Theme folder that was created.
    The step after this you will gradually create the style.css and functions.php files.
  5. Click the ” New File” button and enter style.css , click Create .
  6. Add the code below into style.css
  1. Change all contents according to your theme and domain. The most important part is the ‘Template’ and  @import  sections – rules in CSS that allow you to import from other style sheets – because they will be the identity of your Child Theme which part of the main theme. When finished, don’t forget to click “Save” .
  2. Click the New File button and enter functions.php , click Create . You can use this file to add and modify .php functions to your Child Theme.
  3. After you are done, open the WordPress admin page, then open the “Appearance» Themes “ menu . You will see the newly created Child Theme theme. Click “Activate” to activate it.
  4. When you access a website, it might not look perfect. This is because you have not modified the functions.php file
  5. WordPress has a function to call CSS from the main theme. Through the WordPress Admin page, open the “Appearance» Editor “ menu and select functions.php . Then copy and paste the following code into the functions.php file in your Child Theme:
  1. When finished, don’t forget to click “Update” at the bottom of the editor to save it.
  2. Reopen your website and your website should look normal. If the problem still occurs, try checking the previous steps again and make sure all the code is correct.

 

Step 2 – Customize the Child WordPress Theme

In the previous step, you have successfully created Child Theme and activated it. You certainly want to change the Child Theme according to what you want.

1. Customize the look of the Child Theme

You can do the appearance of the main WordPress theme using Child Theme by editing the style.css file in Child Theme. You can access this file through the File Manager or your WordPress dashboard.

If using the WordPress dashboard, access the editor’s menu in the “Appearance» Editor “ . In this section you at least understand the use of CSS and know a little how it works.

For example, you can use the line of code below to change the backgroud’s color .

The code above will change your theme’s background to red (# FF0000). Not only the background , you can change other elements related to CSS: file size, color, and so on.

2. Remove and Add Features

In addition to replacing CSS elements, you can change the features and functions of existing WordPress themes. The function in question is like adding a call to action button and the like.

You cannot add this function in the style.css file , but you can add it through the functions.php file .

The strength of Child Theme is that it has a separate functions.php file. You can add or remove features (such as plugins) using the functions.php file.

When updating a theme, you can ensure that any changes will not be lost when using functions.php.

For example, below is a line of code that is used to disable the search feature in WordPress

In addition to removing the search feature, you can also do other things like add Google Analytics code into the footer using functions.php. You simply add the code below.

 

Closing

How to make a Child Theme is quite simple. Only by using a few steps copy-paste, you can create a Child Theme that can facilitate work related to the theme. Although it will be easier to use the default theme editor in WordPress. We still recommend you to use Child Theme if you want to customize your WordPress theme.

Hopefully this article can help you make Child Theme on WordPress. You can leave questions via the comments column. If you like this article, please subscribe to get other interesting articles.

Leave a Reply

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