Lessons

Lesson Info

Customize: Editing Theme Files

Next thing we're going to take a look at is editing one of the pages and we kind of already talked a little bit about that but anything one of the theme files and what that entails in the last session I went through and showed you how to add a I believe we added a custom menu to the footer and I told you that the did in order to edit the footer for the child we had to copy the parent one and bring it over just like we did for the template we just did I just want to talk a little bit more about that quickly and just discuss that further because it's really super important okay if I look at the files out here and these are the files that you get with the bonus files ok you can take a look in the folders that we've got we have the creative life theme so you can take a look at the creative life theme and see all the files you'll see that we actually have a bunch of files in there okay, so we've got a lot of our templates we already talked about our page templates our index file et cetera u...

m you're going to see if we decide that we want to make a major shift or major change we want to edit the header alright and why would we had at the head of a page well maybe the theme you have has something in there you don't really want okay, maybe it has something that you decide that it's just not necessary it's loading something you don't like or maybe you would like to load something else or do something different. One thing I did for this team I actually started with a different theme and what idea was let me open up this header php just to show you this you don't have to open it. Um what I want up doing was I found it. I completely rewrote a lot of this stuff because I wanted to do a lot of different things but I found that it was actually not putting certain gives in the header for every page so you can see right here divide equals content and give inner content those were actually in each template and I realized for myself anyway that well it's going to work better for my case if I put those in the header that's an instance where I wanted to edit the header. So if we want to edit something that's in the theme file aside from the csf it's okay? And aside from something that goes into functions like a side bar like a menu something like that we need to copy that php file into our child folder that's the key that's the crux there okay, so what I would do is take the header take the footer and those are two big things that people attack because that's what they need to edit copy those php files into the child folder and you're going to see we already did the footer from last time so I got it there and edit that one and just don't forget that the foot or header whatever you're changing, what every copping in your child is going toe replace the parent one ok, now the reason I'm going down this road again is because I want to show you something with that plug in we used for the child themes, which is actually awesome I've been telling you to copy this file from the parent to the child and I get really annoying because you know when I go to p h berry go up to php you on and deep ftp et cetera, so check this out. This is amazing! I wanna go back over to my admin and you've already installed hopefully that child team uh uh plugging that we had by the way, I want to mention something with the plug in itself. If I go to plug ins, you're going to find that there are certain plug ins that you don't need to keep active if you have something some things that are meant to like like I use a plug in to clean up the database okay, once I clean up the database and the reason I do this because it gets choked with revisions and stuff like that once I clean it up, I can deactivate the plug it I don't need it active, okay? Because it's only for the admin and it does its job and I'm done the child team configurations. Same thing you really don't need this active because it made the child thing okay? The only reason I'm keeping active because I want to show you a couple things that it does above and beyond, so if I go to tools and once again for plug ins, they're going to kind of look around for the settings for it if it doesn't lead you there and I'm gonna go to child teams and if you look in here, we can see ok, we made the child team, we got it there, you're going to see that it has an existing child team that we set up, you let you'll see some some some different things up here like query selector at import, child css and different things we can work with not really going to get to those because some of those are a little more advanced, I'm gonna get to the files here this is actually this is amazing I saw this and I was like, wow, click on files check this out. This has this plug in has the ability to copy a parent file to the child without you going ftp, you can then just go in here and edit it right through the admin. So I've been telling you, okay, copy the footer, php make sure you put it in child don't mess up, it'll blow up right? So I want to do something like at it. I don't know the header I can click on header here, it's showing me a listing of all of the php files, all the files that are in the parent folder I can then just say, copy it to the child theme I'll copy the child team bam that's pretty much it you could see right appeared done, modified now I don't like the way they say file's modified, but anyway, that's, this is freaking me out, but ok, so I got a creative live you're going to see there it is right there on your server, on your host it's going to be copied in there, you can now start to edit it through the admin, which is awesome that's a great little feature of that plug, and I like there's other things we can do here that if we want to, but we don't need to do that, so all right now next thing we're going to do it kind of went through and talked about the templates kind of editing files et cetera I want to get into adding a custom sidebar on what that means this is very similar in functionality the way we make it toe adding a menu ok so let me let me go take a look at the appearance over here and what I'm gonna do is go to appearance and wanted to go toe widgets so if I go to appearance which it's you'll see that we have what are called wichita ized sidebars say that ten times real fast kind of rough we have sidebars that are set up and these are a little more dynamic and a lot of cases because what they do is it's very similar to the navigation we looked at in the last section but if I take a look if we want to sidebars to me can be a little bit more open meaning we can do more with them we can add uh more content different things we can and widgets which a lot of plug ins will use so for instance if I have a theme and I load a theme and this is my my parent theme okay and I loaded theme in the theme just like your menus they're also gonna have places where they register they add these sidebars so for instance we may have it where if we have a template called right sidebar, it may actually be split up into the header the main content and like all right sidebar div and right in there they're going to create an area called a digitized sidebar and we can throw widgets in there through the admin now to get that done if you want to make your own, which is awesome we could do and this is what we do a lot and I'll tell you the reason why as we kind of go through I'll give you examples, okay? But we're going to do this because we want to add different functionality in different places to the site here's a prime example suppose that right up here okay let's suppose a lot of sites have their navigation appear right that's kind of no brainer, but what if? What if I wanted to make it available to my client because I'm creating this for my client? I want to make it a veil to my client to add social media icons right up here or right down here, okay, but they're still in the header now I could tell my client, go crack open the php and start going all right, but I'm not gonna want to do that they're going to fire me so so what we can do is we can actually create what's called a news sidebar it's a witch is tight with side sidebar we could say in the files in the in the theme files that we have make it right here, let's, go ahead and register it, which is what we did for the knave, and what we're going to do is we're basically going here, it's going to show up and are now admin for us and for our clients vacant and to start dragon in widgets like a social media widget or whatever they decide to change or add it so that's, what we're going to do, we're going to create a side okay now, too great a sidebar, like I said, it's very similar in some ways to working with ah menu, because you have to do something called you gotta register and you got to go through that process, and I want to take you through that. So this is one of the files in the pdf of links that you have, uh, it's it's the codex again. We're going to visit the codex a few times at least, and you'll see that this is this is called sidecars, so I implore you to go look at the codex. The codex is awesome. It really helps you're going to look at it in the beginning when you first start with the word press you might look at some of this to be like gobbledygook I have no idea what they're talking about but read the paragraphs you're going to see it's going to take us through and say ok well first thing we need to do if we want to create one is register a sidebar okay so you could say here's how to register sidebars you can register a bunch or a single and then here's how we put it on her theme so display the sidebar in your theme just like a menu we got to do the same thing we gotta register it tell wordpress here comes and we got to say put it here and then we go in the admin and stick our stuff and it's two car widgets in it okay, now I already have the code for this so we can open that up but what I'm gonna do is I'm gonna go back over to the admin and what I'm gonna do is go to the editor we're going to get into the editor the first bit of code we're going to put in here is going to go into the functions because a lot of the stuff we do sidebars menus you know working with links and queuing files et cetera is going to go into that functions file we already created one so I'm gonna open up the theme functions file and you see it right here it's got some stuff in there here's might not look exactly like mine don't worry and what we're going to do is make sure that you guys you always got to make sure that this end question mark little you know greater and simple there is at the end we want to put all their stuff inside okay so I'm gonna put my cursor somewhere in here and we tried to put a lot of spacing but you know keep it neat I'm going to open up a file on these files are in the bonus files you have available so let me open up a file and look at the it's in the advanced folder and you're going to see ads sidebar in that folder are going to see a side bar dot php serving your little in your text out of their dream weaver whatever happens to be you could open that up and you'll see that we have two things to do this is the register this is how we tell wordpress a sidebars their cyber is coming throw it's showing in the admin and then this code actually goes in to the php file where we want to put it the foot of the header side by side bar in a sidebar that would be crazy, eh so that's where we put it okay so what we need to do is we're gonna grab this and as you start to learn we're pressing get deeper you're going to change this this is very generic, very simple but I will discuss it in a second I'm going to copy this so make sure you copy when I'm copying okay go back over and I'm gonna put it in my functions file I'm going to tell you right now if you copy in the wrong place if you put it within something else and you screw it up everything will probably go blank and you'll freak out okay so you'd have to be careful all right? This is why we back up and also just a quick heads up a way to get around that if you ever do that and things go blank used the back button in your browser and delete what you did and then update or save with the update file button didn't kind of save yourself sometimes sometimes that works okay so I'm gonna put it where there's nothing I'm going to right click and paste there we go it's registering the sidebar now let's take a look at the code real quick you're going to see that this idea is very important because that's how we grab it that's what we tell wordpress this specific sidebar so we give that a name that's very simple we usually keep it no spaces et cetera use underscores whatever you're going to see right here the name this is what's going to show up in the admin. So for your client, if you're doing this for a client for instance you want to make sure this makes sense so they know what ifs. Okay, so location is probably pretty key. This is the theme there reporting it in this is just a little description which makes sense you want to fill this out, you really do because give people an idea of what it is, how it works and the rest of this stuff you're going to see before after entitle this is pretty typical stuff, but there's, one thing here I want to draw your attention to class equals if you're working with his pacific theme, we probably don't want these sidebars to being columns, so we're gonna make sure that they stay is one column this is going to be a div, ok? And you're going to see right here this is the actual css it's gonna put and then it's going to go grab all the way just off of whatever you put in there and make it out of that, okay? But this class stuff is extremely important you're going to find it and all right here will not work in everything that's for my creative life theme, I created a mobile all which means just make it one column don't split in the columns. You may need to affect the css depending on your theme. All right, so I'm gonna update this file once again. If things go blank, you know what to do. Go back what I can now do. If I take a look, I'm going to go over to my widgets. So on the left, over here, go to my widgets, and you will now see that we have footer, center sidebar, there we go. So it's showing up automatically. The key here is this is what's called a widget ties sidebar, which means we are going to take widgets we have and put him in there. Next step we take, though, is it's got to show up in the page. This is just registering, getting ready. Now we gonna tell it where to put it. So what I'll do is go out here to my code and you're going to see in that sidebar dot php that little text file you had opened a copy from you'll see this code right here. This is actually what's called a dynamic sidebar. So it's actually saying, hey, if it's if it's there, if it's got stuff in it, we don't, because you're going to find it with wordpress and php and all this we try not to make it to where you say go get this thing and that's it that's the end of it because if it's not there or if it's something's wacky, it might break okay, so what kind of given out we're saying all right, if it's there and it works let's do it. Here is the idea for the sidebar, not the name the I d so remember, I'd be right up here, so I'm gonna copy this stuff right here. Php php copy that this is gonna go where we want to put it, so we've already created that foot or copy that footer into our child, so you get used to this. Hopefully I'm the go to the edit there again and sometimes you got to get used to bouncing around there's a fair amount of that, I'll come over to the right here, you'll see that we have the footer, I'm going to click on that to open it up and this is the key. We got to figure a way to put it right. So you're looking at all this code you like, where is this thing going to go? Okay, once again you're either going to go to the actual page itself, this guy right here, the live site that you have working on, and you're going to use the developer tools to go down, go down, take a look at the footer and start clicking on stuff and see where it's built how it's built and then compare that to the foot or file. But we've got a bit of a help here. You guys take a look at this, you're going to see if dynamic sidebar sidebar four this looks awfully familiar, there's already two sidebars in the footer so you're going to see right here we have a sidebar three and a sidebar for so we want to what we can do now is we can put this somewhere. Now you've got to be very careful because we don't want to mess this up. A lot of times you're going to see php if it's just saying, you know, hey, if this thing's working, it is there the global block let's do it. They're going to see something called ndf. We don't mess with those, those are those are all one thing, okay? So right after that and I'm gonna come in here and don't it's ok, just screw it up. You can fix it, I'll paste it. You see dynamic sidebar sidebar five now I put it in there because it's the center one. Cyber five makes no sense like why is that center just because that's what I need it doesn't matter okay? You could name it whatever you want so I go down here I'm gonna update the file can we go now? I'm gonna go take a look and you're going to have to refresh but watch this nothing happens the reason why the last step we need to take because when you put something in the sidebar there's nothing in there right now, okay, so go back to the admin widgets or where these sidebars kind of live and you're going to see footer, center, footer left and footer right there's nothing in these so we need to put stuff in otherwise they don't show up that's the key so I'm just get you there's a ton of widgets or going to talk more about some of these. This is not gonna look awesome, but I'm just going to put in like a calendar these air pre built. These come with wordpress and our fact and you got to make sure that you click save when you make any changes that will save everything I'm going to put like recent comments just to have content in there you can find it if you want to put social media you want to put, you know, a navigation and you wanna put different things in there if it's scrolling here, you may find that well there's not much in here but if you use a plug in like I've got a plug in called social media feather great plug in the social media which you can do is I can update our put that plug it in their turn it on activated and then I have mohr widgets I can work with a lot of plug ins have widgets assigned to them if I have this social media feather and you probably won't have this that's okay don't worry, you can pick another one to to add a you had a widget to one of these these sidebars I can also click on the name of it and you're going to see this is kind of cool I always forget this is here because it's newer you're going to see like footer left or footer, right? I'll say footer bright ad widget we're just picking the sidebar to put it in and there we go we'll say let's follow us and pick a size and we're good to go, so save it, I'll save it make sure we're saved I've got content in each now okay, we have three sidebars I'm gonna go back and refresh and take a look there we go now what's the issue here you look at this you're like well that looks stupid what what's going on it comes down to the css for the site originally the theme was set up to have two sidebars down there so I bet you money they applied css that said cover half the area and cover half the area now we've got to cut it into thirds. All right, this is this all stuff you're gonna have to think about if you decide to go down this path you know, I mean, so I go back over to admin and I go to my editor let's go take a look at the out of there again I'm gonna look at the footer itself so I'm gonna go see where we put it in stick it and you're going to see ok it's really there's really not anything going on here? It's just throw it in their throat in there, throw it in there so we need to do is we need to actually look at that widget code or at the start of the side bar code rather so I'm gonna go back over to the theme functions file that's where we stuck it first that's where he registered and set it up and I'll scroll down a bit to take a look and you're going to see member when I talked about that class equals thing that's specific to a theme okay, well, this is where it's kicking in right now we're basically telling it that we need to kind of set these things up a little differently so through a little bit of exploring through going back to the site and yes, I'm not going to kind of, you know, kill this, but if I go back to one of these old sidebars in the browser and I say let's actually go in and inspect the element there go uninspected, get my developer tools open again, I could go and take a look at one of these and say, ok, I glass there go click on you and you're going to see that we have right down here classical switch it mobile all t one of two if you guys take a look down here, you're going to see these classes in here, okay, all this stuff one of two three of six that's splitting and a half these air classes that are part of the theme this is something that we have to change. We have to make sure now that because it's splitting our footer into thirds that we actually have it's probably to be a style something like desktop two of six so it's going to be a third of each as a style okay, it's all thing dependent, I'm getting a little far here, I'm getting a little deep and sometimes you don't have to go this deep all right, but I'm just telling you right now that if it goes this far and you have to do something, you guys are going to have to go look at the sidebar itself just watch we don't have that sidebar file it's in apparent if I go look at the parent and go take a look at the sidebar file we could take a look at it and open it up you don't have to just take a look you're actually going to see right here look what I got this is where it's coming from that's css stuff I would actually have to change it in the main sidebar file. So what does that mean for our child would have to take that sidebar p h b copy it over to our child or use that plug in to copy it into our child go edit this and honestly with my theme, I know that it should be something like, you know, two of six or three of six you're going to match the style that's part of the theme ok and that's going to be part of the css, so make sure that we've got that set there, so I'm going to see a tablet one of two one of three whatever it happens to be in set that up, ok, so we're going to make sure that we have our sidebar set we get him where we want him. Get him all set as faras styling is concerned and ready to go. But you can see the real power of these the's can go in a lot of different locations. Header, footer, lots of stuff we can do.