 Hi everyone. Can the people at the back please raise their hands if they can clearly hear me? Awesome. I was also encouraged to move forward because I think this projector is not that great. So if you want to see something, don't be shy and move forward. Because there will be code, a little bit of code on the screen, so if you can't see it clearly, please move forward. So we are calling all the e-naps for this website called Engineers on SG. So if you miss something, don't really want to come in front of it. I think you'll love it. The data will be available on Engineers on SG if you want to review it. Okay, so my name is Gaurav Parikh and I'm a Happiness Engineer at Automatic. I have done WordPress-related development for 7 or 8 years now. And I ran my agency and I worked at other companies for some time before joining Automatic. Today we'll be talking about creating your first child team. Now before we actually start, why do you need a child team? So what happens is, let's say you installed WordPress. Maybe you did the 5-minute install or one-click install or whichever install. Doesn't matter, you're host and you install a team and now you're saying like, I want to change this theme. Maybe you're not a developer, maybe you're a blogger or someone who is just setting up a website and you want to change some parts of a theme. For example, I have a test site here. So let's say you get this site. This is the 2017 theme which is the default theme for WordPress 4.7. So let's say you get this theme and you really like this but maybe you want to add something at the bottom. Maybe you want proudly powered by WordPress and coffee. Anything basically. So what happens is WordPress is GPL, it's free software, it's open source. You can just go into the files and change it. Next day there are 11 updates, you update the theme and your changes are gone. So what a child team does is it lets you make small changes to a theme and it protects your changes from updates to the main code. You don't want to just stop updating things because there might be security stuff, security, bugs, anything. Any kind of bugs that the new version will most likely fix and you don't want to hold on to updates and you still want to make changes. So a child theme will let you make small changes, big changes, any kind of changes to your theme of choice. So let's just dive into the stuff right now. Okay, so I hope you can see that. That's the themes folder. If you're attending this, you probably know how to get there. It's in your WordPress installation in the WP content slash themes folder. So what we are going to do is we are going to build a small very simple child theme for the 2017 theme. What you need is a folder, maybe test theme is my theme's name. So any child theme basically needs two files. Well, it basically needs just one file but two files is a good way to go. So first of all, we will need a file called style.css and the second one will be functions.php. Now to create a very bare bones theme, we'll need to put some code in both of these files and we'll see in a moment what kind of code we need. So if you go to codex.wordpress.org, there's a page called child themes. This is the page. If you can see there, you are at codex.wordpress.org slash child underscore themes. If you go to this page, it will give you a bunch of code to put in your style.css header. So we'll just copy this, paste it into the style.css file. Can you guys see this? Maybe I'll change the color. It should be much better now. So this is the basic code that you have to put on top of your style.css. You can change the names. For example, I'll change this to my awesome theme. Now the other thing that you have to change is the section called template. And under this, you basically need to put your parent theme's name. So you don't have to actually put the name of the parent theme. You just need to get the name of the folder that your parent theme has. So the name of the folder is 2017. So I'll just copy that, paste it here. And that's basically your style.css for your child theme. Now in the functions.php, let's see what this looks like. So I'll go to my wp-admin, I'll go to appearance. Can you see the theme is already here? We don't have a screenshot or anything. If you want to put your screenshot there, you can go ahead. I'll just activate this and show you how it looks. So it looks like this. It doesn't actually load any styles from the parent. So we'll just go ahead and add some code to the child theme. And it's like five lines of code. I already have it here. I'll just explain what it does. So it's basically a function which does an enqueue, an enqueue style for your, what it does is it just enqueues the style.css from your parent theme. This function here, get template directory URI, gets the path of the folder for your parent theme. And you just append style.css in the end. And then what you do is then enqueue the style.css for the child theme. You don't actually need to do this, but it's still a good practice to enqueue this line. If you don't understand any of it, don't worry. I'll leave the code with someone here. You can copy and read it at your leisure. And then this line just adds this function, add the WP enqueue scripts action. So these files actually load in the header of your child theme. So we'll go ahead and save this and we'll see what happens. So our child theme basically looks like the parent theme now. So at this point it'll just work exactly like your parent theme does. It has all the options, all the templates, whatever your parent theme has. All features of 2017 are in this child theme now. So now let's make the small change for this footer. So what happens with the child theme is you have any file in your parent theme and you want to make changes to it. So you make a copy of the exact same file, put it in the exact same location, but in the child theme folder and make changes to it. So the file that you put in the child theme, it'll overwrite the one in the parent theme. We'll just see how it works. So let's go to 2017. Now I know where this code is. You probably need to search for it. So the code is in this folder. So we'll make the exact same folder in our child theme. So template parts slash footer. We'll go to S theme, template. Now the path needs to be exactly the same otherwise this will not work. So I'll just copy this file here. I'll go ahead. So this is the file. It's proudly powered by WordPress and Coffee. I misspelled it. There you go. That's basically the gist. So you can basically, if you want to make style changes, just write some CSS in your style.css file and since it'll load after the parent theme, if you are careful with your CSS, it'll display the changes. Basically for making any other changes in the templates, just go to your parent theme, copy a file, make the changes. Voila. If you have any questions, please go ahead and ask. If functions of PHP is there particular order? Will the address go first then the child or the other way around? Okay, so I'll go to the code. So it'll load it. The files will load in the order that you write them. So we are loading the parent style first and the child style later. So it'll load in this order. For example, if I were to write a function, there's also a developer in the, let's say I'm the override function, in the parent theme's function of PHP, is there anything that I need to recover? So what happens is there are different kinds of functions that can be in a parent theme. So, for example, there's a kind of function called the pluggable function, which you can just, you know, replace. And there might be a function which is defined like... Okay, let's just... So there might be a function which is defined like this. If function underscore exists and function name here. So if a function is defined like this, so in such a case, you can just make a function called funk underscore name in your child theme and it will override the one in the parent theme. And there are some parent themes. There are some themes in which the authors don't follow best practices. So if that happens, like there is a function in the parent theme and it's used in some template, so just make a new function, copy the function from the parent theme, make a new one, make some changes, copy the template from the parent theme and put in your new function and it'll work like that. I'm sure you'll have to deal with a lot of badly designed parent themes if you are doing any kind of WordPress development. Basically, more than half the themes downloaded from ThemeForest and similar markets, you'll probably find all kinds of edge cases and this thing is that most good developers actually use something like this in their themes. In this kind of a case, you can just copy the function, make your changes, put in the child theme and it'll just work. Sorry? Yeah, if there is a function, if it's been used like that in the parent theme, so if the parent theme author is using add action, you can just do a remove action, but sometimes it's just like templatized function, I mean just regular functions and it's used somewhere in the template. A lot of people do that. Any questions? Yeah, definitely. So, for example, 2017 has, 2017 already has footer widgets, but it has like footer widget 1 and footer widget 2. So, what we can do is, let's add a footer widget 3. What we'll do is, we'll copy this file, template part, footer, put it here. So, we'll have to do two things. We'll need to define the footer widget area and we'll have to add it here. So, we'll just go ahead and copy this. We'll call it sidebar 4 for the widget 3, sidebar 4. So, most of the stuff that you usually do in a child theme is, half of it is copy and paste because most will just make small changes. So, we'll also copy the register sidebar thing directly from the parent theme, so we have less to worry about. Just make sure to rename or prefix any functions that you copy if you don't want to just overwrite them and use the exact name that we used there and it should work. Let's see if we did it right. So, footer 3 is here. Let's add something here. Seems okay to me but still not working. If anyone is seeing something that I'm missing please go ahead and tell me. I'm just like you. We all make mistakes. Could you try putting that one in the existing widget and see if you can do anything for some of the space? Could you try putting something in the existing... Maybe there's no categories there. So, we haven't written any CSS for making a tree column. So, it will be like that. We could just write some CSS to make it three columns and it will be like any other. So, there are three widgets there. If you find a theme which doesn't have footer widgets, just copy the code from 2017 and paste it there. So, that's how it starts before you start writing your own stuff. Any other questions? To be honest, this is the smallest demo that I have done. So, I would really appreciate if anyone has any questions, please go ahead and ask. Okay, great. Oh, one more thing. We're hiring. So, come talk to us if you're interested. So, this is the slide you'll see at any time anyone from automatic speaks. You'll see the slide. So, even if you're not interested, please come talk to us. We'll make you interested. Thank you. Thank you.