Lessons

Lesson Info

Setting Up a Child Theme

Hi, welcome to customizing wordpress with css and html. Brian wood and let's get started. So what we're going to do is we're going to take you on a tour, I guess, of word price and how to create it at it, the different themes that we have and the different function of the files that we have because a lot of us will get a theme, get something that's going toe to toe, look the way we want it, perhaps, and will realize later on that, you know, we need to meet changes beyond what the themes says or what the team does, so we need to make those changes, but we need to be very smart about it, because if you don't, bad things can happen and I'm gonna roll a few stories, I think every word press developer in the world has some kind of story or something that they talk about that says, you know, I screwed up, okay, basically talking about what, how it works and how things happen, so what I'm gonna do is I'm going to get into this is the site that we're going to be working on its thieve evil doug...

hnut site and that's a very happy gentleman right there. We're gonna go through it kind of makes him edits to this, all right, you're going to see that I've got it set up, I actually have the theme in place, and I want to mention really quickly that for for this class, I'm assuming that you you have worked with themes before and you have some html css knowledge, a type of thing because we're going to be going through and as we make at it, we're going to be doing some different things, like creating or working with plug ins and adding different functionality, but you're going to need to get your hands dirty a little bit, okay? And it's not necessarily php I'm not going to go nuts with that, we're going to a little bit of that, ok, I don't want to freak out, but we're going to a little bit, but we need to know a bit, so what I'm going to do is I'm actually going to have got a little bored over here. I'm going to be showing you some some basics functionality of css and html and, you know, just just kind of give you a primer a little bit as we go, but you can see right here I've got the site ok, and I'm gonna give you a little background here I am working what's called locally which essentially means that I have installed a server on my hard drive here called ma'am and that's on mac and windows you can install zampa or ramp and yes, they make up these crazy name, but this is what's called working locally. You could be working off of your host if you want to and your host is something where you can install wordpress, install a theme and start start going, and I'm going to try and show you how that works, how we work that way, but like I said, I'm working locally, so I have my my dashboard here. Okay, so you're your goal is to get into your dashboard to get into your admin and tow law again, okay, once you log in, you'll see we've got all our content out here and we've got all the different things that we can do, obviously, and what I'm gonna do is I'm going to go over to the themes, so if I go to appearance themes, you'll see the different themes I have installed now there are there's so many things out there it's incredible, kind of sickening, actually, and there are some that are paid some that are free, you have to kind of decide which one you want, how far it goes, etcetera, but I have this creative life theme that I've created and it's got a lot of stuff going on and what I want to do is make some changes okay, so when I want to show you a few things back on the site here I've gone in and added some some colors and some funds and different things like that when I go back over to the ad mean, you're going to see a lot of themes work through what's called the customizer and you guys can see customize right here so if I click on customize this is called a customizer themes have options and this is one of the reasons or one of the ways you're gonna be able to decide what kind of thing you want is it responsive doesn't support certain browsers? What kind of options can I set out of the box without having at it? Ok, if you look over here, you'll see ok, I've got, you know, like that's a header styling I can go in and do things like at a logo I could change my background color, for instance all say, uh let's go with that and what I can then do is kind of kick it in I'll say let's work with this orange, red, whatever I want to do, okay? And I'll say something like saving publish, all right? So what I'm doing is I'm actually going through this theme customization, which we've probably all done before if I go over to my site then and refresh you'll see that we're going to see the up it's coming and that's great all themes have something like this where we can make changes okay now what's interesting about working with themes let me go back over to the admin here I'm gonna close customizer and you could see right here that I can close it after I've kind of done my thing and saved it okay? Some things will actually over here on the left and the men use they will actually have themes settings that you can set over there okay, now these are great but they're only gonna take you so far so suppose that we want to take this further well, some people get industrias karen goal a crazy and they're like ok, I know a little css so maybe I know enough to be dangerous maybe I know a lot, so what I want to do is I want to make it at it you can add it you're different files a lot of different ways you can actually do it live if you want to you can do it in an editor on your hard drive and upload using what's called ftp wordpress has the ability to edit your files right here, so if I come to appearance and click on editor okay you're going to see that the active theme the one that you're working with right now it shows all the files that you have ok at least the ones that it confined in the main folder now when you first do this it's going to show you the style sheet or the style that css file that everything has okay this is the main styling for the theme and it may look different depending on the thing you're working on it it might have a little bit it might have a lot depends on the fryer are right over here you're going to see a lot of the main theme files like functions and hundred footer all your templates and different things like that as soon as I'm talking from personal experience but as soon as I found out about this I said let's jump in okay I said let's dive I'm gonna get in here and I'm going to start hacking and doing okay so I got into the styles and I was like, you know what? I know exactly what I'm doing I'm going to go find something I don't know if you guys look at this and you're like what is that well there's that but if I go in here I'm like hey let's just delete this I don't need that or I'm gonna change color so I go into the css and make a change here's something to think about ok when you do that you're finding these great it probably works assuming it works maybe you go into something like the header if you look on the right over here you'll see like the header the footer if I click on one of these in the right over here it's going to allow me most of the time to be able to edit this, make a change and then down at the bottom down here you're going to see for the styling for any of these files you'll see update file okay, now this is editing an original theme file which is like I said can be a little dangerous here now here here's why it could be dangerous all right, I'm going along I make my change I open up wordpress one day maybe a week later a month later whatever happens to be I go over to my appearance here and I go to my themes and wordpress does a really good job of kind of letting you know what's been updated so it kind of gives you an idea okay it's going to kind of flash numbers at you and say you gotta update this thing if you want if I look at my themes it'll say you need to update your theme maybe I bought it maybe I got it from someone and they are updating this thing okay, so I say cool we're going to get the latest thing maybe you look at it and you're like oh there's a new widget in there a new thing that I want to use so I say let's update so I go in and I do my updating it's gonna wipe everything you did so the css file the header, the footer this different content that you went into the theme files dug in and started edit are going to be replaced, which is pretty bad so there's got to be a way around that right there's gotta be something we can do there's a couple ways you can go in and say forget it I'm never going to update the theme I've actually had that padded clients do that before because I do a lot of different websites or I've created it myself maybe I'm I created this theme and I'm like, I just want to you know, forget it I'm never going updated so I'm just gonna go and dig into the files that's totally cool but you got a problem if you bought a theme or you got a theme that somebody's gonna update so we need to fix that ok? So we need a way around that so what we're going to do is we're gonna work with what's called a child theme now child themes are it's something you learn I guess as you get in toward press nobody really starts with them because you have to you obviously got to take your knox first, right? So what I'm gonna do is I'm going to go over to this you earl and I'm gonna introduce something here that if you haven't seen this before it's extremely important this is called the wordpress kodak's and this is the word price bible this is something you anybody that edits and wordpress that does, you know, creating anything like that they are going to go in and look at this because this is going to give you a lot of not only what is this certain thing give you definitions and you know, kind of help you through but it's also going to go in and say, well, how do you do it? Let me scroll down a little bit this is actually going to lead you through the entire process of how to do this certain thing. Now let me describe what a child demons okay, let me describe it a child demons, a child theme this is kind of interesting, but a child thing kind of kind of sits on top of the parent thing, ok? And what I want to do, I'm going to draw this out real quick we're going to see that let's suppose that we have our theme all right? This is our I'll just call this the parent thing all right that's your original theme this is something you're working with these air the files, et cetera okay, and we decide we want to make changes. What we can do is we can actually create a new theme and this is called our child theme and we use it will name it something like the original parent name child. Okay, the child theme basically sits on top of the parent theme in some ways okay, what we're gonna do is we're going to create this child theme we're actually going to activate it and it's going to do this it's going toe pull in pretty much all of the files from the parent he into the child theme and then we're going to go in and we're going to say something like, ok, but I want you to pull the parent stuff and we're going to use that parent stuff like the styling the head of the foot of the templates, et cetera ok, but maybe in the child here what I want you to do is maybe let's make the color of the text let's make it read instead, if you do something in the child like this and there's already maybe a style in the parent it's going to override the parent, ok? So it's kind of sitting on top of the parent all right now there's different relationships that happened and we're going to get kind of describe this as we go, but this is what's called a child and it's really important to tell if he was much simpler than the parents. What we do not do is we don't just take the parent and copy it and call it the child we just all we're really doing is we're having a couple little files in a child and then we're putting what needs to change in here and it's just going to grab the parent stuff, okay that's the idea now the links that I'm showing you right here there is the a pdf of those links that you can get so we can we can look at those I would seriously take a look at this codex page because it's it's very important it's something that you need to look at and it's also going to talk about why you use a child team check this out it says right here and we're oppressive fume update update existing theme and it's updated everything's lost okay, so you will probably learn that the hard way mary fac I did that and of client project and I I almost lost the project because they were so upset I did all this work for like weeks and when I first started with wordpress and anyway we're not going to go there because I'll start to cry but there you go so ok, so that's a childhood? So here's, what we need to do, we need to set up a child team. So what I'm going to do? Because I'm going to go out to my desktop for a second here, and I'm just going to dive into the folders a little bit and let's, just talk about what a theme is on a lot of you know this, but let's, just take a look. Um ah, theme folder like creative life, you're all your themes are going to sit in the themes folder, okay, if I go in here going to see the twenty fourteen to twenty thirteen, all the ones that are typically default with the word press install and we'll see my creative life team now in there, we're going to see a lot of our files. Everything, for the most part has what's called a style that css, this is the the main css file that pretty much runs the styling for the entire site, okay? And this is something that you're going to be very curious, very, you know, very year to go in and change once again, we're not going to do that, you'll also see something called the functions dot php file, if you don't already know what this is or you haven't used this, this is something that kind of adds extra functionality or does stuff like let's link our scripts let's link our ceo says let's create sidebars lets you know add menus all these different things that you're going to add to your to your theme itself you're going put typically in the functions file that's what a lot of things actually have so for us to to go in and start to edit we're going to create this child game now we can do it ourselves if we want to you could do all this by hand a smear of fact I have in this folder that you you guys actually have a cz well this's thie you dance folder here you're going to see we have a folder called child thing within and I have some of the the required features that we need a child thing requires a folder ok that's that's the first thing that requires an actual requires a folder within the themes folder and we will typically name it something like if you guys take a look here, let me open this up it'll be something like creative live hyphen child so if I go in here and create a new folder now you guys I am working locally what you were going to be wanting, what you guys gonna wind up doing is you're actually going to wind up working off of ftp ok most likely which means you're probably working off a host like go daddy won in one blue host et cetera so you're gonna have to get into the files up in a server to be able to do something like this okay, now I'm describing what we're building here but I'm actually going to lead you down the path of creating this via a plug in it's gonna make it much easier for you ok? So typically if I'm going to create this by myself I am going to create a sub folder called creative live hyphen child or whatever your theme name is hyphen child within that folder we really need technically in the past we've needed just one file we needed a style that css file so we needed a a style sheet for the child being ok going forward we're also going to really have I think all the functions file so the child is gonna have a style sheet and a functions file typically so that means that if if you once again if you want to do this by yourself and eventually you will you're going to be creating two little text files within that child team called the css filing a functions file okay, well here's what I'm going to I'm not going to make you do that because we're kind of getting started with this and this is the fdp and all these things involved people have plug ins to do this stuff for us, okay? So just to make it easier for us all right? So what I'm gonna do is I'm gonna get rid of that folder and I'm gonna go back over to the browser and go back to my admin area if we want to create ourselves a child team, what we can do is we can use a plug in so if you look on the left over here, you're going to see we have our plug ins I'm going to click on that it's going to go in and take us to all of the installed plug ins the's air the plug ins that we have already and if you're familiar with plug ins plug ins ad the addict extra functionality so it's it's sometimes for one we're getting started with wordpress it's it's the cool stuff we can't do yet okay it's it's a slide show it zio it's video it's all these different things if you look in here you're going to see we have some by default we have a kid's mitt which is for comments for spam, et cetera and different things like that there's actually a lot of a lot of things it does we have hello dolly which it's kind of funny almost my developer friends are like just nuke that dump it but when you go through a team if it's actually active it gives you inspiring messages at the top of the the admin. So you can do what you want. Um, I got already got some teams installed here. Okay, which is fine, that's. Good. So what I'm gonna do is I'm gonna come up here. I want to add a new one. So we're going to go up here to add new if you look right there you go. There's a couple ways you can install plug ins, you can go in to add new. And what that does is it lets you search the plug in directory it's called on wordpress dot com. Ok, sorry, we're press that order and it's gonna lie to go in and kind of download those from there or to put them up on your server host with air wherever you are. So I'm gonna click add new. And what it's going to do is it's going to go up to the directory of plug ins and just show me a bunch of now, if you've worked with plug ins in the past, this is not going to be a surprise. You're going to see a lot of these and there's a lot of great stuff. Word price is super powerful, as I'm sure a lot of, you know, there's tons of stuff we can do and we can just we can take it further there's so many things we can do with it if you look up here you'll see we have featured popular and favorites and this is something that you can go explore later on one of the things that I tend to do is when people start with wordpress I kind of kind of lead him up here and I say that there are certain plug ins that a lot of us will use all the time okay? And I actually mentioned that in the one day intro class that we had so if I click on popular you're going to notice that it's going to show you a lot of the really, really popular than one some of the most downloaded plug ins that are up there and some of these were actually going we're going to do we're going to work with ok over the course here so you're going to see we have contact forms we had wordpress ceo yost we've got a lot of different stuff what I want to do is I don't see what I'm looking for someone to search for one okay, so if you look on the right over here, you're going to see it's called search plug ins now we don't have to do this through this admin area you could do it through the actual plug in sight, but I'm gonna search for child theme okay, then hit return or answer whatever you guys want to do and it should filter it should sort automatically, but you're going to see the different plug ins that are related to child thiss sixty really important when you work with plug ins if you're looking for some kind of functionality and you don't know how to do it and you maybe want to think ok, a plug in could do it for me then you kind of need to know key words it's very similar to teo going on, you know, googling if you will so got to figure out the keywords child theme is a big one now this is something else that I I'm not going to let this slide okay? I got got a deal this out, but when you work with plug ins, I know a lot of you already know this probably, but you have to be careful because just because you see a plug in is up here and it's in the directory and you know it's been created doesn't mean that you should install it and work with it. Here's what I'm talking about, I really love the fact that when you work with wordpress and you work through here it's actually telling you when the plug in was last updated and telling you if it's compatible with your version of wordpress, this is huge because if you pick a plug in it, that says something like right here look untested with your version of wordpress if you put that up there, if you install that and work with it, we don't know if it's gonna work, okay? It could actually conflict, there could be some it could just not work, it could actually break some things we don't know, but this is why we have to go up in kind of test. So you're going to see right up here that the one we're going to work with this called child theme configuration there's there's several we can use, and just because I'm telling you to use this one doesn't mean you can't pick your own that you'd like, maybe you find one later on, okay, you'll see another thing I look for how many downloads to there are there? If you see that there's a plug in that has three downloads versus a plug in, it has one hundred thousand downloads kind of makes sense that you're going to maybe gravitated towards the one that you know, people are downloading a lot. You're also going to look at reviews, you guys, you've got to look at the reviews on these things and just see, hey, you know, maybe you're picking ah theme that a lot of people use okay there's a lot of things out there we can use and if you look at the actual comments here we can go into more details if I click on more details and you'll see that we have the reviews right over here so see reviews right there if you start searching through these reviews and you start seeing things like oh, but it doesn't work with this theme then look out for it okay that's the kind of stuff we got it we got to pay attention to um you're also going to see that you know, you've got to tell what it's compatible with, like I said, if it's not been tested, if it hasn't been uploaded or or updated rather very often you gotta watch that, okay, so this is what we're going to use, so what I'm going to do is I'm gonna install it I could install from there, but I'm going to come right here and you're going to see install now, so click on that obviously you're going to be working usually across the way here because you're on your host ok? And you're in your admonition your host I'm gonna say are you sure? Click ok what is going to do? Is it's going to do exactly what it says here it's going to go through and downloaded it's going to install it it's going to unzip it and at this point, we can activate it if we want to. Okay, so what I'm gonna do is I'm going to activate the plugging I'm gonna tell you right now that with plug ins, you really have to be careful if you if you find one that is, you know, kind of obscure, unnamed source, you're not really sure about it, and you go on, activate it, crazy stuff can happen, okay, so you always have to be careful, and this is something you learn as you start to edit, that you can deactivate the's if something goes haywire crazy, so you'll see right here that it is now active child theme configuration er, we could deactivate it, you'll see right here is going to tell you what it does, and you you'll notice that with plug ins, this is something it kind of drives me nuts. You're going to see something called edit. You gotta be careful of that because that's actually going to go into the files for the plug in and let you go in and start hacking, adam, we're playing not going to do that, okay? When we install a plug in, we're going to go to this settings for the play, and if I look on the left over here, this is something that you know I wish would would would be a little bit more conformed or standardized but you're going to see over here that we have to find where the settings are so some of the plug ins are going to put the settings under oddly enough settings okay it's a good place to look if you want to edit it but this one put it under tools so you've got to kind of look around a little bit and see where it is sometimes what they'll do is they'll actually have a nice little link on the plug in it says settings and I don't like that'll take you right there okay? So I'm going over to tools and click on child teams now because we have an active that's awesome but we need to we need to have a do its thing ok a lot of plug ins you're going to work with their active and a lot of plug ins you require you to do something with them that just because they're active doesn't mean they're going to do it okay but there are on the other hand there are plug ins that once you activate there are immediately doing something so this when we have to configure so we go into the settings here you're going to see that ok, we've got some questions to answer now this is the reason why I kind of like this plug it in some ways is because it does some of it for you if you look under here at parent theme you're going to see that it says oh and this is perfect for me I'm very visual give me a thumbnail of what the actual no theme looks like she could say ok what is what's called the parent theme it's going to immediately look at the one that's active and say that okay that's the parent that someone we're going to kind of build off okay remember the child theme it's going to take the name if you take a look here it's going to take the name of the parent and put a hyphen child kind of like I showed you a little bit earlier and it's going to say what you want to call this thing you get you can edit this if you want tio ok and you could say who is the author? He wants you to put your own name in here that way people can think you're a superstar and you made it yourself you could say version if you want this is version one two cetera we can also know that this plug in takes it much further this plug in will do a lot more than just create the folder I was talking about the child folder the css file in the functions file okay this you know like you guys to go in and do things like I want to copy all the menus, widgets and everything else I get down here now it's really important you're going to see right down here that we have link import and none now when we first started doing child team's way back when we actually used what's called in at import directive we had to pull in the parent css otherwise it wouldn't even use that styling ok? So we kind of had to do that this I'm just going to tell you right now this thing called at import is old we don't really do that anymore so we're not going to use that ok? So if you ever see something like that we're not going to use it were used a gun to use what's called like a link which makes sense it's default there this is a little bit newer one and you're actually going to see over here it's a select this at import thing for an older theme like I said going forward things have changed and word press a little bit so we just we're not going to use this at import thing don't even worry about it we don't need to go into it you're going to see right here none if you guys want to dive into the code do all this yourself choose none but I'm assuming because we're using a plug in that we probably want to have it do some of it so so we're going to just keep it as is, I'm going to say let's, generate it and let's take a look and see what it did so generate. Now it's cool about this, is it it? Immunity? Does it ok? And then you're thinking, ok, well, what did it just d'oh, let's, go take a look. So what I'm gonna do is I'm going to go out to my desktop now, like I said before, you are probably working off of go, daddy one and one right off of your host that's for most of us are going to do this, not locally. So what you're going to probably want to do is you're going to probably want to go. Look, if you want to see where it is, you can either use something like an ftp control or an ftp program. Okay to go take a look at your server to see what files are up there. You guys can also go like and go, daddy, you're bloo host you can look at your admin and go take a look and see what the files look like, ok, you can do this if you want to. You don't have to. But if you look up, you're going to see like there is this is actually a live site this is a live site that I have and it's different from the one I'm working on but you can see right there I could see all the different themes and the themes folder and there is a creative live child okay, so that's what it did let me go back to my desktop here and you could see that it just created this folder ok called creative life child and it put a style file in their style that css it also put a screen shot in there and you guys what's going to happen is when you go to pick a theme you might want to change this out because it's just going to say creative life thing it's going to pick the one from the parent you could pit and you put a new one and in there if you want to just look at the size of it you guys going to see the dimensions here eighty by six sixty and it's a j peg if you make a picture that size j peg and put it in this folder up on your server usually ok, it will replace it when you go to look at and I'll show you what I'm talking about in a second here and it also created what's called a functions dot ph the file and it puts something in there which is pretty awesome okay I'm going to kind of describe that in a second here let me take a look at the style file really quick this is the style sheet you guys were going to edit this through the admin you're not going to have to dive dive in I'm just trying to show you guys what it created ok so I'm gonna open this up and just take a look this is what a child style sheet looks like so it's actually going in and saying what's the theme that what you want to call it awesome that simple I could be called you know joe doesn't really matter the big thing that has to happen in here is called the template right here this is what the name of the parent theme is and this is super important now if you notice here it says creative live the template is the parent it's his creative live you notice how it's all lower case and kind of squished together in the actual theme I called it uppercase creative space live just to make it look good this is the name of the folder that the parent is in so if I go look at my files real quick just to show you guys you're just gonna look at the folder name right there and that's what's going to show up in the style sheet for the child ok that's how it knows that that's where it starts to get all this stuff from its it's amazing but that's it that's all it takes now knows to grab the parent stuff pull it in start working with it okay this is the css file we don't need to touch it right now and that's that's great it's only close it up I go back to the child we're going to see what's called this functions file like I said before the functions is a php file that we add extra things too we had sidebars we add this is where we were like we link style sheets we do things like link scripts different things like that I'm gonna open this up open up functions and you're going to see that you don't need to look at this up on the host of just showing you once again you're going to see that the plug in actually stuck all this stuff in there okay I just want to take a quick look at what it's doing here why is it doing this now if you don't know php and you're not comfortable with it don't worry it's ok? We're not like you said we're not editing this right now you guys are going I just want to mention this right here this thing called thank you okay when we have pages ok, we've got a theme and we want to take a style sheet like a css file or maybe want to take a job script file like a dot j s file on we want a link it to the theme link it to the pages were working on what we do is in the functions in this in this file here that everything has well actually put in this thing called in q this tells wordpress to go find this file this jobs could file the css file which is in my directory that's what this thing that you're saying and I want you to link it to the page ok please what is doing this is essentially what it's saying we don't have to worry about this you guys don't have to edit it already did it okay so what I'm gonna do now is I'm gonna go back over I just wanted to give you a heads up I'm gonna go back over to my ad man and you're going to see that it's got a lot of stuff going on here and what we can do is we can also with this plug in there's a lot of extra things you can do all right not typically when we work with a child and we make it ourselves we're not going to do all this stuff ourselves but if you look in here you can actually see what the child css looks like ok, you can also see that it looks it's looking at the parents see assess now, it's looking when it's, his parents, he assess it's looking at all of the css from the parent theme and just kind of smashing it together right here and show you all of it right there, okay, so it's kind of kind of tell you what it is it's also allowing you guys to do things like this if you want to take a file like, ah, footer, headers, something like that and copied into your child team and do something to it this plug in once you do that, which is awesome, we're going to look at this in a little while, but for right now we've got our child being created this that's all we had to do just basically given a name tell acclimated created were done the last step here. Once we create the child team is to come back to our themes and activate the child, you got to tell it, we're going to use the child now, okay? This is where it's, a little confusing member I said that thumbnail how it just pulls from the copies of parent one you're going to look and say, wait a minute now, there's two themes that look alike, but if you look at the bottom, you're going to see this one, says child okay, so what we need to do is we need to activate that one. Is this kind of wacky? I believe me I started doing this and I was like, wow, this is a little crazy but like I said before parents where we start child is the one that's we're going to activate and it's just taken all the stuff from the parent pulling it out ok, so I'm going to come in here to the child and activate just click on activate now it's going to do its thing and say all right that one is now active that's great if I go take a look I want to show you guys this now look at my site. Okay, look at my site right now you guys you see it's awesome poor if icc puke brown banner up here you're going to see the colors you guys going to see the widgets on the side? All this stuff watch what happens whenever fresh after making the child the theme check this out, okay? Because I don't think they see that things change. This is kind of weird. All right? This is a lesson this's a life lesson if you will and this is something you have to do if you decide you are going to edit the theme that you buy or you get you want to create the child thing right away okay, so install the parent thing, get it in there, create the child theme, activate the child's name, and then start making changes. Okay, if you actually go in and you start to make changes right away with the parent theme out there, some of them are gonna be dropped because this child theme is a different theme. All right, so, francis, things like widgets and stuff like that. Anything you guys doing customizer, for the most part, over here, under appearance, that stuff is going to get dropped. So we need to make sure we make the child team first.