Create a Child Theme Manually
A free video tutorial from Rob Percival
Web Developer And Teacher
4.5 instructor rating • 41 courses • 1,806,784 students
Learn more from the full courseThe Complete WordPress Website Business Course
Master WordPress with this Complete WordPress Course, without learning how to code and without any programming!
21:51:00 of on-demand video • Updated May 2020
- Create all kinds of commercial websites, using WordPress, to sell to clients
- Master the inner workings of WordPress, for fixing, troubleshooting, and building websites
- Set up server and hosting environments in the most economical and secure way
- Build and edit websites within staging and development environments
- Migrate and transfer WordPress websites from staging to live and vice-versa
- Sell Website Care and Maintenance plans to happy clients for recurring revenue
English [Auto] In this lesson you'll create your own child theme using the standalone theme we used from automatic as the parent theme by using your code editor and a few snippets of code you'll manually create your own theme based on another. Here's where you make any code edits to customize the site using best practices by editing the child theme instead of the original. Let's start by just reviewing what a child theme is here from WordPress dot org a child theme is a theme that inherits the functionality and styling of another theme called the Parent theme child themes or the recommended way of modifying an existing theme. Now we went over that in the last video. But if you scroll down on the same page there's a little bit of instruction about how to create a child theme. You can also find a lot more detail if you Google something like how to create a child theme in wordpress. You'll come up with a lot of different tutorials to do it. It's not actually that hard. You do need a code editor like Adam that we've used in the past. First you need a child themed directory which is basically a folder called Something child and then you need to files inside of it style that CSSA and functions dot THP each one needs to be populated with a little bit of code but that's all you need. And then you can add your CSSA styles or your functions dot ph peacoat code snippets that you might be using to change the site and add them to your child theme only. Here's a challenge for you. Go ahead and open up. Start map or whatever you're using for your local development environment and open up your fire weed photography site locally. Open up the Wordpress dashboard and look at the themes and then go ahead and look at the Wordpress Codex at Kodak's dot WordPress dot org slash child underscore themes or Google one of the tutorials maybe even use this one from WBM you dev dot org if you like but your challenge is to create a child theme of this one called affinity and activated puzzles video now and see if you can do it. I hope you did well with that whether you're using map or local by flywheel for your local development environment or even creating a child theme on your live server. You'll just need to find your file structure and go into WP content and the themes folder to take a look at the names of the themes you can use as parent themes. First I'm going to find the location on my computer that has the files for this site. If you're using map it would be under the map folder and reached the docs and your site name the using local by flywheel. It's under your username and the local sites folder then the name of the site under app and public. If I open WP content and then the themes folder that's where all my themes are located you can see in this example I've already created a child theme for the affinity theme and in this case affinity is the name of the parent theme and so I named the child theme affinity Dasch child. If I open that up you'll see two required files inside the child theme folder and I've also included a file called screenshot here and will have a screenshot so that in our appearance theme's area in wordpress our child theme will show the same screen shot as our parent theme. You know you can name your child themes anything you want. I'm going to go in here and just to show you I'm going to create a new folder and make another child theme in the same way that I did before this one. Just call it affinity child too. So if I open that folder there's nothing in here I need to create the two files and then find the screenshot and copy it into here. That way I can go in and activate affinity child to in my wordpress site. Now inside WordPress dot org on the child themes page of the codex. Further down is a block of code we can copy and paste into a style dot CSSA file. So I'm just going to select that entire code and press control-C to copy and if I open my code editor Adam you can see that I have it in a lighter color. Now I'm doing some video lesson updates. And so my item is in a letter color easier to see on the videos. You can see I have the style that says under finity child selected and open right here. Now if I open affinity child to can see there's no folders there but in ADOM I can just right click and I can click new file and it will place it inside of the folder that I right clicked. And so I'm going to call that style that see SS. It has to be named that for every child. And I'll just press enter and I have a blank file that I can place that code in to control V to paste. And there's my working CSSA style that CSSA file. Now for me the only two things that you need to have are the theme name and the template. And so just to make it easy to understand. Let's go ahead and just take away everything else except for the theme name and the template. And these two comment tags at the top and bottom. So this is going to be an affinity. Affinity child 2 is what I want to name it. And the template is going to be the folder name of the parent theme. In my case it's just affinity just like that. So I can click control apps or or press control s or file save to save my file. And now that's done. The next one I need is called functions dot ph. So again I'm right clicking in the folder I want clicking new file inside of Adam and again in the file name for your child theme for this file needs to be functions dot HP WordPress. We'll be looking for that file name. So I created a blank file called functions. We now go back into the child themes page in the Wordpress codex and a little bit lower down there's actually two blocks of code that you could use in the functions duppy. The first one it isn't really useful as much as the second one. If you're stop child theme style that CSSA contains actual CSSA code as it says here in the document you'll need to enqueue it as well. And so on we're going to use the second larger block here in order to place that into our functions. Dot ph P. Now when I grab this code you can see that it has an opening and closing P-H P-TECH. I just hit Control C so that I'm going to place that in atom in my functions dot ph P file for my child. I am going to get rid of the second ph P closing tag However because the way WordPress works it stacks these files together and we want to open with the HP Dagh but we don't need to close it because the final file usually footer that pupae closes that ph for us inside of the Wordpress files. Now we're not quite finished with this file yet. This is just an example set of code where parents style needs to reflect what the parent theme calls its stylesheet. So this is just a comment in here. This is the 2015 style actually for the 2015 theme. You would take this title right here and place it inside of the single quotation marks thereby defining the name of the variable parent style in your functions that the HP file since we're not using the 2015 for a parent theme we're using affinity for our parent theme. Let's take a look at the functions that ph P inside our parent theme and try to find that parent style. It's usually called something dash style. And I might just assume that it's called affinity dash style that I need to find it and make sure so that my functions that huge file for my child theme works correctly. So inside of Adam if I like if I press control f for find it will open up a window where I can find something if I just type dash style. It's telling me it's found one item and I can click find and it scrolls down inside the file to where that is. So I could see that the W in Q style has defined affinity style as the name of that style sheet. So I'm just going to copy that. Control-C go back into my functions that Peachi for my child theme and that's what I'm going to place between the single quotes and close this find window to get rid of that styling. So it's not so confusing. Now I'm going to paste affinity style and of course I don't need this comment line right here so I can be a little confusing so I'll get rid of that. And that is all the change that we need the parents style is defined as affinity style. So if I just hit phials save or control S for save. Now there's only one more item. Let's go back inside of the infinity child's you know we can see two out of the three files. Now where are we going to find our screenshot. Well we can just go back into our themes folder and in the parent theme there is usually a screenshot file right in the main folder of the theme. There it is it's called screen. And again it has to be called that. So that WordPress knows what to look for to display it on the appearance beam's page in the Wordpress dashboard. I'm just going to right click and click copy and then go back into my child themed folder right click anywhere there and click paste. Now I have a copy of that screenshot. It's going to look the same as our parents screen shot this is all explained among the two blocks of code here especially in this paragraph on whoops on WordPress dot org. Now all that's left is to log into the Wordpress dashboard and go to appearance themes and take a look. Now I have the affinity child to theme it's using the same screenshot as the parent theme. And if I roll over the child theme thumbnail right here and click activate I just activated that child theme looks like there's no errors. And let's just check out what it looks like by opening it in the new tab. It looks like it's working all the way down to the footer. Let's finish up by making one more change within the style does CSSA file of our child theme and we'll see that that makes some changes to the site without affecting the parent theme at all. Maybe we could choose something down here on the footer. For instance these lines at the bottom of the widget titles on the footer aren't very bright. Maybe I can make those a bright white instead of this low gray the way I'd find out what the CSSA styles that I need to change are this by in Firefox at least going under Tools web developer and opening the inspector the inspector inspectors something when this is activated inside of this Firefox utility that when I choose an element on the Web site it'll tell me about it on the right hand side. Here's the actual markup code on the right and down here at the bottom are the CSSA styles. So I can see that there the let's see this is defined as a border that's one pixel that's solid and it's this color. So if I take this whole style element called Dot widget title that's a class along with the first bracket of this hit copy that's come into Adam and just below my style that's the SS of my child theme. I'm going to start out the code block by doing that then I'll hit enter to the next line. I'll go back over here and inside of the brackets. I want to change this border. Bottom so I'll just Control-C copy that and place that in my code here. I'll let enter one more time and I just need a closing bracket. And great. So instead of having this dark gray color I'd like that to be white great if you don't know your color hexadecimal codes. You can go to Photoshop or Pichler one of those image editors and pick a color and find out what its number is. So I hit control as to save and just a check. Nothing has changed within the style sheet of the parent theme. In fact the parent theme is using this huge amount of styling and the child theme pulls that in automatically because we were able to cue the styles in the functions dot ph P Well let's go back to our Web site and take a look. If I just close the inspector and refresh the page since I saved that style data the file. Well sometimes you might have to do a little bit of experimentation because I can see that didn't change that border bottom to white. So I did go back into the web developer toolbar and open the inspector actually. And when I look at this area I also see that there's a dot footer widgets there's a footer widgets class in front of the widget title as it is defining its border and its color as well. So if I take that footer widgets class and paste it right in front with a space for widgets and widget title and then the border bottom can be defined as white. So I get control S and save it. Turn off the web developer and let's see if I refresh. What that does to the border of the footer titles. Nice nice and white. Great. And we can see that that's only been done to the child theme not the parent theme. So when they release affinity 1.1 or 1.5 or 2.0 I'll be able to update infinity still get all the newest stuff when they update the theme. But my changes will still be preserved. Because they're within this affinity. Champeen in this video you created your own child theme using the affinity theme as a parent. Then you activated it and made a change to the style that CSSA file to change the website without touching the parent theme. Nice job in the next video you'll create a child theme using a plugin which can make it slightly easier. Then you'll add some code to the functions dot ph profile to make a fundamental change to the Web site again without touching the parent theme. See there.