Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Lesson 2 – Part 3 – Set Up the Child Theme File Structure

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Let’s start talking about some technical things. What we’re going to talk about first is the child theme file structure. Right now, we don’t really have a child theme file structure, it’s got the Thesis Responsive child theme and inside of that, you’ve got functions.php, screenshot.png and style.css and that’s it.

Location of Files and Functions

It just doesn’t really require much in the way of a file structure but in fact, we are going to be ending up with the relatively complicated set of files and functions by the time we’re finished.

In order to make those things easily found, we’re going to group them into folders based on what they are or what they do. That means that we’re going to create folders inside of this Thesis Responsive child theme. You may be familiar with using custom_functions.php where you put all of of your functions in there but in this case, we won’t be putting all of our functions in functions.php. We’re only going to be putting the set up stuff in functions.php and everything else is going to go off into other files.

Code is Better Organized and Site is Faster

The reason for doing this is two fold. One is it makes your code easier to read, easier for you to figure out, and easier for you to follow because you can go find the files or functions when you need to find it. The second thing is that it also makes your code more efficient because there is some code that only needs to be loaded when you’re doing administrative things but does not need to be loaded when you’re not on the back end.

For example, if somebody is browsing your site, they don’t need the web server to load all the codes associated with your administrative tasks. We don’t want to load the administrative functions because they just add additional load to your server, it slows your site down, there’s no reason to do that.

What we do is make a distinction between the administrative functions and the regular functions. We only load those files that we absolutely need for the specific thing we’re doing which makes your site faster.

I’m going to talk to you about an organizational scheme here and it starts off by only putting the the things that we need in a general way in the root of the child theme. Everything else goes in a subdirectory of the child theme.

Creating Child Theme Subdirectories

The first child theme subdirectory we’re going to create is going to be called “lib” for library. This is a very standard arrangement of things. We’re also going to add a custom folder to this because Thesis does allow you to give your end user the ability to use Thesis custom_functions as long as you have included everything about custom here. That’s one of the things we’re going to do right away and that is to add a custom folder to this.

Adding a Custom Folder from Thesis_184

Now, we’re not going to just add a custom folder. What we’re going to do actually is add the entire custom folder from a regular default Thesis installation. The easiest way for us to do that is just to add Thesis to this child theme lessons project. We’re going to add that to our project and what that really means is I’m going to extract a copy of thesis_184 into that project and pick the location that it currently resides in, which when the dialog comes up is going to be my documents, NetBeans projects and child theme lessons.

I’m going to unzip that to that location then we’re going to refresh this view. Here it is, thesis_184 and now that we have this here, what we’re going to do is take this custom-sample folder, copy it and paste it in the root of thesis-responsive then we’re just going to rename it to “custom”.

Now that you’ve placed the thesis-custom folder from a typical blank Thesis installation into your child theme and that gives it the cache so it can cache the thumbnail images as defined by design options for the child theme rather than say the parent theme. You can put images in here if you’re going to use the Multimedia box. I’m sorry, this is the place for custom images, this is the place for rotator images then custom.css then custom_functions.php and the old layout.css.

We’re going to leave all of these here inside of custom. That’s our first level folder inside of our child theme.

Add Folders to the Library of the Child Theme

Inside the library of our child theme, we’re going to add some more folders. The first one we’re going to create is “functions” and this is going to hold all of the standard functions that we use during the execution of the website.

The next one is going to be “admin” and this is going to handle all of the admin functions that we use when you’re doing something on the admin side of the site. We’re going to group all of our classes together in a folder called “classes”. We’re going to have a set of images for this theme so we’ll create an images folder.

Ultimately, we’re going to be creating some widgets so we’ll create a “widgets” folder. Actually, we will end up needing the use of admin.css so we’re going to create another folder called “css” and we’ll talk about what we’ll do with that later.

Now, there is one other one that we’re not going to be doing but that is often added to a list like that and that is “scripts”. We’re not creating any Java Script so we don’t need to include that here but if we were using some Java Script, we would add “scripts” to this as well so that we could place the Java Script files in that child theme directory.

Our main responsive child theme directory is called thesis-responsive. Inside that it has our functions.php file, this Thumbs.db is a file from windows and just means that it’s the thumbnail image of the screenshot. We have a style.css which is the main stylesheet for the child theme, screenshot.png which is the screenshot that we see when we look at the site in the admin side and functions.php which is our primary functions.

We’re only going to put the general folders in the root.  We have our “custom” which is going to be able to handle any custom work that a user wants to use and we have our “library” which is going to have all the rest of our files, all the functions that we write, all of the functionality that we add to this child theme is really going to end up in these things. That’s the system that I recommend for organizing your files.

You’ll see that people do all kinds of different things and there are other organizational schemes you might choose to try but whether you use my scheme or you use another scheme, it doesn’t really matter. What’s critical is you do something and one of those things is you include an original custom folder from thesis_184 inside of and at the root of your child theme.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one