 Okay, hi everyone, it's me again from the last talk, I mean the last meetup. So today I'll be talking about child themes and understanding child themes, the parent and child theme relationship in WordPress and why I think it's one of the most, one of the more important aspects of WordPress when you, regardless if you're into WordPress development or just a user of WordPress. So, my name is Edmund, I'm an ex-WPS WordPress engineer and this is my email address if you want to reach out, feel free to drop me an email and I also blog, although not so frequently, I try to on development stuff so if you're interested you can give it a read. Okay, and these are the few things, few points that we'll be touching today. So what is a child theme? We'll be looking at the parent child theme relationship in WordPress, why should we use a child theme? We'll take a look at why was child theme even introduced in the first place? What problem was it trying to solve? And then we'll look at when to use the child theme, do we, should we use the child theme every time we are setting up a WordPress site? Yes and no. And lastly we'll look at how to create a child theme. So there are two ways to do so, one is to create a plugin, one is to use a plugin and the other one is to do the manual way and I'll show you a demo of both ways at the end of the talk. Okay, so before we look at a child theme, I think it's important to understand what is the parent and child theme relationship in WordPress. So as you all know, a theme in WordPress is this, if you look at the file directory, is this folder that consists of a lot of files, template files or your static assets. Those files are required for your WordPress site to look properly on the front end. So a theme can, so those are considered a full theme. It consists of all the required files and some of the more popular ones include 2020, the recently released default theme, generate press, underscores, Astra and many more. So all these are considered full theme and all the full themes can actually be transformed into a parent theme when you are using a child theme. What do I mean by that? So if you look at this example, over here I have two themes installed in this WordPress installation. I have the 2020 and generate press. So these two are considered full themes because there isn't any child themes being created here. But if I were to create a child theme that is based on 2020 theme, that 2020 theme will automatically be regarded as a parent theme. So as you can see, I have a child theme over there that is based on 2020. So my 2020 theme has become a parent theme. Generate press is still considered a full theme because there is no child theme created based on that yet. So based on that, you can kind of understand the parent and child theme relationship. The child theme is intended to work with the parent theme. What it means is that when you create a child theme, right? It inherits all the look and function of your parent theme. So technically speaking, if you were to create initially, if you were to create a child theme and if you were to activate it, your site shouldn't look any different because it inherits how your parent theme looks like. And it actually changes. It allows you to change only parts of the parent theme. And of course the child theme can never, it's not able to work without a parent theme. So in this case, if I were to deactivate the child theme, my 2020 theme can still work well because it's a parent theme. So once I deactivate the child theme, it's gonna be converted back into a regular theme. But if I was to remove the parent theme, then my child theme would not be working and the site will be broken. So this is what it means by, this is why a child theme is only intended to work with a parent theme. And this is how it's gonna, how a typical file directory looks like when you have a child theme. This is inside the slash themes folder. So as you can see, I have the 2020 theme and then I created another folder. I named it 20 dash child. And on the left side of, this is the folder structure of the parent theme. So I mentioned a parent theme is actually a full theme that consists of all the required files. So as you can see, there are way more files than in the child theme. Those files are required for the parent theme to work. But if you were to create a child theme, you only need to have a few files that you want to override. So what I mean is that any file that you want to override from the parent theme, you can copy it and paste it into the child theme. So in this case, I have a footer.php in the child theme and in the parent theme. So if you were to put it in the child theme, the footer.php will actually override the one in the parent theme. So this is what it means by if our being added to the child theme will actually be used instead of the parent theme. There is one exception, which is the functions.php. During the demo, we'll take a look at that. So this is how the demo side looks like on the front end. So this is before I installed the child theme. This is the footer by default. Just the copyright text and then powered by WordPress. So I decided, what if I decide to add my own text? For example, I want to customize the footer. I would have to do this duplication of all into the child theme folder and then I can edit the code and then this will appear on the footer of my site. So this is what it means by the child theme, the child thing overriding the parent theme. Okay, so at this point, you might be wondering why do we need to go through so much trouble to just add few lines of text or add whatever customization? Why can't we just edit the parent theme directly? Why do we need to create a child theme? So before the whole idea of child theme was introduced, developers and users in the past, they faced this issue of being able to customize their site. So what I mean is that they can edit all the files, open up the files and edit the code, so it's fine. But when it comes to updating the theme, if they were to update the theme, all their changes will be removed. So that was quite a big issue because imagine if the theme that you're using has this major exploit, the theme that you're using has this third-party file that is vulnerable. So the obvious thing to do is to quickly update your theme, but then you wouldn't want to update your theme because if you were to do so, all your changes would be erased. So that's when the core theme and the community came up with this idea of child theme. So the biggest problem is that it allows you to update your parent theme safely and having all your changes still intact. Okay, so this is an example of what I mean. So this is me editing the parent theme directly. So I added some CSS changes and then I refreshed changes work and then I went to update the theme. So after the theme updates, I went to refresh my changes are gone. So that is what I mean by being able to safely update the parent theme. So why do we use a child theme? I think if you had to take away one lesson from this talk, then it's gonna be that child theme actually allows you to safely modify the parent theme. Although it has other benefits, but I think this is the most important advantage it gave you. So it allows you to safely modify the parent theme like what we have seen. It also speeds up development time. So what I mean by this, for example, if you are selecting, choosing to use a theme and then you chance upon like 2020, you like the look and feel of it, but you don't really like maybe the footer part or you don't like the sidebar. So what you can do is you can just install that theme and then create a child theme based on that and then you can override whichever parts that you don't like. So you don't have to recreate the whole theme from scratch. The foundation is already there. So it speeds up development time. And also, when you're using a child theme, you can safely update all your parent theme and then all the updates will flow seamlessly into your child theme. You don't have to worry about your child theme not receiving the latest features from your parent theme. And lastly, it's also a great way to learn about how themes work in WordPress. When you're building child themes, you're probably gonna encounter like the template hierarchy, how the theme development works in WordPress. So I think it's a good way to start if you're into theme development. And okay, so having said that, when should we use a child theme? So if you find yourself constantly adding new functions or modifying styles, or if you are looking to change like certain parts of the site, like the footer, the sidebar, the hitter, what we call template overrides, or to make things simple, in my opinion, I think that if you're not building a theme from scratch, then I think you should be using a child theme. This can be debatable because a lot of discussions have been circulating around regarding the use of child themes. Like why do I even need to use a child theme? Why can't I just install, if I want to make just a small CSS change, why can't I just install this custom CSS plugin? That's where that plugin allows you to insert your changes so you don't have to create a child theme. So that is true to a certain extent. I think it boils down to personal preference. For me, I prefer to edit the code, to open up the file and then edit the code. But most people think that they can just install a plugin and do their changes over there, fair enough. So in that case, they might not require a child theme. They can just use the plugin to implement all their changes. On the other hand, some other users feel that they are not gonna customize their site much. They are probably gonna use a page builder, for example, and then they are just gonna create the whole look and feel of their site using the builder. So they feel that, oh, there isn't a need for me to use a child theme. But I think that it's true probably at a point of time, but in the future, if you are looking to pass it, looking to find a developer to customize your site, to add some new features. And in my experience, when I receive a theme, a site that doesn't use a child theme, I would be a bit worried to actually just go in and edit because the previous developers might actually be editing, they might have actually just edited the whole parent theme. So I wouldn't wanna just go in and create a child theme. So I think that if you're just using a page builder or if you think that you're not gonna customize your site, I think it's still worth it to just spend that one, two minutes to create a child theme and just leave it there in the future because it's probably gonna bite you, come back and bite you. And okay, so how, so as I mentioned, there are two ways to create a child theme. This is one of the plugins that is available in the repo. I think this is one of the most straightforward ones. The others, they actually ask you a lot of questions and more features, which I don't think is necessary. So what this plugin does is that once you, oh, sorry, this is one way of creating a plugin. Using a plugin and the other one is to just manually create a folder and then implement all the required files yourself. Okay, so in a child theme, the minimum you need to have one file, which is the style.css in order for the child theme to work. And in the style.css, you need to insert this header block and then if you look at the highlighted line, that is the most important comment. So in this example, I'm using, I chose to enter template 2020. This means I'm using the 2020 theme as my parent theme. So this needs to match the name of your parent theme directory. And next, you can create a function.php. This is not necessary, but it's, in order for your site not to break, you probably need to wanna have this as well. So in this function.php, what you need to do is to implement your parent style, bring in the style sheet from your parent theme and then include the style sheet of your child theme. This way, when you activate your child theme, it will still look the same as your parent theme because you're using, you're including the child theme, parent themes style sheet. So this is probably gonna be a lot clearer when I show you the example. So once you're done, you can just activate your child theme in the Appearance theme page in your WordPress admin. And okay, I'm just gonna go through a quick demo starting with using a plugin to create a child theme. So this is my WordPress installation I have. Okay, maybe I'll just show you how it looks like. What happens if you were to actually edit your parent theme directly? So let me just open up the style.css, for example. So this is the style sheet of my parent theme. So maybe I just wanna go in and edit the background color, save it, and then go to my theme, go to my front end. So I managed to change the background color of the body section, which works great. But what if I choose to... Right now, what happens if I update the theme? So, okay, the theme is updated now. If I were to refresh it, you see that the changes have been erased and my code is no longer here. So this is why we use a child theme. Okay, so this is the plugin I was talking, I was telling you guys about child theme. You can search for child theme generator. So like what I said, there are a lot of options for you to choose from, but this is the one I was referring to. Child theme generator. If we know why, you choose this. I just feel that this is the more straightforward one, straightforward one. If you were to actually use this, and it's just gonna show you this screen and then ask you questions, and then you can just create a child theme. For the others, they actually have more tabs for you to do more stuff. I don't think it's necessary. More complex stuff. Yeah, more complex. It still works, but it's just more things for you to study. I don't think it's necessary though. So this is more straightforward one. Okay, so I've already activated it. And so this is how it looks like. You don't really need to fill in all this, as they mentioned over here, all fields are optional. But this is the one that you need to choose from. So right now I only have one theme, one other theme activated, which is this. So what this does is that it's gonna create a child theme based on this parent theme. So I'm just gonna go create a new theme. And they'll just ask you if you wanna activate the child theme, so you can just click finish. Okay, so if you look at the themes page, you see this new child theme created. You can actually change this image if you want. If you go to your site directory, the file directory, you should see this new folder here. 2020 child, so this is the screenshot that you can, you can just replace it with another image, but you must name it as screenshot.png. So right now, if we were to go back to the front end, it's gonna look the same, nothing has changed. But we can safely insert our custom any changes that we want. Without having it being erased when we update the theme. So right now I am, I think I just set it to red color. Yep, so let me just roll back and bring in the old version of the 2020 theme. Just delete this, oops. Okay, so right now I'm back to the old version, which requires an update. Okay, so right now the site still has my changes. So if I were to update the parent theme, you'll see that our changes will still be intact. So updated, refreshed, and then it's still, the background color is still red. So this is how you create a child theme using a plugin. I would just go through, quickly go through how you were to create it, how to create it the manual way if you don't want to use a plugin. If you're not really, if you don't want to bloat your WordPress admin with too many plugins. So let me just delete this one. So like what I mentioned, you have to create another directory. You can name it whatever you want, but according to WordPress best practices, it's good to have the same name as the parent theme and then append it with a dash at the end. Okay, and the file that you need, that needs to be in the child theme is this style.css file. And then in this file, what you need is this header block. If you were to search in the WordPress codex, they should have this snippets for you. So you can just copy and paste and then you can just change the name, some of the values here. So I want this theme to be named 2020 child and then most importantly, this template here has to be the same as the directory of your parent theme. This will tell WordPress that you're creating a child theme that is based on the 2020 theme. So this is the style.css, so you can leave it empty, you just need this header block. Right now, if you were to go to, let's see what happens if you were to go to the admin. Okay, so I didn't include any screenshot, maybe I'll just throw in one screenshot PNG here. I'm using the same image as the parent theme, so it's gonna appear here. Okay, right now if I were to go to my front end, you'll see that everything breaks because my child theme is, remember what I mentioned just now about, if the child theme and your parent theme has the same file, so if I were to open, so right now my child theme has the style.css and then my parent theme also has this style.css. So when the files are present in both folders, the one in the child theme will be the one that has been used. So right now in my child theme, the style.css is empty. That's why on the front end you'll see this, no styling at all. This is where the functions.php comes in. So I'm just gonna throw in some code here. Okay, so basically what this does is, this line here it tells the word parent. I want to use my parent theme style.css, so I'm bringing in it. And then over here, I also want to load my child theme.css. But it brings in both the style sheets. So if we were to refresh it, oh, let me just save it. So if we were to refresh it, you can see that our site is back to normal. So right now we are using, inheriting the child, the parent theme, style sheet. And we can still update, do the updates on our child theme. So I can still change the background color to blue, for example. And then it's gonna change. So with this two files over here, style.css and .php, we can start to build our child theme. We can start to override the different parts of the site. So in the back end, we have... Is it trying to hand the parent css for its loading? No, it's loading two star sheets. If you were to look at the network tab, you'll see that there are two. So if it's a .php file? So right now, yeah. Okay, let me just show you the example. If I were to use the footer.php. For footer.php, we are not including both because in our functions of .php, we are only enqueuing the style sheet. So enqueuing means to kind of like load the style sheet. But we are not doing anything to the .php files. So by default, if we were to have a footer.php over here. Is it? Yeah, it's gonna load this one instead. So if... Yeah, because CSS, we are actually enqueuing both. They are bringing in both. But for the .php files, we are using whatever that is present in the child team. So... So you can't enqueue it or so, right? There isn't a reason for you to... You can't enqueue Java 2 or .php files, right? You can enqueue CSS. No, you can enqueue JavaScript files as well. But there isn't a reason for you to want to have footer.php, right? So if you want to have... I mean, if you want to change your footer.php, what you want to do is, for example, just copy this into your child team folder and then edit this one. So maybe if I want to change this line, I can just edit here and then it's just gonna be reflected. Okay. So when you're doing this, you can still update your parent team and then your footer.php will still be intact, the changes. Everything very heavily on the child. Yeah. If you update something and it's like totally overriding, your child has a... Yeah. Right, so that's what happens. That's what happens with WooCommerce. WooCommerce has a lot of... I've done a lot of template overrides with WooCommerce. So when, for example, if there's this single, like a product archive template, if I was to override that and then WooCommerce release a new version that actually changes that structure, what you'll get is this alert in the backend, telling you that your template override is outdated and then they would want you to look at the new one and then compare it with old one. So that can be a bit more work to do if you were to actually override a lot of templates. So for me, I wouldn't... To add custom changes to my site, I wouldn't go immediately to... I wouldn't look at template overriding first. I would look at using hooks first. So if there's no hook, for example, then I would look at overriding a template. Then again, if you were to override a lot of templates, you're gonna be quite challenging for you when the parent theme update has a major update. So it will tell you the design dimension that you will tell you about WooCommerce? WooCommerce will tell you. Because you're... See for my better. See what it will tell you. Or is it a WordPress child function? No, it's under WooCommerce settings. They will let you know that your theme override, now your template override is outdated. So it's WooCommerce that will notify you. About the theme... It's the same thing. As long as you override this WooCommerce template, WooCommerce actually knows you're using your own template. And then they will notify you if there's any... If yours is outdated. That's any version number, right? It's called actually... Actually, one way to cheat is to just change the version number at the top of your template now. But then you probably want to look through the whole file and then compare. So I think I've covered... Oh yeah, another thing is... I was mentioning just now about functions.php. Why is this different? So any files that exist in your child theme folder, right? If that file exists in your parent theme as well, it's gonna... Your child theme will be the one overriding that. This is true except for functions.php. This is a bit special. What this does is it loads your child theme functions.php first and then it loads your parent theme functions.php after that. So this one is not gonna override because in your functions.php there are a lot of... There's probably gonna be a lot of custom functions. And if you were to override the parent theme, your site is probably gonna break. So this is the only exception. It's gonna load both the functions.php but the one in your child theme is gonna be loaded first. So if you're wondering why is the child theme the one being loaded first, if you were to open some of the functions.php in certain themes, right? They have this... They allow you to... They call it like a pluggable function. They allow you to override the function. For example, in my parent theme, I have this function over here. So in certain themes, what they have before they declared a function, they have this like if this function doesn't exist or something like that, then you run this and you create this function. Usually when you're creating themes, right? You want to make your functions spuggable. This means that adding this conditional statement at the top of your function. So in this case, in this way, since the functions.php of the child theme is being loaded first, you can create the same function. You can create same function with the same name and then override the way this function behaves. So let's say I have this one right now and when my functions.php of my child theme loads is gonna create this function. And then when the parent themes functions.php comes in, it will do a conditional check. It will check that whether this or if this function name exists, then we don't have to create this one. So it's kind of like overriding, allows you to override functions. This is why the child theme functions.php loads first before your parent theme. In case you're wondering why. So I think I might have shown a little bit too much code. Okay, I think that's all I have. If you have any questions, I'll be happy to answer them. Or are you guys convinced that you should use the child theme now? Where do you ever use child theme? Is there any student who would use child theme? Yeah, that's a good question. So I think I might have skipped that part though. So if you're building a theme from scratch, then there's no point for you to use your child theme. Because when you build a theme from scratch, you are. Is this more work for you? Yeah, it's more work. You're basically building like a 30 to 30 theme from scratch. So there's no reason for you to use a child theme. So that is one. I think to me that is the only when I wouldn't use a child theme. Other than that, some people might, like what I say just now, I'm not gonna, I can just install a plugin to do all my changes. I can even insert CSS snippets into my customizer. Why do I need to use a child theme? So it's personal preference I think. I prefer to just open up the font and edit changes. I don't have to lock into my admin and then go to customizer and make it clear for it to load and then it changes. So, yeah, if I would create a theme from scratch, I wouldn't need a child theme. There isn't a reason for me to use a child theme. Anything else? I'll ask you a question that's a bit reverse on what you should know. Okay. If I didn't have the theme, what I have to start to design? Hardcore coders will probably want to develop a theme from scratch and then build the design based on, build the site based on that design. So they're just gonna code everything from scratch. And then right now you can even choose to use page builder. You just start with a blank page and then just create the whole design out. So I think right now page builders are quite hard to do in WordPress community. So it saves a lot of time, definitely. It's true. I've probably used page builder myself. Like back in the day when people were actually getting someone else to design it. Yeah. They're designing it. They're using the PSP and then they know. Yeah. Well, this doesn't work. Oh, that is when you are, you want to look into theme development. So it's not just converting the PSP into HTML. It's converting the PSP into HTML and then converting the HTML into, to insert WordPress template functions, that kind of stuff. So that is what we do before page builders exist. Yeah. Even when they're using page builders. So I wouldn't say they slow down. You definitely have to use the more reputable ones, right? So I wouldn't say they slow down your site. But if I were to choose whether to use one, I wouldn't, I wouldn't, that wouldn't be a reason for me not to use a page builder. I just didn't want to, I just didn't like the way it kind of conflicts with my workflow. But I wouldn't say a page builder slows down your site. Maybe if you're not using the more popular ones than could be, but if you're using the famous few, then you should be fine. Yeah. Yeah. If you don't use it anymore, if you just deactivate the plugin, it's just a bunch of... Shop codes, right? Yeah, so that's why right now, all the leading page builders, they are not short code base. So it's safe to, I mean, if you were to change your theme is, your site is probably gonna be, hey, why are you here so, but at least some visuals, it's not like short codes. Like V for example is short code base. If I'm not wrong, haven't used that in a long time. Elementor and Beaver Builder are the two more popular ones. They are not short code base. So if you were to use that, and if you were to change your theme, it's still gonna, your site is not gonna look as good, but it's not gonna be a bunch of short codes. So you've advised us to be using plugins that use short codes? No, no, no. That's page builders using short codes. I wouldn't, it's not really a good idea. Like for example, if you were to use DV and then you wanna change your theme in the future, then your site is gonna be all short codes. No, no, no images or nothing. So that's why people, they don't really want to use a page builder that is short code base. Visual Composer, DV, to name a few. Yeah. It's not that they take a long, it's just, it's not good. If you were to change your theme and then, suddenly all your site is just gibberish, you know. Yeah, so that's why it's quite frowned upon. Short code base builder. Yeah. But still a lot of people, like DV is still so popular and it can still perform well. So, but if I were to choose, I wouldn't use a short code base. There is plugins which remove the short code if you need to change. Yeah, I think there is, there are plugins that remove that. So, I guess at the end of the day, if you want to go through, if you are adamant on using DV, for example, and then you can still look into that solution to remove for the short codes. Yeah. It's okay, I think. Nothing against that. Yeah. So, try to use, instead of just for the theme itself. Yeah. If I want to make some changes in the plugin. Yeah. All the structures. Yeah. Yeah, that's what, that's how we usually override WooCommerce templates. If you're familiar with WooCommerce templates, then they will just encourage you to copy this file and then paste it into your shell theme. And then you probably have to put it, you have to put it inside a WooCommerce folder in your shell theme first. And then you can override the same structure. So, that's how you would want to override templates that are from plugins. But, like what I mentioned just now, I think the first thing you should look into is to use a hook, like an action or a filter to change the thing instead of using template overrides. Because then when WooCommerce releases a major version, your template might be outdated. Yeah, but it works well. Because they don't really have some, in certain situations, they don't have the hook that you want. So, you have to override the template. I have a talk on that. I can link it to you. I did a talk on that. I can drop the link in the meetup section, comment section, and then you can take a look at it. But essentially what it does is it allows you to just customize, extends WordPress. It allows you to customize and add features on top of WordPress in a different way. It's one of the reasons why WordPress is such an extendable software. So, without hooks, you probably wouldn't see a lot of third-party. Is it a bit like React hooks? No, no, no. React hooks is kind of the same thing. Like when it reaches this, the code reaches this runtime and then it's going to run your code. So, it's kind of the same idea. So, it's when your code reaches this particular line and then it's going to call whatever functions that are being put into this. So, it's kind of like the same idea. So, a bit of a shameless plug. But I think you can just go to my blog and then just presentations. Yeah. Oh, yeah, the one in hooks is over here. Yeah. Sorry? I feel that if you are, if you want to add something to your site, this function rather than the look and feel, you probably want to go to the plugin route. So, you can also add certain functions into your functions of PHP. But then again, if you were to show everything, all your custom functions into your functions of PHP, right? If you were to change your theme, all your functions would be gone. So, what I usually tell people is that if you want to add a certain function, regardless of what team you use or what my site has this function, I will create a plugin for that. So, if I just want to modify the navigation bar because this team has this ugly navigation bar there, I would do it in the function.php or even in the style.css because that's pertaining to the theme itself. And if I were to change the theme, it doesn't matter, it's gone already, so it doesn't matter. Yeah, so, anything that's more function-related, go forward to create a custom plugin. Yeah. Anything else? So, congratulations to you. Thanks.