Lessons

Lesson Info

Customize: Template & Sidebars

So we've got a lot of things to cover we're going to continue what we're doing is first customizing wordpress with css in html but without if you remember affecting the original theme files that's the whole premise to this okay trying to make it so that it's a little well safer for how we work and just make it so we can update the theme later on as well, really simply on and kind of take our thing the next level so we've got a lot of things we want to cover here we're going to talk about making a template we're going to talk about anything some of the files that we've got so it's sort of like if I go to the page here this is a page I'm gonna be working out for instance and I've got the foot or down here and what I'd really like to do is maybe I'd liketo reorganize content or not just change appearance but change structure like change how it works, how it acts things like that we can go in and edit the parent theme files we'll talk about that a little more but once again without editing...

parent team files okay, so we need to talk about that what's called hierarchy is well, we'll talk about adding a customs sidebar now a lot of times you're going to see on pages and it's not and here's the thing everybody it's when you hear word press, a lot of us think blogged and to be honest and that's where we're press started from there's a blogging platform and these days a lot of us are using it as a way to create to create websites that maybe have a block component or maybe, you know, have part of a blogging in it. But we're creating a site, so we're using we're press mora's a content management system type thing, if you will, the a way for us to be able to make edits, to upload files, for clients, to be on the log in, to build, to do the same, to bill, to make it it's today and media to had images, different things like that. So we're going to talk about customizing are themes love further, and one of the things is a sidebar. So a sidebar kind of interesting, but each team has different what are called templates, which means that you can have a theme that has a left side bar right side bar. No sidebar, it just depends, and we need to pick the temple we want, and we'll talk about that. But some templates have sidebars and some don't know, aside barred the way I think of a sidebar with me when I first started this, if you look here, this is a sidebar sidebars, you know, hit dog it's on the side of the page. It's got different content and it maybe that will show across multiple pages for multiple areas and it's, you know, it's something that we will we'll take a look at, but a cyber could be anywhere that's why I'm trying to get at a sidebar could continue content like, ah form, they could continue content like a navigation that could contain all kinds of things, so we could put a sidebar in the header. We could put a cyber have the footer, we could put it all over the place, so we'll discuss that when we create them. You know how that works? And I also want to talk about creating this wacky little thing called a fabric on, and I talked to people all the time about father cons and the fabric on if if I'm sure a lot of us already already familiar with what it is, let me let me just show you, I'll go to the the kind of the final, viva donut site, and you're going to see right up here got this little guy this little doughnut, if you will. This is called a fabric on, so farrakhan is something that shows usually in the tight, the title bar or the tab if it's a tab. Browser and it's it's just a little picture, or it could be a little party, your logo something like that. And a lot of people I talked to think that's why? I don't really care, you know, this is something stuck in the corner, but honestly, if you think about if you have a kind of phallic on these days, especially with all the devices we have and all the different operating systems, like windows eight, ios, et cetera, they use these farrakhan's in different ways. So for instance, if you take a web page and baby in suppose I'm in, I'm in windows eight, okay latest operating system from windows, and you're in a browser and you decide tio save this or bookmark the page. You, khun bookmark the page as a tile, the tile will show on the operating system, the tile if you don't have a family con is going to be something stupid little grey thing was like a question mark in it, you're gonna look like a rookie, so we want to fix that. So if africans could be important for certain things, ok, as far as you know, dictating who you like, conveying who you are from short cuts and a lot of other things as well and fabric cons are there's a lot of things we need to create them, but I'm going to show you a really dead simple way to do it, okay, we're going to use a plug in, so we're going to get started let me switch over here back to this site that we're working on here, and once again, I just want to mention that I am working what's called locally, you can see local host right here you're probably going to be working on your host through your admin. So it's going to probably be your you earl with, you know, slash w p ad mean okay, once you guys go to the dashboard and there's the dashboard right there, but I'm working locally, I have ma'am installed on mac to build a run, a server in the background first thing we're going to do is we're going to take a look at templates, these air super important, they're part of how we control the look and feel for the pages for our site. When you first look at the site and we go into the admin and I come over to the appearance and left over here, I'll click on that when you tended to click on these, it takes you to the first item in that category, so right now I'm looking at the themes, okay? If I look on the left over here we're also going to see that we've got a lot of different things we can work with the theme is very important because it's going tohave templates built in typically and the templates we use what they give us okay but if we want to take it further we're going to create her own now how do we know what templates air there that was a couple ways sometimes there are customizer settings that we can look at it will show us the different templates to be able to apply so if I come over here to the left and click on customize customizes it's a little bit newer it's been around for a while but it's a little bit newer a so far as I'm concerned I've been in war impressed for awhile but a customizer is the ability for us to go in and edit things without having to go into the code. So it's it's kind of changing and editing appearance properties as well as if you look over here you're going to see things like widgets I click on which it some themes will have things like widgets to be able to adjust I could say I want certain widgets to go in a sidebar that I create okay there's a lot of customizer options that are themes specific so these will not be the same for the next time you look at but I'm trying to get two years of sometimes you can see themes in this area in this section okay if I go back over to the main admin area and I go to one of the pages I'll take a look at a page here and I'm gonna go teo go to the home page for instance we'll goto home here and I take a look you'll see that I've got my content and we kind of covered a bunch of this stuff in the basic class like how we add content in work if you look in the right over here we did cover this in the basic classes well but you'll see that we have our templates on the right templates when I first started working where president paid too much attention to them I really and that was to my my own downfall because these were really important the default template is usually a file that comes with the theme it's usually like the index that ph beer some file or page that php depending on what you're working on if you're working on pages their posts and it just puts the content out there grabs what's in the pay jerry out here what you guys seeing the editor out here and sticks it out there now if I look on the right over there again I'll see that this theme has two built in templates it has no sidebars and right side bar and the idea is that we're just getting we're going pick what we want we're going to save it it's going to do its thing okay, so for instance if I come out here and this is the home page so if I come out here and say I want no sidebars on the homepage a lot of these these templates are named something that makes sense, right? So no sidebars means there's well, there's not gonna be a sidebar so if I click on update over here and I go take a look at it, I'll go to the home page real quick and click on the local lot of this noble goes home you'll see that it just now has a bunch of content sitting out there and there we go that's what's just the page content so that is a template that we can we beth now suppose that we decide to take this further and we have an instance where we have a right cyber but we want to switch it to the left I want the cyber to actually be on the left through mere mortal means using this template menu, we can't do that okay? You can't just say let's just make it left that's fine, we need to get it in the files when you start doing something so we're going to do is we're going to create ourselves our own template all right, that is going to evolve a little bit of copy paste kind of looking at the parent theme, grabbing a few files and kind of work in that way. Okay, so let me do this. I am working locally. You are probably going to be working either through a program like maybe maybe dreamweaver or some kind of ftp program dream weaver has ftp built in, so if you guys have creative cloud, you can download it and use it and you're going to go look at your host to look at the files. That's one way people do that. So I actually have and I'm not telling you to use this, but I have this little program little ftp program called cyber duck and it's, you know, it's cute it's got a little duck on it and whatever. But if I go log into my actual host, I can see right now I am looking at the files upon my host so I could see in life this is where you can if you want to go in and start to copy paste and move and do some different things a word to the wise here. Okay, I'm going to stop for a second because this is super important if we are editing these things and let's suppose that this is the first time the sites available nobody knows about it, okay? You just created this thing got to you are ill you doing your thing do what you need okay, move stuff around copy whatever deletes screwed up have it break fix it there you go. If it is a live site that you're working on, be very careful about what I'm showing you okay as you make these changes doing it up on go daddy doing it on one on one doing on bloat bloo host people going to see it right away. Okay, so if you make a mistake, we're going to see the mistake right away. So you got to be very careful with that, and to be honest, I'm not telling you to do it, but this is why we developed locally a lot when we doom or with word price. Okay, ok, so you're going to get to the files through some program like dreamweaver see the files of the host, you're going to see the theme files up there and you're going to see the in my creative life folder here I have the different things that I've got. No, you're going to see that you're going to tell sometimes that something is a template because most teams actually all themes have a file called index dot php and this is kind of like the fall a this is the main template file what I would suggest is if you're kind of turn to dig into some of these files and see what's what? Open him up, just just go into it a little text out of there if your injury move or you could just quickly downloaded or copied down and take a look at it if I open this up to take a look at it in my text out of there, I'm using sublime text you don't have to you're going to see a lot of these are commented, so word press out of the gate is going to give you these files that have things telling you what they are the main template file, they also give you, like, a description of what this thing is, so you can kind of see what's going on now, some of the files don't have this, you know, this kind of kind of assuming I'm going to show you some, uh, a resourceful way of finding out what's what? Okay, let me just say that. Watch this. This is this is brian in action? Okay, if you look in here, you're going to see something called page dot php. If you create pages and wordpress by default, this is typically the template file that it uses to make those pages okay, so I'm gonna open that up that's the default so you're going to see a bunch of stuff, right? You know, I used to php don't worry about it here's what I do okay, I go find some kind of divorce something in there cannot be careful not to put it in like anything that looks like this like php stuff just go to the top somewhere you see like a little tag like a diff okay? And I'm gonna type in this is brian type in anything you want okay there's a life theme I'm not telling you to do okay, this is brian in action, okay? I'm gonna take this in I'm going to save it and maybe you need to put it back on your host if you guys copied it down, you can use dreamweaver some program the fdp replaced the one you had now I'm going to go back up to my side here and I want to go to my home page and right now I don't care that people see this because this is a new site like I said, we're going to work a little differently if it's something it's existing you've got to be more careful. I'm gonna come over here to templates and I'm gonna choose default template so the page php is going to be that default template I'm going to click on update I might go out to my site here and refresh and because take a look look right there this is brian ah, so I look at it I'm like uh oh that's where it's getting it from that's what that file does is what I used to do all the time I used to just stick something in there save the site go look at it and wherever it showed up I know that that's the theme or template or whatever it's pulling from that's where is doing it? So like I said remember to take him out and don't do it in a live site but it's something you can do so let me undo that real quick let me back up and I'll save the page again. Okay, this is that php file so this is the main default template that it's using okay, now let me close some of these up and get back over to my files so what we're gonna do is we're going to create or a new one basically from the parent. So here's the thing when you work with we talked about css last time we were talking about the parents he assessed the child cia says they all kind of much together and become the css, right? Well, this is going to be completely different if we start working with theme files, things like php files and different, you know, pieces like that what's essentially going to happen here and I kind of describe this in the previous section but for the parents if I have like the header uh header and I came to spell header and I hope it's okay headed up php right here and this is the parent okay? The parent folder and I've got a child theme right here and just just pretend you guys that these are little folders let's do that there's a parent folder there's a child fold this is active child's active so we're using that theme if I want to do something to the header of the page what I'm gonna do is I'm gonna go to the parent and I'm gonna copy that php file and bring it over to the child not going to remove it I'm gonna copy ok that way we have the original still what's gonna happen is when I put that copy into this child folder it's going toe overwrite the parent header these air not going emerge combined to with css does this is going to basically replace that so hopefully that makes sense this is something that you get used to and I didn't at first I didn't get it so but now I do so it's good if I look at my folder here especially the creative live theme you're going to see that I can kind of tell what is a template what's not because you're going to see like no sidebars dot php ok, I'm looking in my admin and I see in that in that in the temple its menu it says no sidebars and it says you know right sidebar but I've got to php files and here called once called no sidebars in what's called writes on I'm pretty sure that's probably going to be one of the template files okay, so what I'm gonna do is I'm going to open up right side bar, for instance and you're going to see that we're going to see this bit of text right hearing what's called a comment this you guys this bit of text is completely necessary to create a template you have to name it you have to tell wordpress the name of the template is this and it is a template that little line in text does it okay, but it's, you got to see this stuff right here it's in what's called a comment so the world isn't going to see it but wordpress knows what it is so we give it a name. So if I were to come in here you guys and do something like this I want to say it now we're in the main theme right in the parent theme, so I'm going to be very careful about editing here I'm not going to read it, but if I went in here change this to brian sidebar an ad man it would show up is brian cyber on the menu so that's the idea so what we're going to do is we're going to create a left side bar version of this so what? I'm going to close this I'm not going to edit it it's on the parents, so we're going to take whatever we want to edit, we're going to take the actual template file itself and we're going to just copied into the child, okay? So once again you're gonna do this using dreamweaver ftp or if you're comfortable going into your host files, looking in the directory and doing it that way, you can do it that way. There are other ways to do this, and I do want to show you that that could be less scary, to be honest, so I'm gonna I'm gonna take this one, and the reason why I'm copying his right side bar template is because it's already done and I just want to move this sidebar over so I'm gonna copy this one so I'll say let's, copy this guy copyright sidebar that's kind of weird, but I wouldn't say that ok, I'll go to my child here and I'm just gonna paste it in there now once again, I'm working locally, you guys can do this as well and you're going to see right side bar but a key here is this if I don't change this php filed at all what's going to happen well, it's going to override the right side bar template okay, so I need to make this different I don't want to do that. I want the right side bar so I'm gonna come in here and you guys when we do name these we want to be very careful about upper case lower case you want to be careful about no spaces very web if you do web it all keep it simple do that. Okay, so I'll say something like left side bar the road the reason why sidebars in there. You know what the word sidebar you could call this fred is a template, it's just because I'm kind of describing it to myself now what I'm gonna do is I'm gonna open that fly a lot, so I'm gonna open up the left side bar php and you can probably figure out what I need to do here with the next step is going to be if I look at the name of, you're going to see this one still called right? Okay, so I'm gonna go in and change it to left side bar and that's because that's pretty much it that's how you create a template okay, you get out, you go make a php file on your child and if the php file in the child that you create let's say it's called like, you know template one php or whatever you want to do template dot php well, I don't know whatever and if you guys go in there and you create that little file in your editorial, it'll text out of there or dreamweaver whatever all you really knew you need is you need that that php stuff so we need the beginning here, right up here. We need the template name instead of me writing it all out if you're going to do this and we need this, you guys just need this block of code right here and the rest of this stuff is just how it looks, how it actually what continent pulls in. So really, in a template, you just need what's at the top, okay? And you need to name the template file so if you're going to create one from scratch that's what you're going to do that's what, you're gonna do it okay called left side bar I just template. Name left sidebar let's, go check out the magic if you guys are working. Look, if you guys were working off your host, you're gonna want to upload that again into your child theme folder don't forget I'm gonna go back to admin here and I'm gonna refresh you got to remember that you got to refresh for this stuff I used to not do that freak out I'd be like what's going on so over fresh the page I'm on my pages here in the admin I'll scroll down and you'll see now that we have left side bar pretty cool so you create templates okay there's a lot of ways we can work with templates a lot of ways to pull confident cross the different things I'm just trying to get you guys into this to kind of get started okay once you guys get your feet wet and start to go further you'll see there's tons of stuff you can do with this I'm gonna go in and say let's let's make a left side bar now awesome so she was left side bar I'm all psyched ready to go a click update bam go look at the live awesomeness and refresh I'm gonna click on refresh and there we go left side bar right okay well way have forgot one little step we have to actually change what it looks like okay so get the temple made you got it set up you got it apply to a page now you've got to go in and tell it what to look like this I'm going to tell you right now could be a bit of a headache okay you have to when you start editing themes theme files things like that you have to know how the theme is built, how it's set up, what kind of styles that uses all that stuff okay and this is going to require some detective work it really is what I tend to do I'm going to go back to that template we created that left sard sidebar dot php and my little text of they're here and I'm just going to take a look at it and kind of points of things out that you'll find and you're you're kind of c pretty quickly, okay, first of all, if you take a look, you're going to see that if I school down here a little bit you're going to see this thing a lot of us already know that if you ever see this and you will see this ok, this is called the loop this is basically word price doing its thing going in saying, hey, if there's content to go grab it, stick it in okay uh you know, it's kind of setting it up if you will setting all that up you're going to see down here that this is where this thing called php the content some teams will do this and this is just saying, ok, we're going to go grab this php file called content and con graham that content that styled and ready to go and yank that into our page okay, this is the main temple it the main structure of the page that you're working on so we've got if you look also you're going to see divx ideals maine and if you're kind of new to ph being and you know all this stuff what I suggest you do is look at the template file itself then go look at the page and see how it's built okay, I'm gonna go out and take a look in my browser here once again at the site and I have the left side bar applied but nothing's happening so let's take a look I'm going to go in and start to use the developer tools to see what's what's actually happening how this thing is built so in some browsers aiken right click I'm just going to right click on just about anything out here and I'll see inspect element and you can do this in all the big browsers chrome firefox safari a internet explorer you can also find the menu somewhere in the browser going to find a developer tools many can also do it that way get the developer tools open they're going to look a little different between browsers but very similar and you're going to see some kind of I kind like we saw earlier this little like looking last year this little guy here magnifying glass if I click on that and go on take a look excuse me you could start to hover over stuff and you'll start to see how things were created know when I'm going to do is I'm going to click on one of these boxes here you'll see like it looks like I'll give around everything, so I'll just click and if I take a look these many bit here, I'll see that I've got a bunch of stuff going on here that's of columns I got this section thing what I tend to do is I tend to start simplifying I think this is the html the page right attended start kind of closing these up a little bit and just seeing what I've got and suddenly when you get down to like the bare bones of what's there you're going to start to see like, ok give class equals blah role main whom div sidebar almost all of our sidebar is going to be with called a div okay, we're going to see the okay, we got the main stuff here and then we've got this sidebar if I close that further main inside bar, so let me go back over to my template so I'm looking at, you know, main inside bar so I take a look in here I could see a wait a minute that's the div tag that I saw in the browser in the in the developer tools right there so ok, so that's that's the main stuff and it says main obviously I could see that the scroll down a bit I'm going to be okay I saw this section taggart saw that that's cool scorn on school and school and a bunch of stuff bunch of stuff php blah, blah you'll get to know and wiles and end ifs and if statements and all that stuff they're very important when you start working later on, I should say, and then suddenly you're going to see this php get sidebar this is basically telling it to go grab a file called sidebar dot php so that's in your theme file that's what this little bit of code is doing automatically so soon as we type that and it's going to go grab that file now I'm looking and I'm saying ok that's the whole sidebar you guys that's it if I were to go look at that right now and you get by default that open sidebar dot ph we are in fact just to prove it to you I'll go out to the code itself now this is the parent, okay? If I look in here, you're going to see sidebar dot php right there every page by default that pulls in a sidebar if it has a little bit of get side bar code is going to pull that filing and what's really cool is you're learning word price and you start to kind of get this and understand a little more a little more each day if I open this up and take a look at it you're going to see oh div equal sidebar that's that device on the page so it was the main did and then the sidebar gave those two I saw so we can kind of start to piece it together and figure out how this thing is put together okay, now I really want to do this. I want to make sure that my sidebar comes on the left. Okay, let me close this up so you can see right here that this is the template again my left side bar template if I scroll down here, take a look you're going to see this is the main stuff let me go all the way down here going to see there's the main stuff that's it right there opening, giving, closing death and then it says, go grab the cyber if we're looking at this thing and we'll get in a certain way, we're probably gonna want to do this. The sidebar right now is going to the right we wanted to go to the left, usually on the web when you see things like that things that are either on the left or on top they're probably to come first in the code, okay, not always, but probably so we're saying in here put all that stuff for the main the page and then put the sidebar so it's going to go after it, so usually what we're gonna wind up doing is we're going to take that sidebar and have it come first and then the page content now, it depends on how the pages built, ok? It really does, so let me go back over this is it kids deep? Okay? And I'm not I'm not trying to excuse it, I'm just saying that this is how a lot of these air built and this is what we have to do and have to go through. So if I come over and hover over, I'm in that browser I mean, in my developer tools still hover over that did for me and what's really awesome what thes is that it just kind of highlights and shows you what it is I'm going to click on it and say, ok, well, yeah that's that look where they look, where the highlights going around, you can see it's just going around the page content the columns ok, so it's not the sideburns, not in there it's kind of separate so far over the side we're going to see ok that's over there now how do these? How are these built? How is they going next to each other? So if I click on sidebar here and take a look, I'm gonna look over on the right. You're going to see all this css, I'm just going to go take a look over there and see what's going on. Usually in order for us to take to dave's or boxes and stick him next to each other, we usually do something called float them. Okay, so I'm gonna just gonna look in here and we'd be like, ok, background color that's not really going to help me. That's. Great with okay, that's. Awesome. I know how wide it is. Cool. Look right here. Float left that's. How it's getting these gifts to go next to each other float literally says let's. Take the object out of the flow of the page and either align it left there align it right. If we do that to a couple boxes that were sitting on top each other it's going to take them both out of the page and let them nestle next to each other like this and go in line now it always almost always works that if you say float left, just take me at my word here you got one out to kira div one I'm secure, div okay, let me actually write this out. It might make it easier to send out to hold my hands up. I have two two objects now this is in the html so I've got a box in a box. Okay, so this is like call this, you know, div one and this is def too. This is, um this is my main and this is my sidebar on our page. If I put two boxes in my html and I say let's, float them both, I say let's float them both left slight using styling I say float left for both of them go float left. All right, I apply that to both of these objects what's gonna happen is this it takes these two out of the flow of the page, okay? And then basically just kind of sets it on top of you guys, you photoshopped it's, sort of like a layer and photo shop. It sticks him up here kind of on top of everything else. It's kind of cool, actually. And then what happens is is sort of like a text wrap you say flo left means go to the left inside, whatever you're inside of go far left and if there's something below it it's going to start to wrap around it squeak up to the side okay, so these two objects are floated to the left so what's happening is they're both trying to go to the left but they're both kind of going around each other because there's room this is just the nature of the beast. So this is going to come up over here and go right there and that's give too and this is floated left and this is flood left. They're both battling the ball trying go left. Okay, but because this one's here, this one has to stop. So what we do we know how it's built now, so I say ok, so this is my side bar down here on our template and this is the main they're both floating left. So what would happen if I took that sidebar imported above the main divi put it up here instead. The sidebar so we'll forget that one now that's going to switch him it's going to swap. Okay, so it's going to say all right, sidebar your first so you go this way. Did the main give you go up over here? So we're gonna have it on the left that's the key, you guys, you have to understand how the thing is built and it's just it's crucial and understanding, you know, the basics of css and basically how things are built is really, really key. So what I can do here is this I'm gonna go back to the template itself, so I'm gonna go back over to my code. Now we don't need to, like, mess with the styling or any of the stuff we need to just move the boxes basically couldn't get in our case. So I'm gonna take this get sidebar thing and basically, I'm just gonna cut it out of here. That's a little scary. Okay, I admit, and if you do it in the wrong place, it's going to freak out, all right? You always look at the tags, look at the closing and opening tags and see how they're lined up and where things are ok, this is the main box, so I'm gonna put it right up here, so I'm gonna paste it right there. Well, scary let's. See what it does. Okay, I'm going to save. Of course you're probably gonna have to upload again if you're working and dreamy over text program. Remember, child team, I'm gonna go back out to my page and refresh. You guys should see there we go. So it really, really matters. And you know, we may have this. To be perfectly frank, a left side bars come in nineteen eighty nine I mean, we don't do that a lot anymore. I just wanted to show a prime example of what we do as far as creating templates, but this is something you have to pay attention to, not only by just creating a template and getting the content it's easiest to copy one it's already there and make changes to it. But you have to pay attention to how things are laid out, css and how they all come together ok, and also know with css, if you decide you like, well, I'm just going to change the css from before and maybe instead of float flow left, I'm going to float right got to be really careful because if you say float right instead it's going affect every page and every object that has that applied so that's something to think about here, we're going to try and change the structure up and get it set, so we got ourselves a template. That's actually that's pretty amazing. The first time I did that, I was just I was so proud of myself. I mean, I'll say that, right? I was very proud of myself, but it's, you know, it's it's kind of empowering it's awesome