Lessons

Lesson Info

Intro: Editing Your Theme

So if I go back in to customize here now this is with the child team ready to go and up there I could just make a few quick changes to make it look a little bit pretty or maybe do something a little different and I'm gonna kind of hack this up you this's not gonna look good so I'm going to kind of make a few changes to my thing saving publish and it's gonna want me to kind of change what I had and there we go okay so making a few changes we could do that now what it's doing here is it's doing it for the child thing now ok so if I go back I'm outta customizer here let me close this up like I said anything we do from here on out is actually going to affect the child team now I want to show you something really quick I'm going to go to the site itself because you go to your you earl go take a look at it and I want to go take a look at the coach just for a second because I want to point something out here I'm going to right click on the page and you guys are going to see what's called view...

page source you could do this pretty easily in just about any browser and what this is going to do is going to show us all of our content you guys should see that it is actually loading your parents styling so it's in there it's doing the thing now I've got an issue now it should be loading your child css as well but because I'm working locally it's not going to do that for me okay so what I need to do right now because I have a permission thing going on I'm going to add a little bit of code to my site to get it to work okay, so here's what I'm gonna do I'm gonna show you guys something go back to the admin I'm gonna go to appearance here and you guys going to sea headed there on the left hand side because their child he was active if I goto edit they're going to click on editor you're going to see that it now shows all the files for the child thing okay, you're also going to see that we have the style shoot here now that we could go in and start editing and it would basically trump or beat the parents dialing okay if you name it the same thing I look over on the right here going to be what's called theme functions I'm going to click on that this is that functions file this is why I was saying you don't have to go into that folder on your server and look at it because the files are right here in your admin you can see them right here we're going to see that it put a bunch of stuff in here it's actually doing what's called in cueing the styling which means load the parents styling which is awesome and it should load the child styles as well what I need to do let me just give me one second here I actually have a file because I'm working locally you guys will most likely not have to do this in the advanced told her I've got a folder called child theme and you guys going to see what's called load parents styles now I'm gonna open this up and I'm gonna copy a little bit of code to get my child team toe load in you're not gonna have to do this most likely ok so I'm going to click open and you guys going to get a bunch of stuff in here what I'm gonna do is I'm just going to copy it and as we work through today I'm gonna be doing this a lot I'm gonna be saying here's some code you can grab a copy and we're going to be pasting some of it into our editor all right so it's it's not gonna be that painful is first like php you know let stuff so I'm going to just copy this and I'm gonna go to mine and you guys going to see now you've got to be really careful if you're editing this stuff I'm gonna paste in here and I like it said you're probably not going to do this so I'm just doing it for myself and I'm going to go in and change in number here you guys going to see that what I've got in here was what's called thank you once again I'm basically loading these style sheets ok and that's what that plug ended its loading the style sheets so that the styles are ready to go and all set ok if you guys find that your styles are not working your child styles are not working you could do something like this to you can go into functions and just paste that stuff that we had that I showed you in that little text file that php file and you should be good to go ok you'll notice over here that I changed this number right here this is giving a kind of ah load order if you will okay this is telling it uh how how far how high up and header it should voted if you have a really low number like they're sorry really high number like this it's going to load it later so it's going to put it later the child stiles need to be loaded after the parents styles ok parents I was going to be loaded first then the children styles going get loaded simply because the children styles can override the parent styles then okay all right so what I'm going to do ok yeah and those those let me mention this real quick I'm gonna upload her update rather the files that I showed you are in the lesson files that you can download okay and those they're going to be in there and you can easily grab them if you need to okay so I just updated what I'm gonna do is go back to my site and refresh and I'm going to take a look at my code real quick and I'm going to see that I've actually loaded my child styles and there they are right there so I have now my parents tiles loaded and I could see that there is the parent styles and I also have my children styles loaded my child styles okay so we're all good to go we have everything set up a ce faras the children are concerned all right now our job is to start editing and that's going to be the fun part all right uh so what I want to do is I want to talk to you about going in and making at its and some of the things that we need to look for it's making changes so I'm going to switch over to a pdf file that I have and show you this when you decide to edit the theme there are some things you need to think about these air some tips that okay that I kind of overtime I've put together you don't want to edit the original theme files we've already talked about that now I put on the end there if you can help it and that's true sometimes you just can't help it you need to back up your side files that literally means that we're going to pick a plug in it is what's called a backup plug in and back up those files or you can go up there to the files themselves and in the directory and copy them okay copy the theme so you don't mess it up you gotta you gotta back up somehow at some point this is kind of interesting but if we want to replace the file we're going to see this in the second part but if we want to replace a file like we wantto maybe do something to the header of the page we're actually going to copy the header from the parent theme into the child we'll go over this later don't worry we're gonna pot copy from the parent into the child a file and the child is basically going to replace the parent so sometimes there's a kind of interesting things that happened we'll talk about it don't worry I also honestly you're not gonna have to do this but I just I'm paranoid and I will turn a lot of times make a list of files that I've customised if you later on, they need to go back in. Now. This is if I had to go into the theme or do something that there wasn't working, etcetera. Okay, um, the parents functions are loaded. This is actually really interesting, too. When you work with the child that functions dot php file I was talking about that adds a lot of extra stuff. The parent is loaded first, and then the child functions is loaded, and they basically parents loaded. First child, the child adds to the functions from the parents. So they kind of all mushed together and become one set of functions and stuff that you could do. Okay, that's, the idea. We can also add a new file to the child theme. If you want to, like, maybe one and make a new template, like a new side bar or something like that, we can easily do that. And we'll take a look at some of that. What to edit? This is this is key. Okay, this is actually really crucial, because when we go in and we start to edit, this is sort of a hierarchy of editing. Okay, that I see. Ok? And I found this and other sites, too, if there's a theme option whips if there's a theme option use it ok in most cases use it because that way you don't have to go in and start hacking away at the code if the customizer is there or the theme has options ahead of him you see assessed immunity would manipulate the design ok, we can do that we're going to that in just a second here I'm going to take you through that we're going to use styling for the child which is going to override the parent ok, so that's the idea if you want to make structural changes we want to add like another sidebar another menu or something like that which we're going to do in just a few minutes here we're going to use that a new template file for the child okay or something else ok? We're also going to use a plug in a plug in is most of us were most of us start gave you wanna add functionality I wanted I wanted it to cia says I want to do this everybody goes to plug ins I did it to ok makes sense I get it and a lot of the functional is awesome but at some point you're going to wantto back away from that maybe try that as a last resort or at least not as your first resort okay, so these are just some things to think about I thought I'd throw out there, let me get rid of that all right, let me go back over to the site, and what we're going to do is I'm going to go out to the actual page itself, and you're going to see the site and what I want to. I want to show you how to make changes, how to actually go in and do things like everybody wants to do, they want toe change the heading color, they want to go and change the banner, they want to change the font, etcetera. How do we do that? Ok, one of the things that people will do is start to wade through the css, and if you're comfortable with that have added, okay, that's fine, but we actually use what are called developer tools to get this done. A lot of times developer tools are are super important, and they give us flexibility and functionality that you can't find anywhere else. Ok, if you're in a browser, you can do this in chrome, firefox, safari, internet explorer, they all have these tools built down, which is awesome what you're going to do and there's a couple ways to do this. First of all, if you can, sum browsers will let you do this if I'm likes to say, I'm looking at like, I don't know, I'm looking at the color for this heading right here. If I go over and hover over that if I right click on it in some browsers you're going to see something called inspect element now that's part of these developer tools this is awesome because it says let's go look at that thing is going to show you all the styling apply do it which is really cool so I could just do that if you don't see inspect element I'll show you how to do this most browsers when you go to the page if you go to some settings you gotta find like the tools or the settings the menu basically for the browser okay, you're going to find something like if you look in here developer tools, a lot of browsers that the actual the f twelve key is the shortcut to get the developer tools not all browsers obviously if you look at krome here it's not, but if I click on that it's going to take me in and let me start using it, ok, so you've got to find these developer tools in the browser do a quick search if you can't find him in google or something like that developer tools, internet explorer or something like that so all I'm going to do keep it simple I'm going to right click out here and say let's inspect the element someone say inspect ok, check this out this is you if you're if you're any kind of geek like I am, this is what this is like having this is like your home right here, okay? This is in my wheelhouse because I love editing. I love the code. I love all this kind of stuff, but if it's not, then you got to kind of take come tiptoe through this, but you're going to see it's going to show you a lot of times in some place is going to show you the html and then usually in another place, another part of this blocks it's going to show you the css applied? Ok, hopefully you haven't understanding what's the excesses and you've done a little bit of it, and it kind of makes sense, it's something that you need to tread lightly. I'm just going to say that right now, but you'll see that it automatically highlighted this h to tag in this column, too. Now what I tend to do is when I'm looking at something, I kind of tend to look at the styles over here on the right or wherever it happens to be and your developer tools, and you're going to see that there's a scroll bar usually. Okay, so I'm going to scroll down a little bit here and sometimes it's going to beat you up a little bit here because there are six billion styles applied the one thing out there, and you're looking at this and if you don't know css, you like, why? Ok, why are you doing this to me? You know what I mean? My my thing about styling is that it does something called cascade, and what we do is we create styles that are very generic, and then we create styles that are more specific for things, ok, so a lot of times, let me show you something over here a lot of times when I'm working with styling kind of pull this out, I'm gonna flip this over just so we have some more writing space when we have our css and we're working understanding we'll do something like this will actually say, ok, okay, body, the body is a whole page. This is a steel siesta style. This is actually called a selector. I know a lot of you know this, probably, but I'm just trying to throw it out there, so we're saying, ok, body, what I want you to do is do something in here, let's, make the let's make this is so dumb but I'm going to say let's make the color red and we'll never right out in the name of a color like that but someone say let's say the color red okay, what we're saying is for the entire body which is the entire page make all the text red that's what that command says right there that style but then I can look at my page and say, well I don't want my headings through red I wanted to be orange you're green or blue so we go in and say you know what? But let's do this I want my and if I look you guys at the h html here like a look at the h e mail it says that this is what's called an h to tag ok, so say but if I want my heading twos tow actually have and that's actually a bracket screwed it up you're going to see a color of and we'll never write out colors like this I apologize okay color of green what's going to happen here is this can override is going to say I very generic, more specific right that's why we tend to have a whole bunch of style system here and that's not the on ly reason but that's one of the reasons why we also might have different style sheets or different places that the styling is coming from so you'll see a lot of those in there too what I suggest you do is if you're going to go start to edit and take a look at things first thing you want to do is that usually in most developer tools and this is not always the case and it drives me crazy but usually the top style you see is the last one applied that's the one that wins okay that's like the winner you will sometimes see these little like slashes through ok now what's cool about that I actually love this visual is it's basically saying that that property that thing like the font size has been overridden by something else that's what that slashes saying ok and usually what I do is I'm looking at font size here and I'm like, ok there's fifty font size thirty two's whatever I mean ignore that that's because we're working with what are called media queries don't worry about that scroll down a little bit you're going to see oh well there's a lot of font sizes that have been slashed out eventually my point is here I'm not going to school for days but you're eventually going to find a font size it is not slashed out and that's the one that's winning okay that someone is actually affecting it in this case I want to keep it simple all I want to do is change the color ok, so if I go over here to the css styles in the right and I do a little scrolling suddenly I'm gonna come somewhere and c o color blue ok, so that's gotta be where it's coming from right now what? I tend to dio scroll over low here I say oh it's coming from style css and if I hover over this is saying oh it's coming from my parent style creative live that's the folder ok, now, if I want to this is what I love about a developer tools to just to test it and see if it's working you can actually come in here and change the color I'll go with my my favorite sale red. Okay, you know it's horrible I know I can go with you know e zero zero zero zero this is accessible color and we could write colors different ways. But if I type something in and look, can you feel the power like that's right there the css working and doing its thing. So now I know that's where the colors coming from ok, so here's, what we can do now, you guys, this is actually this freak me out when I first started doing it, but if you edit the color on this, if you added this color it's not changing the files on the site right this is just temporary ok, this is for you to look at so so here's what we can do this is one way you could do this we need to make a style called something like this right there and we need to put in a color okay, so we need to replace it in the child so here's what I tend to do if I click on the link over here it's actually going to go in and highlight that style in there for me in the style sheet and say look there it is right there so what we can now you guys even know css you have to do this okay? You know it very well but for those of us maybe they're starting here. What we can do now is you can go and take this and copy it we're going to pace that nor child put a different color and see the change so I'm gonna copy this okay? I'm gonna go back over to my themes here and now I mean my my child theme I can tell because I can see right up here it says creative life child I'm going to go to this style sheet and click on the style she sorry to bouts around so much and you guys going to see that this whole blank area out here is yours to play with ok, so here's what we're going to do, I'm going to go right in here, right click and paste and there's the style now what I can do is make a change so for instance, I want to go in and maybe make them black, so I'll put in zero zero zero museum in a little bit so you can see this so we can put in zero zero zero that's shorthand we can also use rgb rgb a depending on what we're trying to write and I'm gonna go in and save that if I look down here towards the bottom, you're going to see update file click on that now I go back over to my page here's what I'm gonna do I'm just gonna close the developer tools and I'm gonna refresh and you guys going to see what it does it's working pretty cool this this should give you a little confidence to like go in and say I need to make a change so I'm gonna go find when a pinpoint where it is figure out what style it is copy that pasted and make my change so the things you have to watch out for here though you're going in you're like I did it awesome you can go to a celebratory dance if you want whatever but this style that we just copy let me go back over to admin the style that we just pasted copy and pasted in here you're going to see that it actually has aged four h five and h three, which are different headings we on ly wanted to maybe change age too. So this is where knowing css is going to help you. Okay, at this point, if you look at the page anything that's got an h three tagging each for tiger and each fire tag is also going to be black. So in this case, we may modify this so I might go in and say, you know what? I really just want h two now let me describe what they're doing here, you guys to see this h two and then a comma and then a period h two is kind of weird, okay, so this right here most of the time you guys were going to see, you're going to see this it's going to say go find the age to tag made color black, ok, in this case, we have this, though this theme actually has a class called age two, and sometimes they go apply it somewhere where it's an h two for some reason, so we're going to keep that, so I'm going to see just each to color black god, I've got to remember you guys to update the files got remember to save it I'm gonna go back out and refresh you guys going to see what it does now it's only the h two's so this is super important it's something that we are going to do a lot you're going to find a times that it will not work okay, I'm gonna tell you that right now you're going to say child awesome made the change not working one of the reasons why let me show you I'm going to go back to the code for the page and this is just to save you from ripping your hair out okay, I'm gonna go back for the pacific over the page you're going to see that I have my child styles right there that's a link to that little text file that's got those styles in it that we just added it ok? The ordering here matters completely matters because if I look right up here, I'm going to see I actually have the parents styles right? Their parents tiles need to be loaded first, ok? Because that way, if we have the child style second, they're going to override. But look down here on the in the actually code you guys were actually to see maur styles down here below the child, right? You're also going to see in some cases not in this case but we may actually have another css file below our child a plugging khun do that a plug into you install can actually load the styling like at the very end, right before puts the page out there and that can override your styling even if you do it in the child. So this is where you start pulling your hair out. You're like what? No, ideo so you got to get creative, ok? And there are other ways to get around this. But most of the time you guys with and we're going to kind of talk about that a little bit with plug ins specifically. But most of the time, when you deal with just editing the theme stiles, this is how we do it that's, how we go about it. Okay. All right. Let me go back over the themes here and take a look at the style sheet. Let me show you a couple of the things that I think a really helpful, really useful that I love a lot. I'm gonna go back over to the page and let's suppose that you, you know you're working out here and colors are great, you can add it colors, you can add it things like the navigation colors we could go into the banner and trying to edit that we can edit the text, color different things like that suppose that we decided we want to change the color or the columns rather you want to get serious? I mean, I'm talking like a serious change to your theme this is where it can get a little crazy. All right? I'm just going to tell you that right now if I go out here and take a look, what I'm going to do is I'm going to come out to one of the columns and I'm gonna right click again okay? Now, once again I'm going to try to go to inspect element if you have those developer tools still open, which you probably will that's good, you don't have to do this necessarily I'm going to click inspect element it's going to go into my eight my code here and it's going to select it now if you still have the the developer tools open, you're actually going to see there's a little eyeglass somewhere in your developer tools they're going on like this identical you can click on this little eyeglass and go around the page and inspect things and as you hover over it's going to show you when you click that's what you're going to look at, we're going to see the styling for what I want to do is I want to click, click on the column, the whole box and if you know how html is built a lot of times what we tend to do is we tend to use things like dibs, dave's heir kind of like boxes a d I v o k we also use what it called html five elements we use things like, ah, header, ah, footer and aside, things like that, these these are elements that we used to be kind of like the building blocks of our pages, these air html, and then we create styling to edit them if I if I come out here and I start hovering a little bit and I see all wait a minute, there's, the actual div that it's in the box it's in, I can click, and if you take a look at my code down here is going to say, ok, there's, the actual did that it's in and you're going to see it's going to show you all this stuff inside it's going to show you the css or the classes here that are applied a lot of times, you guys, I'm not going to get crazy with this. We're not going to go in and actually edit the columns. I just want to point this out. A lot of times when you go to edit things, you're going to look at the styling and you're going to say something like, ok, I clicked on that like we did before I'm going to take a look over here on the left and I'm going to see something like oh, check this out by zoom in with the forty eight point seven there's a style right there that's giving some kind of wit so when I look at that I'm like ok, well that's got to be the width of a column right? So I could go in there and start messing I could say you know what let's do this let me try like thirty two percent and I've gotta remember to put the percent in there and lo and behold there's the change ok like I said, we're going to pinpoint a style we're going to find out where it is I'm going to come into this styling itself and click on the style sheet to open it up or just copy it right from here put it in my child css and make a change this is a little bit harder to guys okay? And you got to be careful unless you know what's going on the reason why I'm saying this is because if you just make that change right now it's going affect every first of all it's going to take every single page in your sight that's something to think about second of all there's a lot of math and here you guys when we do all this stuff especially columns and we work on him I have a a fire ah website here I want to show you, which is also part of the the styling that I showed you the lengths that I showed you rather called a responsive brit system I just want to mention this, then we're going to move on. But when you deal with child themes, you deal with making changes. Most web pages these days are built on a grid. I'm talking css that's styling itself uses styles to tell you how big the columns are going to be and they're already set in stone we just apply them, tore our content or boxes and are objects. Okay, watch it out and let me at least go down here forget all this stuff don't worry about it. Look down here. This is what's called a grid. First time I looked at this, I was like, really? We have to design on this? Are you kidding me? Like, why do we the reason why we design on this for several fold? Because we don't have to then do math later on it's already done. Ok, if you look it and you guys, this style names are like one hyphen off hyphen three you're going to see that style in your code a lot of themes will do things like this so it's saying make it this wide okay so if you really want to dig into editing the numbers of columns and the actual layout it's trickier than you think ok so just be patient go look at the great go look at the styles that's my suggestion to you go to the css file itself and take a look and start to make changes okay anyway this is the process we're going take and working with child teams this is something you're going to be doing quite a bit I guarantee it okay now the next thing I want to do here is talk about adding or working with a custom and you were going to kind of take this a little further and start to doom or editing different things we have ok um one thing that I do want to mention real quick though that I just kind of remembered was as we work with the columns for instance ok these things that I'm talking about it I'm hyping up but I'm telling you be careful and all this kind of stuff so I probably should continue here but when you when you set the width on a column for the grid now I'm back on the web future that shows our grid okay, this is actually where I got it from for the theme pretty simple but you said a column you're like oh I'm gonna go from from forty five percent to thirty percent cause it looks awesome the distance between those objects or the columns is set in stone it's a percentage you got to change that too, okay, you have to because just changing the width of the object like you see here these little gray box is just changing those is not going cut it as a matter of fact, I'm not a big math thing, okay, but you're going to see that they actually have let me go in here they actually have make your own let me school down you can tell it I wanna have now you guys I actually built hours our theme on a six column great to keep it really simple so it doesn't go crazy you can choose the margin here, okay? And what they do is they actually give you all the styling I would suggest doing something like this going in and saying, you know what? I want a margin and this is percent you guys all these things are percentage so it's gonna be a little hard kind of visualize, you know, I mean but I'll say let's make it like two percent of six column grid I'm going to click calculate check this is so cool yeah, I love this this site but what it does it shows you the distance between each and the column with and it gives you the css right down here so if you want to, you could copy paste that now be careful this style names here are called spans six of six in some wacky thing like that in our theme you gotta look at the theme and see what they called the styles ok, so if I copied this in this child let me just quickly go back over there I'm gonna look at the theme file itself whoops sorry back to hear you're going to see that all of these air called like t one of two d three of six to see the style names there you have to make in the same. Okay, so what you're going to do is you're going to go look at the css file. I know I'm kind of bounce italy here I'm sorry we're going to go look at the css file. It shows me all of look this tee off t of t and now what do you think? T stands for tablet. Okay, so different sizes devices we have different sizing. Okay? We're going to be concerned typically with desktop look at this right here. D d four of sixty three of sixty two of six we're just going to take what they give us. I know I'm getting a little deep here, but what what they give us and we're going to change instead of spans six of six it's going to be called d all instead of span five of six it's going to be called d five of six, because our theme says, if you look here, d five of six, look at that. But I wanted to show you that we can do it. We can go in and added a lot and make a lot of different changes, okay?