Step-By-Step Child Themes for New & Existing WordPress Sites | Christine Maisel | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Step-By-Step Child Themes for New & Existing WordPress Sites

teacher avatar Christine Maisel, Designer, SEO & Founder of Portable Entrepreneur

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

12 Lessons (45m)
    • 1. What Is a Child Theme & Why You Should Be Using Them

    • 2. When You Should Use a Child Theme

    • 3. What You Need to Get Started

    • 4. Setting Up Your Child Theme

    • 5. Activating Your Child Theme

    • 6. Adding Functionality & Features to Your Child Theme

    • 7. Pulling Styles From Your Parent Theme to Your Child Theme

    • 8. How to Customize Your Child Theme

    • 9. Overriding Other Theme Files

    • 10. How to Create & Add an Image for Your Child Theme

    • 11. Creating a Child Theme for an Existing Site

    • 12. Using a Plugin to Create a Child Theme

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Watch and create your own WordPress child theme as you go through this course. This course is designed for beginners who are unfamiliar with child themes and need to understand when to use a child theme and how to create one. 

Download & Use The Class Bonuses:

#1 Download 2 child themes you can modify and use

#2 Download a child theme creation checklist to follow each time you create a child theme

Inside we'll cover:

  • What's required to create a child theme
  • How to easily find and customize CSS code without knowing CSS
  • How to set-up the basic 3 step structure of a child theme
  • How to activate a child theme

If you've already created a website or don't feel comfortable creating a child theme from scratch, we'll also cover:

  • How to create a child theme for an existing website
  • How to easily create a child theme using plugins

Follow along as you go through the course and create you first child theme. Walk away with the knowledge of what a child theme is, when you should be using it, what you need to create a child theme and how to do it.

Meet Your Teacher

Teacher Profile Image

Christine Maisel

Designer, SEO & Founder of Portable Entrepreneur


Christine is the founder of the Portable Entrepreneur where she directly helps web design and SEO startups through education, coaching and services. 

Christine has been a web designer for nearly 15 years - 10 of which she has been self-employed. Her work has taken her from working for some start-up dot com companies in the early 2000's to working as a contractor for the Office of the Under Secretary of Defense to her own home office.

In her time, she has built 100's of websites and blogs primarily on WordPress and Joomla. Christine has also provided training to individuals and businesses to help them manage their websites on their own with no knowledge of web coding.

