Lessons

Lesson Info

Adding Widgets to Your Theme

What I want to do is talk about what are called widgets. Ok, now when we look let me go out to the site here when we look at a lot of websites uh what we tend to see here we tend to see the content, all that stuff, right? Good stuff. But you also tend to see things like social media icons. We tend to see things like, if it's a blogger, maybe like past block post or things like that. And they usually appear in some area like this right here now. Ah, lot of themes were going to see. We'll actually have what's called a widget reddit ready area. And this is actually this is technically called a sidebar. Okay, so inward press if we have a sidebar, a sidebar can contain. If the themes set up the right way can contain widgets, we just are phenomenal. Anybody ever worked with a widget and wordpress? Okay, so what widgets are just I mean, the idea is that we don't have to coat anything. We confined all this great stuff. Social media we can find just about anything we want to dio and just drag a...

nd drop. Okay that's kind of the idea that the thing is, though, is in a lot of cases the widgets need to have a place to go and that's, where the sidebars command okay, by default, we have a single sidebar on the right. I'm going to show you how we can actually change that up a little bit, depending on the pages we create. Let me go back over and we're going to start to talk a little bit about widgets. I'm gonna click on on the left hand side over here. We're going to see that we have the widgets area and I'm gonna click on widgets. Now, when we first get in here, you're going to see dependent on the theme. So this is all part of the theme. Okay, the theme has thes areas thes sidebars that are set up right here that we can going to start to add widgets, too. And not like a widget is kind of like a I know it's kind of got a little bit of code. You don't the right that is visual and his dragon. Okay, that's the idea. If you looked when I first get in, dig into a theme and I first started, take a look. You want to look at thes sidebars and this is one place you're going to find him. Actually, okay, you're going to find that we have a main page sidebar, we have a log page sidebar it's, kind of interesting we have a foot or left in a foot of right. So the theme is set up this way. Now a lot of themes are gonna have this set in stone. So if you wanna have, for instance, in my foot or I want to have three of these, like a lot get seen websites where you look at the footage and the footers, like, I don't know the size of a building because they have, like, their life details and everything in there, right? But they have it's separated in the columns. Okay? And this theme, I actually made it. So we have two, which is kind of a big gap in a big space in the advanced class. We talked about adding a third and how we can do that. Of course. Ok, but in here we have the sidebars set up the way. This okay, now the side bar. Like I said, it is similar to the menu where it's just it's a hole waiting for you to put your stuff in. If nothing's in there a lot of times, the people out there, they look at your sight are not going to really see that. Okay, so what I'm gonna do is this the main page cyber and it's kind of important understand where the sidebars are so you need the sidebars? Hopefully are named properly. Okay. Like main page sidebar is just a page sidebar. Typically that's what we call it. Okay, so what I'm gonna do is look in here and you're going to see that we actually have things like search and content and all these different widgets set up that we can work with. Okay, these are all default. Now. The widgets themselves were dragged in here you're going to see on the left on the left hand side over here, these air the available widgets that we have. So if I scroll down a liberal let's, just take a quick look. You see that most? To be honest, all cities are set up for blog's. Okay, you're going to see recent comments. Posts, searching rcs feeds doesn't know what a tag cloud is. Yes, he knows I'm not a big fan, but that's me it's just basically like it finds all the different tags in whichever whichever word it's almost like a key. Wording things. Okay, so if it finds a word and it's used a lot or tagged on a bunch of things, it makes that one bigger. But it's, just a cloud of words basically, and some are big, some are small. It was really big for awhile so anyway so it had clouds and we also have what's called text this is kind of just an arbitrary text box you could start just typing stuff in and put whatever you want it's well within reason all right so so we have also if you look here we have menu so you could go in and create a custom menu and dragged and if you want to and we also have what are called categories and archives and a lot of this stuff is set up like I said for blog's okay, so let's take a look at the main page sidebar over here what I'm gonna do is there going to see right here it says the sidebar on the right side bar template page all right, we're gonna talk about temple it's just a minute here but I'm gonna go out here and you're going to see that we have search we have all these different things they're in there and the ordering in which this stuff appears is exactly what you see here is going to show up in that sidebar the contents or the actual settings if you will are just kind of set underneath here the idea is this when you first started blogging or a website rather there's going to be defaults what I tend to do is get rid of the defaults and do my own ok and it's up to you but I come in here is a couple ways to do this you're going to notice to see the arrow right there what's it telling you drag it around right so I could come in here and say let's re order these things whatever order they appearing is what they show up on the page if I want to get rid of one of these there's a couple ways you can do this if I click and open it up you're going to see of course delete any time you see delete in here you've got to think to yourself is it actually deleting it forever or is it just deleting it so I can use it again later okay wordpress you got to kind of think that way sometimes you're like really because if you delete a page it's deleted you could get back there is a way to get back in history but it's the lead in this case search if I hit the lead right here you're going to see it got rid of it right there okay but if I go back over here and take a look I'm going to see search so a lot of time what it's basically doing a lot of cases just moving them back and forth so over here they're ready to go over there they're being used okay so that actually leads me to believe that ok well recent post watches I'm just going to drag out look up here it says deactivate recent post so I'll just let go and if I scroll down you're actually going to see that it's going to say like sometimes it says inactive widgets but it just talking over here recent post okay, so I'm just gonna take what I don't want basically and just kind of drag him out just get rid of the ones I don't want and we kind of start from scratch, okay? Ah lot of these are going to blank, which means that the box is gonna look like this on the page right there now by default what I what I want to have happen in here is I actually set up some templates that we're going to talk about and these air part of my templates that I created okay, so what I'm gonna do is that's first of all, I'm going to go to one of my pages and just kind of talked to you a little bit about templates because templates are kind of a mainstay of word press if you will they're a big thing a big deal these sidebars you're going to find that if we had let's suppose that we just had this let's suppose that you came into a theme and I'm looking at this and the only option you had was to have two columns ever okay, you might not use the theme to be perfectly honest because what if your home page? What if you guys want to have, like, some really awesome wide pictures, some slide shows and just a little bit of content or something to that effect? You couldn't do it because it has two combs, so a lot of themes will actually have what are called templates built in. If you go to the pages up here, I'm going to go to the pages, and if we're building a website that's, not a blogger, we're gonna do a lot of pages, I'm gonna go to the pages here, and of course we have our pages that, you know, the one I just created quickly, we can go in and we can edit these pages, and this is where we going to start to kind of really add the content to the pitch, okay, we will dig in this in just a few minutes here, but I'm gonna go to edit and you're going to see that out. Here is where we start to add our content. This is it. This is where we just start to go nuts. Ok, if you look on the right over here, we're going to talk a lot about this stuff don't worry, but you're going to see down here we have what's called a template. These templates are really big deal the reason why I'm talking about right now is not that confusing amaze you to jump into this but the sidebars a lot of times are tied with the templates okay? Because it's going to say if you have a template now each team can have one template can have two fifteen templates and you could have a template that says three columns something says to column just depends on what you want that page toe look like does that make sense? Okay, so what I'm gonna do the default template actually really doesn't have any of these. So what I expect you guys to do is to pick something like let's say I want a right side bar, okay, I'm gonna choose right side bar it's actually going to completely change the way the page looks and do something different maybe put a right side bar instead of no sidebar if I were to choose something like no sidebars what do you guys think would happen? It's a trick question s so click on update here. Just watch I said no sidebars out here this is the contact paige and this is everybody fails at this they go check something and fix something and save it then they go out and simply refresh the page and they're like, why isn't it working? What pages I just fix contact page so I gotta go to that pidge okay? And you guys going to see you take a look? No sidebar blank okay, so this is the idea this is what we're gonna try and do all right, so what? I'm gonna do it back to that contact page here is I'm gonna actually put in what's called the right side bar this is where if you use this template in this team that one side bar that I showed you is going to work it's going to put that content on the pitch okay, so I'm gonna choose updating and you're gonna go I'm gonna go take a look at the contact once again I'm on the contact page I'm gonna refresh your going to see it's gonna look something like it did before but now what I'm gonna do is I'm gonna go back I'm gonna go back over to the left over here I'm going to take a look at the widgets and to take a look this is now right here. The main page sidebar this is the cyber on the right side bar template so we need to apply the right template to get this sidebar does that work makes sense okay is getting a lot of this work so you're gonna find it some templates or some themes rather the whole theme will work differently sometimes they'll do something a little more creatively if you will so but most of the time this is how it's gonna work so if I want to add something let's say I want to do this I want to take up this is gonna be really don't wanna throw can wander over here you look at these over here and every time I look at these I'm like really this is it, you know, like it's supposed to be so it's just a cool thing to do, you know? I mean, I was gonna take a calendar and drag it over and put it in the side bar and I'm just going to call this calendar and then you notice that, okay, it's a calendar, but there are zero settings you just tell us what it is I'm gonna click on save okay calendar is called calendar. Oddly enough, I'm gonna go back out to my page and I'm going to refresh and you're going to see that they look there's the calendar. All right? This is the kind of thing where you're like hey that's great, but it doesn't do anything because nothing is doing okay so ah lot of these different types of widgets are like I said, use for block so if we want to, we can go into each one of these areas and we could go to the footer we have a left and a right, and we could start to add the different things we want to do. Okay, now I want to do this. I want to actually expand our collection here, all right? This is kind of ridiculous, so we don't have much. So what I'm gonna do is in order for us to get more widgets, does anyone know how we can do that? Get more wages down left? Like okay, plug ins are the key to widgets at least one key to widgets we can actually, you could do it a couple ways butt plug ins are at all right if you take a look at the left over here, you're going to see what it called plug ins. We are going to go into plug ins and detail in the last section, but it kind of hit it here too. If you look at plug ins, I'm gonna click on this on the left hand side over here and you're going to see that it's going to show you what are called installed plug it's now plug ins. Like I said early early on, this is something that somebody created it's a bunch of code is probably much folders that are, like, zipped up, and all it does is it takes the plugging that we want we go find one we activate it and we could start using it okay if you look in here you're going to see that every word press sight starts with to plug ins we have a kid's mitt right here and the kids that you can kind of read this I'm not going to tell exactly it's like spam comments filtering and things like that a lot of people swear by it is to use it all the time uh and you're going to see notice how wordpress is yelling at me there's a new version okay, we'll talk about that in a little bit here but and then there's hello, dolly. All right, whatever saying hello down okay, the movie here that's like no point yeah, exactly this is a plug in and symbolizes hope okay uh if you want to you can activate it activating it what it does is essentially starts just put inspirational messages up in the corner so it's your call anyway, I want to show you how to delete a plug in. All right? So we're gonna start with that one, okay? Don't get me wrong you're wrong it's great. If we have a plug plug in like I said it's just it's a piece, a piece of code or a bunch of code that somebody maybe we can put in here you can tell that things are active okay because they actually don't say activate all right, so what I'm gonna do is I'm gonna go and say, okay, this one is not active, and by the way, I'm just gonna throw this out there, never delete an active plugin, okay? Try not to because it may be being used somewhere on your site and if you delete it poof, there goes the magic for that thing. Okay, you always want to try and deactivate first. It's called. Well, look at that a little bit. I'm gonna just get rid of this one. You're gonna see it's really dead simple. You just follow what you're gonna say deleted? Yes, delete it's going to lead it. This is very nerve wracking right now. Every time I do it to plug in the more he's like what's going on. Um, so okay, so we have a clock and know what I'm gonna do is I'm gonna add another plug in here that a lot of us are going to use, okay? And this one has to do a lot with widgets. I'm gonna come to plug ins here and you're going to see add new. I'll click on that right up there and if I look in here what's going to do is it's actually going to go to that word press page and pull in the plug ins that are available there are a lot there are. Ah, brazilian plug it's. Okay, you're going to see that this is actually part of what's called the world press plugin directory. And this is going to be something you're going to use a lot in the beginning. I guarantee it. Ah, plug in. Like I said, it's. Something you just install and you either activator enough. If you decide to use it, you activate it. If you look in here, you're going to see that we have what are called featured popular and favorites. Right? Appear. Let me zoom in just a little bit. So featured popular favorites. You just kind of take a look at these. You guys gonna kind of see what they are and what they do. And you can create your own favorites, by the way. But I tend to go too popular. This is actually a good thing, because popular means that a lot of people have downloaded these before. And if you start to look in here going to see. Okay. Kismet. Look at that. Look, can you guys see how many downloads right here? There? You think people use this thing? Yeah, I think. It's so so. We're going to talk a lot about plug ins a little bit later on show you how to find the good ones weed out the bad ones and some really good ones that I use all the time but for right now I just want to get to the widgets here uh if I look let's see if it's actually here I think it's actually in there we go you're going to find one called jetpack by wordpress dot com okay, now what we can do here is we can actually go in and we can activate this one if we want to and we can use its plug ins it's contact there is information rather that it has made you take a look it's got thirteen million downloads on it and what this does for us is it basically means that we can use a lot of widgets that's the idea okay, now this is actually let me do this I'm just quick I'm gonna mention this before if you ever go to look at a plug in you want to look at the details? Okay, so I go look at details I take a look I'm looking in here I want to go see what it does I want to go see over here this is ke you guys were gonna mention this a little later what versions does it require and what is it compatible with when you work on we're press you need to know the version of wordpress you're working on okay, you could always find that in the dashboard the main page when you start in your admin so I know that this is gonna work all right? Let's just say that I just I know it does so I'm gonna install it it's gonna go through and do the you know, the plugin thing the et cetera okay bamm bamm bamm and take a second here can you see it? Zip right up there it's zip right there. So it's actually just downloading a file, putting it on my server putting where needs to go and installing this now when this doesn't stall it's going kind of unpack it do its thing and eventually was going to wind up doing is allowing me to activate it and that's that's the point where we can activate and we could start using all the stuff right? So you say okay, successfully installed it that's good if you are doing this all over the web from your host might take a little longer might not it depends on your hosting and you're all that stuff. So what I'm going to say let's activate now I I honestly unless you researched the plug in and you know it's not gonna break be bad etcetera and I'll mention some of that in a little while you can activate it right away otherwise go back to the install plug ins and see and kind of think about it for a minute I'm gonna activate it it'll take a couple seconds here think about it there we go now it's gonna take us back over here to the plug in page and you're going to see jetpack by wordpress dot com I noticed this when you work with plug ins we're gonna talk more about this when you work with a plug in as soon as you activated your going to see that there's this their settings for that plug and now it can do things so we had to tell it what to dio jetpack is a big deal. Okay, a lot of people use it look right up here you're going to see jet pack now the idea here is that if I click on jet pack and go take a look at it let me zoom out is actually probably the coolest options paige ever can you see that guy, right? Yeah, the idea here is that we actually need to tie this toe wordpress dot com it's called so you need to create a wordpress dot com account which is free doesn't really require anything you just given email address okay and you get a ton of widgets toe work with okay there's a lot of things you could do with this it's crazy so what I'm gonna do right now it's like she says I'm working what's called local development mode yes ten words or less because there's a little bit confusion it's a it's a new a new audience out there the difference between wordpress dot com and wordpress dot or gue yeah it's yeah that's that's a great question wordpress dot com is hosting and creating the website itself okay you don't do anything else you just created were pressed at ord you're just downloading the word press folder and building yourself so it is a big difference there and I I know is you can tell because it'll have your main web address or it'll have blah blah dot wordpress dot com so yep so wordpress dot com is actually free to start with you can create a sight but like she said it's going to have a something dot wordpress dot com site we're best dot com lets you pay money and get rid of that so you can have your own you're all ok but they're doing everything you're just going in and saying let's just build let's go where is with wordpress dot or ge you are in charge they give you the files and say run you go build it's your your deal great which is what we're doing today we're just pretty much what we're doing when we do it on go daddy your one on one and blue host that's what we're doing we're just letting them put the files up there for us. You know what I mean? So perfect. That was great. Thank you. Okay, so essentially what's gonna happen with jetpack here is going to ask you if I go in, you're going to see right up here there's actually settings for us. It's going to ask youto law again. Okay, so it's actually create a wordpress dot com again account? Um I I have an account and I am working with called locally so it's not asking me to do that right now. Okay, you will have to it's going to say let's log and let's do this thing okay? And hopefully it's not going to ask me later but now check. Check this out. This is really cool. So these are let me scroll down a little bit. These are all the different things that we can insert now into our theme. If you want to do something like how many of you have ever heard of infinite scroll, you scroll a site and things keep appearing and you can keep scrolling freaks you out? I know I'm not there's a lot of case I'm not a big fan, I yuri I I get it, I get it, but there's these different things that we can do right here okay, now what I want to do right now is we're just looking at some of the things available that we have available here you can if you want to let's suppose I want to put a carousel in one of my pages like an image a carousel I can go in here and say let's activate this a lot of this stuff is already responsive that pretty much works okay so I can activate it and then use it so you're going to see that I could do things like let me do this we can set up things like a site icon we could set up like site tiled galleries things like that I can activate these different things if I want to we actually have sorting on the right over here so we could say hey, show me all the social media stuff you'll d'oh this is the big one right here extra sidebar widgets okay, I'm going to activate that okay, now you can tell it's active has got the little blue bar you can always come back in here and it'll tell you can always either deactivated or do it's called configure it configure sometimes gives you some settings to work with okay um if I click on configure actually you'll see that it's going to go back over to the widgets paige this is what we just did and if I take a look here now you're going to see we have a few extra okay so it kind of opened him up notice what is go what we got now we've got twitter we've got facebook you know we've got a lot of gravitas ours we've got a lot of the different things that we're gonna want to do okay a gallery we could put a gallery in the side bar just really pretty cool so what I want to do is this I want to add maybe like twitter okay let me show you this I'll see twitter timeline now the great thing is if we find one of these widgets and we want to add it to that sidebar we don't have to drag it over there you could drag it but I always miss so you can always just now click on it let go and just tell it where to put it which is pretty sweet so say let's go like footer left sidebar okay and I'll add the widget now all it's doing when I do that is if you look over here it's just putting it into that side bar area and letting you added it into your thing so if I come in here you're going to see that a lot of things we can change but I guarantee you're gonna get to a point where you're going to look at and be like what can I and the answer will be no without going into the code okay so you're going to see that it's got it all set up now what I want to do is I want to actually make this thing work. You guys going to see there's a width in here? There's a height we can set up and there's numbers of tweets shown of course we actually have to tie this to our twitter handle, right? Um and one of the things that this actually does you need to create a widget, it tells you exactly what to do, so you need to actually go to twitter. How many of you are on twitter? That's a dumb question I s so you gotta go to twitter dot com you got it log into your thing and then you create a little widget, okay? I'm just gonna I'll show you real quick, it'll take a second take you're pretty easy to do. I'll go out to twitter on let's see right here there's my twitter thing I am asked brian would dot com or aspirin would? And the idea here is that once you go in here, you're going to see that we have our settings are profiling her settings right up here and I'm gonna go to the settings themselves, so go to settings so profound settings settings there might be another way to access that, but that's where I usually do it and you'll see if we scroll down a little bit we'll see widgets I kind of need this there's so much in these social sharing applications that just it's crazy you can now go create a new one and tell what they look like colors with the pelline there's a lot of cool settings I made one just for the sake of time here so what I can do is this I can basically go out and say let's edit this thing and this is the really weird thing um if you look up top teo get this over to wordpress you have to grab you guys see this number right up here kind of weird but I have I don't find it anywhere down there maybe it is maybe I missed it but that's the number we have to grab so I'm actually gonna go in and copy that I'm gonna go back over to our log here and if you take a look you're going to see it tells you where to find it it says it right there the long number in the world and I'm just gonna paste it right here here we go and I can tell what do you want a header no foot or no borders at school you do your thing transparent transparent it's not gonna have that horrible color in the background of that they all have some kind of set it up I'll just say let's save it and then you guys can figure out let's add a color things like that the crazy thing is it doesn't say the whole page is a widget it just says itself right quick so you always expect I'm like waiting is it done is done it's already done so I'll go back out to my page and refresh and now this was actually in the footer you guys can see there it is right there so you got to follow me on twitter and you're going to see that it is actually everything is pretty much already responsive now we can set the wits and the heights and different things like that if we want to we could set that in the actual widget itself so but this is the kind of content that we have that we can start oh edit and work with these widgets are awesome it really can be a lot of great things we could do um let me let me make this a little bit bigger so we have you looking here we have uh don't ever use the ones called retired okay you figure out why maybe they're not working anymore or you know something like that so but just try some of these out this is not that is not the only place you can get them okay? You can get a lot of times when you install a plug in it's going to give you a widget not always, though. That's the thing some with some plug it put some plug ins or not, what are called digitized? Most are that means original show up. Okay. All right, so does that? Does that make sense? Faras working with widgets, we've got some things we can do. Once again, you'll notice that this is the foot or left the foot or right totally blank just because I didn't put anything in there yet. So once I put stuff in, it'll show up. Okay? All right. That's working a little bit with widgets. You have any other questions on witches? There's, there's. A lot we could do there. Yeah, jim, I've got a few questions. How do you start the conversation with clients? We have people out there there are going to be designing their own websites for themselves, right? So they're their own clients, but we also have a lot of web designers out there that they're going to use your class to build websites for other people what's that discussion that you have with your clients when you talk about widgets and functionality that you add that potentially might get retired. Yeah, you know, it's it that that's a phenomenal question, because you're always there's always a chance that something may not, in the future work you know, I mean, I actually hung my hat on a form plug in, uh, that had a great rigid I just dropped it in there and I used it for, like, three years on themes for clients. The developer decided just not to do it anymore, just through basically said we're done so the next version where press it stopped working, you know, one of those things that you just have to let your clients know that, you know, in some cases, uh, I almost don't tell them what I'm using as faras plug ins and widgets and things like that because to be perfectly frank, as soon as I open up that box that door, the questions come in, the the analytical let's look at this thing now, then, oh, can you fix it? So it never breaks, you know, things like that, just, you know, you can't really do okay, I'm not saying like, your clients, and I'm not saying hide the truth. I'm not saying till don't tell them things, but you as a developer, you as the person creating this, they're hiring you for a reason, because you know what you're doing. You hope you know what are you learning on the job you're learning on the job, right? I did it, I did I build so many sites where I was like sure I could do that let me go to the codex and start looking and see how I could build a block uh but you're basically trying to make it so that you are the champion, you're the resource here to develop for the person the designer that's building this thing and they're trusting you and you are the person that they're going to the reason why they're going to you is because you say you can do this so the fact that you know they're not going to really question a lot of times in this kind of stuff they're going to say it doesn't work isn't working that's what I care about can I added it? Can I go in and change it? The only other conversation or part that maybe may happen and I'm going to stop here but uh is that if you give them the keys to the kingdom, I've had to do that. All right? Maybe they don't want to pay you anymore all right? That's actually great a resource to be on, you know, a contract to be able to edit, they don't pay you anymore today they're bringing in house where they do it themselves well, if you use some kind of plug in or something that you know they meant not might not know how to use or just are familiar with or just don't like that's another conversation you know I mean so I tend to stick with either plug ins that a lot of people used that I know we're going to work that have been around for a while you know that type of thing uh oh and keep it that way or I built it myself which is further it more advanced down the road so for that kind of answer is that yeah, you see a widget for instagram and some of the newer social media so would you just build a custom one using the custom link or what would you do we there's there's several that's a great question as faras like let's say you don't see something on the left hand side here that is a widget something like an instagram or something to that effect we can at times you can actually use what's called the arbitrary text and actually insert girls and things like that ah feed that they give you you can try to do something like that most people are going to go toe a plug in and there are like social media feather I'm not trying to sell plug ins I'm just trying to say there's a plugging out their social media feathers a really good one and it just it's got a billion social media visits and things you can use. So and it makes it dead simple. So.