Child Theme Authoring: Structuring Your Theme

Child Theming

Last Updated: Time to Read: 2 minutes

To reference the Layers file and folder structure, view the source on gitHub.

When planning your child theme, it is important to understand the division between core and front-end. Your theme should focus on front-end modification only and not venture into core modification. Essentially, if you find yourself needing to go into the core to change something, there is likely a filter for that, or it is something you need to do from an extension.

Child themes are only able to override templates via file copying. This means php files in the root and partials folder only.

Below is a breakdown of recommended structure to help you plan:

assets

Note that we replace the parent theme’s “core” folder with an “assets” folder in our child example. Like WordPress, the Layers core and its files should not ever need to be modified or copied into a child theme. Instead, filters and hooks should be used to modify functionality within the framework if a plugin does not already provide the needed functionality. The assets folder is where files that support your custom functionality belong. This helps segregate the things you are adding to Layers from the parent files you are overriding so maintenance becomes a whole lot easier. An example of a child theme assets folder might look like this:

assets/css

Layers divides its CSS among several files such as colors.css, typography.css and responsive.css to make it easier for you to reference or disable groups of styling.  Child theme styles can be divided up this way and stored in a separate folder css, or you can keep them all together in one style.css – it is up to you. Child theme styles should always only contain changed declarations – never copy entire CSS files from the parent into your child theme. We will cover more on this in the Styling section.

assets/images

If you plan to change any images from Layers’ images folder, we recommend copying over the changed file to an images folder inside the child theme main folder. Make sure to keep the file names and file structures from the parent intact. You may also add any additional images for your theme here , but may find it easier to put custom images inside an images folder in the main child theme folder instead.

assets/js

Drop any theme-specific scripts into this folder, if desired.

Unlike templates (php), Js scripts are not overridden by name, so simply dropping in a “theme.js” or “swiper.js” with modified/added/removed functions or arguments is not the way. Instead, you will need to create your own theme.js, enqueue it properly, and include only the functions used in your child theme that are new or modified from the original.

*root

The main folder contains all of the main template files included with your Child Theme, including the style.css, functions.php and screenshot.png.

Files containing classes, such as Layers widgets, cannot be copied over, modified and re-included. The child functions always load before the parent, so this method does not work as it will not be able to extend the Layers_Widget class, for example. New builder widgets must therefore be introduced through an extension, which is documented separately. Normal widgets which extend wp_widget will work normally and can be included from an includes/widgets folder or whatever you desire.

See Child Themes: Including Scripts & Files