See full profile

Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. What Is a Child Theme & Why You Should Be Using Them: and this course, we're going to talk about what a child theme is and why it's so important so that you understand why you should be using child themes when you are creating new sites, whether this is for you personally or for a client site. And then we're gonna walk step by step through the entire process of actually creating a child theme so you can practice it, and you'll be able to implement this on your own in the future. I'm sure you're familiar with what a WordPress theme is, and here we're gonna talk about what a child theme is to start with. You first need a parent thing because no child can exist, of course, without apparent. So it's the same thing here. In order to have a child theme, you must have a parent theme, and that isn't anything special. It's anything that you choose. So if you have designed a WordPress site or you're setting up a WordPress site and you find a free theme or a premium theme that you wanna work with to help you layout the site and design at the way, you would like it toe. Look when you upload that theme not is considered your parent theme, and what we're going to be doing is creating a child theme for that parent theme that you have selected. Now there's many advantages to actually using child themes to start off with. You don't have to build a theme from scratch. This allows you to take an existing theme and add to it and improve on it. And you don't have to rest starting completely over from scratch. If you didn't like, it didn't work as you had expected. So if you've made any custom is ations, they don't turn out the way you're hoping. All you have to do is simply disable the child. Seem just as you would any other theme. And then you still have that existing parent theme that you can work with and that you can use now. One of the most common reasons to using a child theme is that if you are at all familiar with WordPress security, it is very, very important that you keep both your plug ins in your theme's up to date. And so, from time to time, developers will send out updates to either add new functionality to the plug ins or themes or to patch any security loopholes that they may have found. And so this is very, very important that you update your themes. Now what happens is if you do not use a child team and you update your theme, any modifications that you have made to that parent theme will be lost. So if you have made a bit of modifications, that's gonna take you time, effort and money. If you're having somebody else help you, of course, to redo those modifications to a child theme saves you all this time and effort. On top of all that, really, if you are not at all familiar with WordPress themes or you're new to this, creating the child theme is a really great way to gain an understanding of how WordPress themes work. So even by the end of this course, you have a much better understanding of WordPress themes in general. Now, with child themes, you can customize as little or as much of the theme as you'd like Teoh. But we're going to get into all of that and exactly how to do that, so hopefully this gives you a better idea of just how important a child theme is and how much time and effort it could really save you in the long run by doing so. So now let's jump into how a child team actually works and how we go about setting this up , so get ready to start practicing. 2. When You Should Use a Child Theme: So now that we've talked about just how important a child theme is, I want to make sure that you are aware of when to use or not use a child theme so that you can decide whether or not a child theme is going to be important to use for the actual site that you will be creating. Because if you were just creating small changes to the parent theme and this could be just changing the colors the Fonz, for example, those aren't really large changes, and you would actually be able to use a plug in, like the WP add custom CSS Plug in. Or you can just use the custom CSS section within your theme. If it has a so, for example, here I use the divvy theme and it has a custom CSS section, so I could use that. So it's up to you if you're just making some of those very minor changes, whether or not you just prefer to use custom CSS or use a plug in so that those changes are not lost now, if you're going to be making multiple changes or you're going to be making larger changes, then you definitely want to use a child theme because you have a lot more that you can lose , and you may not be able to actually make all those changes just using custom CSS And when you really just don't want to risk losing your work. And that's kind of a good question to ask yourself, at what point would you feel comfortable saying OK, if I If I lose this, let's say the font color reverts back to the default color. Would I be okay then? Yes. Okay, I don't need a child theme, but when you start doing more more modifications, you may feel less comfortable losing your work. And that's a good time to start using a child theme so without me and said, Let's look at how a child team actually works because there's actually just a few steps to create it, So it's pretty easy. It has a basic structure, and that structure is simply one folder and two files. Other than that, you're pulling from the parent theme that's already men created. So we are going to create that basic structure, and then we're going to link the child theme to the parent theme. So it can pull from that. And that's just where we get the path of both of these themes. And if that sounds overwhelming to don't worry, this is going to be a very simple process. You're going to know exactly how this looks by the end of it. So we're ready to get started. Now. You understand the background of a child theme when you should use it. Why it's important. So let's go ahead and start looking at exactly what you need to get started, and then we're gonna start building our first child team together. 3. What You Need to Get Started: all right, I hope you ready to get started. And before we do, we want to go ahead and look at what we actually need to get started so you can have that available to you, and then we'll start setting up the files and making our first child theme. So the most important thing that you need is a strong parent theme. And I say this is so important because not all themes are really meant to be a parent theme , So some are going to be better designed than others were going to be. So if you find that a parent file needs to be replaced for the most part or rewritten a lot , then it's probably not a good theme to start with. Now a lot of people will ask about free versus premium themes, and I'm personally like to use premium themes for several reasons. One is because they're going to be continually updated for the most part, and they're going to be adding new functionality. They're gonna add new features. They're gonna fix any security loopholes that they found, and typically when you have premium themes, you're going to be able to get good support so that's very, very different than free themes that may not be updated at all that they may get out of date quickly. They have security loopholes. You can't get any support for them, so that really makes a very big difference. Now, I know it could be hard to choose a theme, especially if you're trying to find one, that that fits exactly what you're looking for. But remember here that we're going to be able to modify this theme so you would just want to get something that's is closest possible. You can always find about the images, the tax, and you can really customize it toe look like yours. But I know it could be hard to choose the theme. So if you'd like some ideas, I will include a list here of different good parent themes that you can start with. And you can use that as a starting point to find something that's gonna work for you and your website. Now, really, when you're looking at these themes is while you should like the functionality and the overall features of the parent theme that you're using, the way you don't have to create a lot from scratch. You don't have to do a lot of modifications. Now we are going to need either see panel access or FTP access. And the reason for this is that you're going to be creating a folder and you're also going to be creating files. So you're going tohave your main folder. You're gonna have a style sheet, which is a CSS file in. Then you're going to have a functions that PHP file. Now, if this already sounds over your head and you're ready to just quit right here, don't worry. Don't leave yet. The two files really don't need much and them you're not going to need to know how to code . I'm going to give you what you need, and we're gonna break it down. So it's simple for you Now. The reason I say is you'll need seep in or FTP access is because this is where you'll be able to create those files in that folder that you need a swell. So if you need FTP access, you can use a free software called file Zillah that makes it very, very easy toe upload and download files from your host directly to your computer. desktop. That's really all you need. You really need just to have a strong parent theme to start with, and you need to have the ability to upload and create your files and your former, so go ahead and get that ready and let's get started. 4. Setting Up Your Child Theme: So this is what your style sheet is gonna look like when you're done. Now I want to walk through the different parts of this so we understand what each of these actually means and what is actually required for you to include, because I actually include a simpler version of this. But I want you to understand everything that you may see if you are coming onto another child theme that somebody else has created or you're working on the site that already has a child theme. So the 1st 1 is the theme name, and this is a name that you create and this is what's going to actually show up in your WordPress back in. So typically, I just use the parent theme name followed by child. So in this case, I would use a divvy child. Now, the theme you are, I hear points to If you have, let's say, a demo of the website and you are a theme developer and you have a website dedicated for this theme. You would show that you are all there now when you navigate to your WordPress dashboard and you click on themes and you find your actual theme. If you click on theme details, you'll notice that there is a description. So whatever you put here in this description is actually what is going to appear when you click on this theme details button. Now you have to put in an author's name. And of course, that's gonna be you if you're creating this child theme. And if you have your own website, you can insert that here under your author, you or I. Now template is actually very important because this is where you're going to put the actual name of the parent theme. But what's important is that you want to make sure that you are grabbing the name exactly as it appears in your WordPress theme folder, because it's case sensitive. So make sure, for instance, if I look at my theme folder here, there is a capital D. So I need to make sure that I use that if I was using 2015 it's all lower case. I need to do the same when I insert my theme name here under template, because this can cause a narrow. So I just want to make sure that you are using exactly what it says in that folder. Now the version this if this is your first child theme, really, you could make this up. Typically, you're just going to start with one. This is a license that your theme is going to have. So you'll most likely find if you're using a WordPress theme. That the theme has a GPL license is that if your parent theme has a GPL license, that you should just use the same. So whatever you're a parent theme has just go ahead and use that now. The license Your I is where you can put the address to the themes license so you can put the URL to the GPL license if that's what you're using. Now, if you are going to be uploading your theme to the WordPress directory, let's say you create themes and you release them there in the WordPress directory. The tags will help others find your theme when they're searching within the WordPress directory. So you just want to make sure that the tax that use our descriptive and relevant to the theme that you've created now, as I mentioned earlier on I don't use all of these if this is a child theme that I'm creating for myself for a personal site or I'm creating, even for a child site, because I'm not releasing this theme, so I don't need all of this information. So really, the most important information that you need to make sure that you include It's a theme name in the template. Everything else is just a bonus, so I often include the theme name. I'll include the description, my name and often do that because if another developer down the road who works after mean wants to get in contact with me, they could do that. If for some reason I lose contact with the client and they want to reach back out to me, they may be able to see my name on the template. That's why I like to include the name. And then, of course, we talked about the template and version is completely up to you. So really, as long as you have that theme name in the template, you are off to a great start. We looked at the basic structure of creating a file theme, and that had three things. The folder, the style sheet, which was the CSS file and then the functions dot PHP file. So you have a couple of options here. You can create this structure directly on the server using FTP client, or you can create them locally onto your computer. Then you can zip the file up and then install it as a theme from your WordPress dashboard. So to make this easy, I'm just going to create the child theme directly on the server. But however you go about doing this, it's the same process. So feel free to do whatever makes you the most comfortable. So now that I'm here at my hosting site, I've gone into the sea panel. Now I need to look for my file manager. Now, if you have not already installed where press, you do need to install wordpress, you need to go ahead and install your parent theme, and then you can proceed with this process. So I'm gonna go down to my file manager here and open this up and we want it now the gate to her themes, Boulder. And you're gonna find that here under WP content and themes. Now you're going to see a few folders. He already you'll have the 2014 15 and 16 folders. And then you're gonna have your parent theme. So the first few are simply the themes that WordPress has preinstalled for you when you installed WordPress. Now, divvy is the name of the parent theme that I'm going to be using now in this Themes folder . This is where we want to create the folder for our child theme. So to do this, I'm simply going to click on new folder. And then the common practice here is to put in your parent beam name and then put Dash Child, and then you can create the new folder. That way, it's very easy to recognize if somebody else ever works on this in the future, they'll know exactly where to find the files. Now. Nice. We're going to create this style sheet, and we're gonna want to put this style sheet within this child folder. If you're not familiar with what a style she is, this simply includes the code that actually determines the design of your website, and it's really the file that you're gonna be most likely to customize. So if you think about wanting to change the font size of font itself, the font color. Any of that information you're gonna be able to update within the CSS file. You can simply open up a text editor that you have on your computer. Any free one will do. Like I'm going to use no pad. And they want to save this file as style. Got CSS now with that saved working them. Want to go into the child theme just like I did. Remember I was here under Debbie Dash. Child, open that up and then I can click, upload, and I'm gonna be able to navigate to my computer here, click on the file that I just created Select, Open and it's going to give me a notice here a the bottom, my screen that says that it has been completed so I can excite a here and just gonna refresh the screens. We can see it and we can see now the style that CSS file is there. So I've already taken two steps towards setting up this child theme 5. Activating Your Child Theme: now that we've added a bit of information to the style sheet. This is where your child theme is really going to start. Feeling more riel with the steps that you've completed so far, your child theme is actually gonna show up as an actual theme in your WordPress dashboard. So if you go ahead and head over to WordPress dashboard, you can go to appearance and themes just like you would toe upload any other theme and you'll see here. Now I have the divvy child theme showing up. So let's look at this 2015 theme as an example. If I click on theme details, you'll notice this different information. You have the title of the theme, the version number the author. And then you'll notice that this actually links to the wordpress dot org's site because they are the author. And here you have your description in your tags. So this is actually being pulled from that style sheet that we just created. So if I go back and I look at mine, I have the title. I have my version, my name. It links to my website. I don't have this long description. All the tags So this is just gonna make the difference of how this appears in the theme details will actually look at later how you can add in a custom image for your theme if you want to go ahead and do that. But of course, that's not required. So all you need to do here is click on Activate to make this your life thing. So now if we go to the live site, you're not going to see any changes because you haven't added anything to your child. Seem at this point. So now we're gonna start looking into the functionality of the features, the styles You can see where you can go about making changes to your child theme. 6. Adding Functionality & Features to Your Child Theme: When we first got started, I mentioned there are three things that you would need to create a child theme, the folder, the style sheet and the functions that PHP file. So we've already created the 1st 2 So now it's time to create the functions that PHP file. And if you've never heard of this file, you're not familiar with what it does. This is basically going to allow you to add functionality to the website. So if you want to add new functionality or futures of your own, or you just want to modify any existing functionality, you're likely gonna do that in the functions dot PHP file. Now, as you can probably imagine, this file it is written in PHP, and this is actually very simple file to set up literally. This is the code that you would need to add. You literally open it with this first line here, and then you add in the PHP code. Now, when we first got started and I was talking about the advantages of creating a child team, one of the things that I mentioned was it's helpful to understand the basic structure here of a WordPress site. I bring that up now because you don't actually need ah functions dot PHP file for your child theme Because if you're not gonna be modifying any of the functionality, maybe only the styles, then you can do that in your style that CSS file and you don't need to bring over the functions that PHP file at the same time. There is a reason why you would want to keep that. So I do want to spend a moment talking about why it is important to still have that functions that PHP file now. Earlier, I also mentioned that one of the steps here is that we need to link the child theme and the parent thing together in order for them to talk and to share information. So we need to find a way to do that. In previously, the general rule of thumb was to go back to the South, she that you created and use what was referred to as an import rule, and it literally looked like this. This was the line of code that you had added to your style sheet. Now this dough works, you can still do this. The reason this is actually not used as much now is because this can actually slow down your website, which is obviously not a good thing. You want your website to run as quickly as possible. But if your theme has several style sheets, it will load them all one after the other. And so that can really cause your site to be slowed down. So if we use our functions that PHP file, it will speed up the site, and it will make sure that that is not have any. So the first thing that we want to do here is we want to go ahead and create that functions that PHP file. Go ahead, open up your text editor again and add in the code here and then Go ahead, save that and upload that to your Themes folder just like you did for your style sheet. And then we're gonna actually look at what code you can add to your functions that PHP file in order to link your child leaving your parent theme together 7. Pulling Styles From Your Parent Theme to Your Child Theme: all right. Now we are ready to link our child theme to our parent theme. And we need to do this so that it can pull this style in the functionality from our parent theme. And then once we do this, then we're gonna be able to actually start customizing and making the changes that we want . Teoh. So if you actually go to your site and you've activated your child theme, you're gonna see that there isn't really any style to It's gonna be a bit messed up. It's not gonna look exactly like the actual parent thing did. So what we need to do is we need to go back to our functions that PHP file. Now all we have so far is this code right here. And this second line here is a comment. So if you have the two Ford Slash is followed by Asterix, you can write whatever you want here to describe the code that is going to appear below it . You can also just completely remove. It just depends on what you would like to dio. And then what we're gonna do is we're gonna add the following code, so I'm gonna attach this you can literally copy and paces. This is called the WP in Q method, and this is basically just gonna make your website a lot nicer. So all I do is that pay set in, I click save. I'm gonna return to my website and refresh it, and you should now see that the styling from your parent theme is now pulled in. So now everything that I've set up so far has been pulled in. So at this point, you have now technically successfully created a child theme. So see, it's it's really not too much work. It really only takes a matter of minutes. Once you know what you're doing. You set up those three things that we talked about. But as you can see, it still looks exactly like the parent name. But now that it's set up, this is where you can begin customizing your child theme, and that's what we'll look at how to do right now. 8. How to Customize Your Child Theme: Now we're getting to the fun part because now we're ready to begin customizing the child theme. So here's where we can return to the styles that CSS file. We can make any of the styling changes of it want. This could be colors. This could be sizes, bonds and so on. So let's look at exactly how to do that. Now, if you don't have a lot of experience with Codina or HTML CSS, that's okay. I'm gonna show you an easy way to figure out how to actually add code and where you can just copy it from to get the changes that you'd like. So I've set up this page, and just as an example, I've put in three different headers, had a 12 and three, and each of these uses a header tags. So this is a church one tag H to tag each three tag, and they have different sizes, and each theme will automatically set it to a specific font size. But let's say I don't like the font size that my parent theme comes with us. I wanted bigger, so I'm gonna modify that with my style. That C s a sheet now the first thing they want to do is I want to download this browser extension. It's called firebug. It's completely free. It's an open source software, and what it's gonna do is it's going to allow you to see the code that a website uses so you can grab that coat. So let's go back to this example Page for a second. Let's say I want to figure out what size Header one is. So I'm gonna right click on that and click on Inspect Element with firebug So I hear we can see that it is highlighting Header one. If I click Header to is gonna highlight that on the screen and someone so we'll start with Header One. Now if I go over to the right in the code, it is H one, just like it is here on the left. It's going to be the same here on the right. So this says it is font size 30. Now, before you do any changes to your styles sheet, what you can do is you can change the code right here and Firefox, and it's going to show you what it will look like. So this saves you a lot of time from having to go back and forth, figuring out the different sizes and everything. It's really handy. So let's say I'm just going to use a big number just so we can easily see the change. Let's say I want to make it to be 45. So now you can see right here what that looks like. So if I say you know what, that's a little bit too big. I want to go with 36. Oh, maybe a little bit bigger than that. Okay, 40. All right. That looks good. I'm happy with 40. So now all I need to do is I can copy this code right here. This h one code, and I'm gonna go back to my style sheet. I'm gonna open that up. We need to edit that. And remember that header information that we first included when we first set up the sheet , we want to make sure that we're pasting this information below that. So here I'm now saying I want my new header. One text size were font size, rather to be size 40 40 pixels. I'll go ahead and save that. And now I can return to live site now, whatever you're using firebug and you're making these changes, it's not actually making it on the live site. You do have to put it in the style sheet because you can actually use this for anybody. Site. So let's say you go to somebody else's site and you see a font size or a particular font that you like or any sort of styling. You can use firebug on their site and then you can even edit it. And, of course, when you turn firebug off, it's gonna refresh, and it's gonna go back to what you said. So the same thing here. So again I could do the same thing with Header to, and I could go back to my style sheet. I can add in the same code here for Header to and change that to, let's say 35 I could make it whatever I want. So now I can do the same thing. If I look up CSS, I know CSS. I can go in here and I can change the font family. I can add in a different bomb family say one times new Roman and I can save that and returns a live site and refresh, and now you'll see that the text font family has changed. So that is how you can easily go about editing the CSS, whether you are familiar with CSS or not, and easily be able to grab the code and customize really any of the styling that you find on your website. 9. Overriding Other Theme Files: Now you may find that there are other areas of the website that you wish to edit. And some of these areas may not be within your style CSS or functions dot PHP files. And when this is the case, then you'll want to copy the file from your parent theme over to your child themes so that you can edit it. So let me give you an example. Here I am, working on this site in and using divvy. It includes a link back to elegant themes as well as WordPress. But I would like to customize the footer here so that it references the actual business name. So what I want to do is I'm gonna go back to my files here, and I'm again. Justin, see Panel. But you can do this with FTP as well, and I'm gonna go back to my parents theme here, so I will look for my footer dot PHP file. What we're going to do here is simply copy this pile and I'm just gonna put in my child theme folder name here and click copy. So now when I go back into my Debbie child theme here, I'm going to see that there is the footer dot PHP file. So now is where I can go in and edit it. If you're not familiar with PHP, the easiest thing to do is look for the text that you're looking for. So let's say elegant themes and then just do a search for it. Search for elegant and see what comes up. So here we have the URL, and we have the elegant themes link here. So you also notice here that there's an opening paragraph tag and a closing paragraph tag so I can get rid of all of this PHP code in between. And I can just put in whatever text I want to appear in the flutter. So if I just want to put in the copyright information safe for the business name and the year I can do that and then click save now going back to a live site. If I refresh that, I'm going to see here a to bottom that the text that I just inserted into the footer dot PHP file is what appears there at the bottom. So that's it when you actually go to update your theme. The footer is actually one of the common places that are going to be replaced when you update your theme files, because it's very common for the developer to put their own link there. So this is a way to make sure that you don't lose that customization by including it here in the child theme. So again, you can go back here and you can make this an act of link just like elegant themes or WordPress previously, waas. And that's it. That's all you'll need to dio. So it's the same concept here, really, for any of the files that you would like to create. Another way of doing this instead of clicking on Move, is to copy the footer dot PHP file simply by opening it. Now, of course, you're gonna want to do this in your parent theme file. You can literally copy all the text, close it, and then when you go back to your child theme folder, click on new, put in the new theme name and then paste it into that file, and that's it. So either way that you feel most comfortable with. But that's how you can go about editing any of the other files 10. How to Create & Add an Image for Your Child Theme: now, When we first activated our child theme, we saw that there was no image for the child theme itself like the other ones have. So if you want to upload an image, it's very easy to dio. Typically, you would wait until the end of the process. Once you have finished your child theme and you just use a screenshot of your actual theme and upload that. But if you want to create a customer and you can also do that completely up to you, So what I'm gonna do is I'm just gonna upload a custom one. I'm gonna go into photo shop. You can use any graphics program. It really doesn't matter. So you want to create an image that is 8 80 by 6 60 Now, obviously, the image doesn't show that large. It's going to show us 387 pixels by 290 pixels, but this is the size that WordPress recommends. You upload it so you can upload it. Really, In any format GIF j. Paige, PNG, whatever you'd like. But typically PNG is the file format that they recommend. So we'll go with PNG, and we name it screenshot Now you need to do is go back into your file manager. And what we're gonna do is we're gonna make sure that we're in this child theme folder. We don't want to be within any of their folders, and then we're just gonna upload. And again, we're just gonna grab this screenshot file. So screenshot dot PNG Gonna wait till it's uploaded. Return to my dashboard and we'll just refresh this page here and you'll see that now I have the image uploaded. So sad, simple. 11. Creating a Child Theme for an Existing Site: if you are working with an existing website that does not use a child theme, and this could be because you created a site before you knew about using child themes. Or this could be that you took over maintaining an existing website where a child theme was not used. So the question becomes, How do you create a child theme foreign existing site Now, no matter what. I always recommend that if you are at this point that you take a backup of your current site before you begin altering any files, because you just want to have something that you can fall back on that if anything goes wrong, you have the original files, and you can restore your sight very easily. At the very least, do make a copy of the files that you will be altering so that you have a backup of those copies and can replace them, especially if you are going to be editing the functions that PHP file that is really a core WordPress file, and the slightest error in their can cause a site wide air on your site. It can take down your site, and you can always river back if you have that file backup and your website will be just as it originally, Waas, so you don't need to be afraid to edit it. As long as you have that back up, you're gonna be fine. So if this is your site and you know the changes that you made, ideally you can go back to your CSS changes. You can go back to your style sheet, and you can remove any of the CSS changes that you made. And then you can put those changes directly into your child themes style sheet that we created a little bit ago. That way, you're going to keep the parent style sheet exactly the same as it was when you downloaded it, and any of the modifications will now be in that child themes style sheet. Now, on the other hand, if you did not actually make the changes or you're not sure of the changes that were made, then you're gonna want to download the parent theme again. And you'll need to pull up the two style sheets side by side. So you'll be looking at the original parent theme file, and then next to that, you'll be looking at the current themes style sheets, and you'll just need to go line by line looking at any differences. And when you see any differences, you want to pull those from your current site style sheet and add that into your child themes style sheet that you just created. Then, once you have all of the changes put into the child style sheet at that time, then you can replace the current site style sheet with the newly downloaded parents style sheet. So there's a bit of back and forth when you don't know what changes were made, you would have to spend a little bit more time comparing what was made. But that's ideally how you do. You just swap out that original parents style sheets. You have a fresh style sheet and you've removed all of the changes and put them into your child seem so overall, it's pretty much the same step as what we went through here, but you'll just need to compare it to a fresh version of the parent style sheets, since the current site will not have that 12. Using a Plugin to Create a Child Theme: Another option that you have for creating a child theme is to use a plug in, and then we'll walk you through the process of what to do, and it's going to create the files for you. So if you're new to this or you don't feel comfortable handling the set up that we walked for than this is another option for you that you may want to consider. So there's a couple of plug ins just in general, regardless of the type of plug in that I'm looking for, I always look to make sure that it has been recently updated that a lot of people are using it. I take a look at the reviews, and I do this to make sure I'm getting a quality plug in. But to also make sure that the developers updating it so they don't have to be as worried with any security issues If I see a plug in that hasn't been updated in two years than that's probably a plug in that has not been updated, security is not being taken into consideration so but something I like to stay away from. But we have this one here called a child theme configuration, which is an option. And we also have another one here called The One Click Child Theme. Both of these have been updated, have a lot of installs, good reviews. Right now, I am gonna walk through using the child theme configurations so you can get an idea of what that looks like. So when Amendment WordPress dashboard here under the tools menu once I have installed this plug in, it is going to appear here under the Tools menu has child themes, and this is gonna walk you step by step through the entire process. So we have three steps here to start us off. So if we are creating a new child theme and our first option here, we're gonna want to go ahead and create a new child dream. Now, if you want to duplicate an existing child theme that maybe you just want to do some slight modifications, let's say you want to set up in different menus or play around with how something would work before you actually launch it. Or let's say you wanna have a theme specific for the holiday season. If let's say you have a e commerce site then that's an option. But typically you're going to create a new theme now. Next is you want to analyze the theme just to make sure that this is gonna work good for a child theme. So when you click on the Drop down Arrow here, it's going to give you a list of all of the themes that you have installed. So, for instance, let's just go with the 26th team to start, and we can click on the analyzed button. Now it's going to give us a message here that says this theme appears okay to use as a child theme, so that means we can go ahead and move forward, and then it lists out additional steps. So here we're gonna be able to write the name of our directory, which again uses that same set up that we talked about earlier. Being a parent theme name Dash Child. You could rename that to whatever you want. Then you can decide whether you want to use the primary or the separate style sheet. Then you'll notice as you go through here, it's gonna put the recommended option or the one that you're most likely to need. as the first option, and that's gonna be pre selected for you. If you're more advanced at this and know more about what to do here, then you may want to look at some of the other options. But if you're not sure, good rule of thumb is to go with the 1st 1 So we're going to go with the primary style sheet. If you're going to create a separate style, she you can do that here, and then we're going to go down to the sixth step here. Now, this says, Do we want to use a WordPress dile que And that is what we looked at in the functions that PHP file. So that is definitely the recommended option. That's the one you should likely be using. Ah, but if for some reason you want to use the old option that at import you can do that here and then we'll go down to customizing the theme name. So we looked at how to do this in the style sheet, but if you're using the plug in, it's going to make it really easy for you. You're gonna be able to add in all of the details right here, so that's pretty self explanatory. You can add in the theme name, website, author description, etcetera. No, If you need to calm penny of the menus or widgets, you can go ahead and click this option. It's gonna transfer those over to your child theme, and then we are going to create a new child theme. Well, I don't want to do is I want to take a look at another option here. I want to take a look at the divvy option because the other options here the 2014 15 16 those air from the WordPress directory. So most of the themes that are uploaded there are set up the statement way, so you're usually not gonna run into any issues. If you are using 1/3 party theme or you're using a premium theme, then that's when some issues start to come into play just because they often set them up differently. So let's look at the divvy theme. Since that's ah, popular one. We'll go ahead and click. Analyze Now, this tells us here that yes, this is OK, Manel, This brings up why you don't want to use the at import option in your styles dot CSS file and you should actually be importing the file using your functions dot PHP file. You'll see that here with Debbie, they actually load a few style sheets. So you have one for short codes, short codes, responsive, etcetera. So they actually load a number of style sheets. So here we're gonna name the new directory. Now, this is saying no to cause I've already set that up, but I can change that to do whatever I wanted to be. I do want to use the word pressed Al que, especially as this theme has multiple style sheets. And then I can again customize the name to be anything that I want here. And I don't need it to copy this, but I'll go ahead and create the new theme. Now you notice there's a message at the top. The child theme Deby child has been generated successfully. An important note. Preview your child theme before activating. So you definitely want to click this. You want to make sure that your child theme looks and is acting the way you expect to before you make that your active theme, you can go here, make sure everything looks good, and then you can go ahead and click. Save and activate. Now you notice when you go to beam appearance and themes, you'll notice that your new child theme is activated just as you expected. Now, if we go back to the child themes here now, we're gonna be able to actually customize that child beam. So now we can go through the different tabs here, and it's gonna let you know what you can change. So here you'll be able to add in specific CSS that you want to change, and then you're gonna be able to see your existing parents style dot CSS sheet so you can see any of the information that they're using. You can easily copy and pay set into the CSS area and then again, with child styles, you can see what is already existing in your child style sheep. Now we talked about that. If you want to add a specific areas of the site so this could be, let's, say, the header of your site or the footer of your site that you can copy that file from your parent theme and put it into your child theme folder. So this allows you to do this right here under the files menu. You have the footer. Let's say we want to duplicate that. I can just click on footer and then click Copy selected to my child, Dean. So now it's gonna take a copy of that file and place it into my child theme folder. And now I'm gonna be able to go back, and I'm gonna be able to edit that file specifically. So now this is actually gonna let me do this right here. If I want to edit it, I simply click on it. And then I can click here to edit that theme file so you'll see here that this is telling me that this is the style sheet for my child theme. The divvy child. 02 And here I can make the changes below here and click on update file. But before you actually make a change right here on the website, do make sure that you have taken a copy of this, especially if you are dealing with the functions that PHP file. You have that copies of anything were to happen. You can revert back to the original version and you'll be able to start fresh very easily. Let's go back here and look at what else we have. If you want to add in a new image, we looked at how to add a new image. You can simply do that here. You can upload. The new one is gonna show you a preview of what that looks like. And then, if you would like to create a backup of this child theme, you can export as a zip right here and you'll be able to do that. So, as you can see, this lets you do everything that you need to do simply by using a plug in. So this is very handy if you really would benefit from a step by step process like this.