How To Edit Child Theme Code Files

Documentation Article

Docs » How To Edit Child Theme Code Files

How To Edit Child Theme Code Files Product Documentation by Pee Aye Creative

Introduction

In this guide, we will see how we can edit our child themes for customizing the design or adding functionality to the website. We offer lots of child themes for sale which are all different but share some common elements.

We will use the Divi Mowing Child Theme as an example to show you how you can edit the child theme files to modify the included functionality or design, or to provide some additional custom functionality beyond what Divi or our child theme offers.

Access The Child Theme Files

There are typically three files inside our child themes that we will cover in this guide. Those files are as follows:
1. functions.php
2. style.css
3. script.js

You have several options to access and locate these files.

WordPress Dashboard

Go to the WordPress Dashboard, hover over the Appearance menu on the left-hand side, and click on the Theme Editor option in the menu.

Now you come to the editing area. But first, you need to make sure you are editing the correct theme. It may be set to the parent Divi Theme by default, so be sure to check this. You can go to the top right corner and select the child theme name from the dropdown and click the “Select” button. This will load the child theme files in the viewing area, with a list of the files along the right side.

Screenshot_943

File Manager Plugin

Another option is to use a plugin file manager plugin, which gives you more control because you can navigate around all of your WordPress files and folders. All you have to do is go to Plugins>Add New and search for “file manager” and you will get several options, all of which should be perfectly fine. Once you install one of the plugins, you should see something like “File Manager” in the left sidebar menu.

To find the child theme files, you can navigate to wp-admin>themes>[your child theme name].

Screenshot_942

Hosting Account

Some hosting accounts include a file manager which allows you to browse and edit all the files on your site. Typically, you can find them by looking for public_html folder, and then looking for “wp-content.” Inside that is a folder called “themes” and inside that you will find any installed theme like Divi and the child theme. You can open the child theme folder and see the files that are included.

FTP

Another way you can access and edit the files in the child theme is through an FTP account and client. This means you would use something like FileZilla installed on your computer, and it is connected with some account specific data to your hosting. This method is a little more advanced to set up, and if you need any help, you can surely reach out to your hosting company.

Edit The Child Theme Files

Now that you know how to access the files, it’s time to start editing them. This process should be done carefully, as it is possible to break your site if the wrong code is edited.

style.css

The most common file you would need to edit is the CSS file called style.css. This is where all the added styling code is written which affects the design of the website. 

One of the most obvious and common things to modify would be the color codes used in the child theme. For example, if you are using our Divi Mowing child theme, you may want to change the green color to a different shade or a different color completely. Please check our other documentation and tutorial for information on how to change the color scheme.

 There are many other things you may want to adjust, change, or add. Perhaps you found a tutorial on our blog with some CSS code, or you want to try adjusting values in the existing code. You can do all of that by editing the style.css. 

script.js

The second most common file that you may want to edit is the JavaScript file called scripts.js. This file contains any code that adds some sort of functionlaity to the frontend of your website. A good example in most of our child themes is how we collapse the Divi menu submenu items.

You may also be following one of our tutorials which has a jQuery snippet, and you can place those snippets here as well. 

functions.php

The other important file that you may need to edit on occasion is the PHP file called functions.php. This is typically for advanced code and should be treaded very carefully to avoid breaking the site. A common example of how this file is used is to load the other files, which is how child themes work. Basically you will see it loading the style.css file and scripts.js file near the top of the code. 

After that, you can modify or add any code you want. One of the snippets we have in some of our child themes is code to change the size of the Divi Gallery module images.

We purpose to keep our child themes functions.php file very simple to avoid confusion. But there are many other examples of PHP snippets that can be added here. You may find them in our tutorials on our blog, such as adding a button to the Divi Shop module, and other WooCommerce related tutorials. If you do add code to the functions.php file, always be careful and follow instructions in the tutorials.

Last updated March 8, 2024
0

Your Cart