From Dull to Beautiful WordPress Theme Using Widgets – YouTube
And we are really starting to get into the good stuff now. In the last video I showed you how to upload and apply a parent and a child theme and this is the demo for the theme that we purchased and this is what ours looks like. So you may be asking yourself why does ours look so boring and yet we spent all this money on a theme and it doesn’t look like that. Well the reason why is because we’ve got some work to do. And I want to introduce you to a new concept one that we haven’t talked about yet and the new concept I want to introduce you to is something called widgets. So if I click on widgets you see we’ve got this header right, primary sidebar, front page 1 2 3 etc.
Alright we’ve come a long way since the first video and now it is time for you to start thinking about your website being broken up into pieces or divisions or divs for short. So you’ll note that as I mouse over certain areas they turn this color blue, there’s a div, there there’s a div there and another one and another one and you can you ignore all the stuff over here you don’t have to worry about that stuff yet. There’s a division right there, there’s a division right there and so on and so forth. Each of these pieces are broken up into divisions so building from that if we go and we look at Studiopresse’s how to on how to set up the website you can see that they’re breaking the website up into five different pieces right here: the red piece, the picture piece, the peace with the 3 icons this piece right here and then this piece down here which is actually our most recent posts which is what I’m going to be doing with my site. And then of course they have detailed directions on exactly what you’re supposed to do with each of them. But these little numbers here 1, 2 etc. correspond with front page 1, front page 2, front page 3, top, bottom etc. So the reason why this is important is because I want to introduce you to the concept of widgets. So widgets are essentially predefined divisions of the website and if we go and we look at our site well nothing’s really defined yet. So I’m going to teach you a little trick if I go to dashboard I can go straight to widgets by clicking here .Okay so I’m going to mouse over text and I’m going to left click and I’m going to hold and I’m going to drag and I’m going to drop this into header right. Now it is extremely important that you’re using either Google Chrome or Firefox for this, do not use Internet Explorer to make changes to your website just not conducive, not going to do it. So this is header right; so in my title I’m going to type in header right and then I’m going to save it. Now here is primary side bar, I’m going to grab a text and I’m going to drop it over here and I’m going to put copy and paste it and make sure you hit save. Now I am going to speed up the film while I do all rest of them so that I don’t bore you to tears.
So now that you can see that I’ve put text in every single one of these divisions or areas of the website and you can see that for the footer widgets I put 3 of them. So let’s see what that looks like when we get over to the site. So now we have kind of a reminder when we actually go to the site where everything is going to end up. Here is our header; right? That is where the front page 1, that’s the title and the body, title and the body and you can see that now our website with just adding that dummy data you can see that our website is already much closer in appearance to the theme that we purchased; we’ve just got more to fill in. so starting at the top they have a menu bar front….the section front page 1. Let’s go to dashboard, we can go to appearance, and we can go to customize. Let’s go to menus and select menus, menu location after header menu let’s elect it and put the main menu there and there is the pretty menu right there. And then if we come down to the bottom, look there is no footer menu but if we wanted to put our main menu right there as well, there is our footer menu which is nice because people…you want to give people an opportunity to click around as they see fit. So now we can save and publish. So now we have that portion right there looking like theirs.
Okay as you can see our front page 2 section does not have an image their front page 2 section does have an image; so how can we fix that? Let’s go back to customize and we’ll come back to not header image because the header image we’ll actually put it up here as if we want to put a logo up there, but what we’re looking for is the front page background image and I’m going to select that. Okay so it needs to be 2000 pixels wide and 833 pixels tall, so off-camera I went into Photoshop and I took a couple of images these ones and zeros and then a pretty swirly thing and I just kind of combined them as an image and I made it 2000 by 833. So let’s go ahead and select a file and I’ve actually already uploaded this and I can chose file new and it’ll pop it in there and then I can save and publish. So now I want more information here and if I go to the front page 2 directions, it essentially tells me what I need to do and it even gives me the code there to put the button and I’ve actually already cut and pasted what I want to put in there. So what I’m going to do is I’m going to go back to widgets front page 2 .I’m gonna keep my text as it is and I’m gonna go ahead and paste in but I’m not going to use the visual tab I’m actually going to go to the text tab. Remember from the previous video I don’t like the fact that this is text it should actually say code. And I’m going to go ahead and paste in my code for what I want it to say and I’m going to go ahead and get rid of this title, I don’t need the title.
So now mine’s going to say get up and running with your own WordPress website with our clear yada yada yada blah blah blah and I’m also going to make the color 000 which is black and H2 means that it’s going to be in a big font or large font. So if I hit save and then I go back to visual you’ll kind of see what it looks like here and then if we go back to the website by hitting visit site you can see this information here and then of course the button is not functional at this point.
So I am at a point right now where I just don’t have enough content on my website to justify this section right here I think maybe later when I have a whole bunch of post written and I’ve got…. I can break my post down into categories and that sort of thing. I’m going to include that but right now I just see this as taking up too much real state for my particular site. So I’m going to show you that you don’t want to use all of these sections if you don’t want it use them. I can get rid of this front page 1 stuff and I can pop everything up meaning this image will come up and should come fresh with this bar right here. So let’s see what happens when I go to widgets and I go to front page 1 and I just get rid of this text all together and come back to the site. So now everything’s been moved up, I still think this is way too wide and it might have something to do with this right here. So let me go ahead and get rid of this for now, back to widgets, let me get rid of my header right cuz now I know where this stuff goes. It’s fairly intuitive so that shortened that up a little bit and now I’ve got my image with my main theme here and let’s see here now I’ve got to work on front page 3 top and front page 3 bottom. Alright so moving along and looking at section 3 this is the front page 3 top section that’s where they had their free icon, so this is essentially 4 columns: there’s a column here, here, here and here and they all look like they’re 25% of the total width of the body of the site which essentially goes from here to here. So it looks like they’re going to use 4 text widgets; it’s what I’m guessing. Front page 3 top first text widget… okay so yeah they’re using 4 text widgets. Alright so we’ve purchased this theme let’s not reinvent the wheel. So as you can see each of these text widgets have some code in it and don’t worry about the code because they’re giving us the code and it’s right here. So why not just click in there….i just cut the base of this code. So now let’s go back to our site and let’s go back to our widgets. Ok so for front page 3 remember they had 4 text widgets so let’s…. we have 1 text let’s find a second one, we are still on the third one and we are on the fourth one and I’m going to go over to instead of using the visual tabs, I’m going to use the text tab, I’m gonna paste in that code. And if I look at the visual you can kind of see what it looks like so I’m going to go ahead and hit save. Let’s just see what this looks like, and there it is. Alright so they’ve got this one here essential tools for digital marketers; that is their first text widget.
So let’s go back to the directions. First text widget; who wants to dabble with HTML code? It’s just the easiest, easiest, easiest tag you can, you can get, which is this h2 tag. h2 basically says make it look really big. There’s actually an h1 tag which is bigger than the h2 but essentially h2 says make it, make it really big and you use this less than sign h2, greater than sign and then you put the text that you want to put in and then you close; this is the closing tag right here. So HTML tags always have an opening tag and a closing tag. So don’t be scared of the HTML we’re just cutting and pasting it.
I’m gonna go back in our website remember this needs to be in the first text widget. So we’re going to go to widgets, remember we’re working with page 3 top and we’re going to open it up and I’m going to go ahead and go to the first one because the first one is the one that’s furthest to the left and I’m gonna click down in here, I’m in the visual tab but I need to jump over here into the text tab which is code. And I’m going to paste it in, essential tools for digital marketers. And I’m going to make this appropriate for my website, save time and money doing it yourself and I’ll go ahead and save and then close. So now I’m going to cheat and I’m just going to come down here I’m going to go to text and I’m just going to copy this right here and save it and close; I’m gonna go to the next text cuz there’s nothing there, I’m going to go to the text tab or the code tab and hit paste and save it and close and then go to text, paste this in and hit save. Now our section 3 should look just like their Section 3 and that we’re going to have a text area to the far left and then 3 icons to the right of that and there they are. And now ours all say the same thing cuz I cut and pasted the same thing but I just want to show you how easy that was. So what happens if we want to change our icons? We want to make it say something different. I’m going to go back or first of all what I need to do is I need to make my own icons and I actually have made my own icons, once again I went into Photoshop and I did that with the camera off so that I won’t waste your time. But I’m gonna go to dashboard and then I’m gonna go to a place we’ve haven gone yet which is media. And I’m gonna go to the library and this is everything that I’ve uploaded so far and what I’m going to do is I’m gonna got to add new, select files and I need to select the files that I have to use and I’m gonna use these 3 icons over here. Alright and now what I’m going to do is I’m going to click on one and as you can see it would show me what the URL is. So I am going to select the URL and I’m going to copy it and then I’m going to come back and then I’m going to go to widgets. And I’m gonna go…. there is the one I just have my tittle and I’m gonna go to my second one and I’m going to go to text. And you see this ”src”? This basically says image class and it says align it left, align the image left; that is simple enough. And then ”src” stands for source; where is this file? Well they’ve used that file, I’m not going to use that file; I’m going to delete that to where I just have the 2 quotes and I am going to paste in mine. And instead of it saying rain maker and save, close and now I have my section.
Ok so now I am going to go to the front page 3 bottom section and click on it, see how they’ve done it. So looking at page 3 the image is going to be on the right which means is going to be the first widget and the text is going to be on the left which is going to be the second widget. So let’s go back to our site and our first one there is the image right there but that is their image lets upload our own image. I’ll go media, add new, select the file, grab an image, pop it in and now I’m going to go to edit and I’m gonna grab the URL; there’s image I’m going to use if it will fit. What I’m going to do here is I’m gonna click if it doesn’t select all the text and I’ll do a control a and then I’m going to do a right click ,copy. So now let’s go back to widgets and as you can see they’ve got the very image in there. So it’s the same thing image, source, equals quote. I’m going to take everything out between the quotes and delete it and I’m going to add in mine and hit save and I’m gonna see what it looks like. There is mine, it might be a little bit long, I’m not sure exactly whether it will work or not. I’m gonna go to save and close.
Okay so now let’s do the right hand column and we’re going to cheat. This is not hard you do not have to know how to code to do this stuff you just have to know how to cut and paste code. So here’s the second text widget, come down here grab all this code down here, copy it go back to our page here, second one, go to text and get rid of the nonsense we’ve got in there. Paste in some new nonsense, get rid of the title, hit close, go back and there it is.
Ok the next section they’re not using a text widget, they’re actually using a featured post widget. So let me show you how easy that is. I’m going to go to my widgets and then front page 4 instead of this text I’m going to drop that out and I’m going to go to Genesis featured post and I’m gonna drop it in there. And I can give it a tittle, call it from the blog; right now I’m going to do all categories. There are 2 columns, so let’s show 3 rows; so let’s make it 6. So I’m gonna go ahead and also select show post title and let show an Excerpt up to call it 100 characters and then after that say read more and then hit save. Okay so we think we have 3 posts to show, so let’s go back and see, going back to visit site. There is our 3 posts: that one, that one, oh there is 4 posts. Now as you can tell theirs are in 2 columns and have buttons, theirs are a lot prettier than ours. So we can learn from them by going to front page layout, going to front page 4 and see how they did it. So what they did different from what I did was I said show 6 posts they are showing one post but they are doing it 4 times, which is kind of a neat idea. So let’s go ahead and copy what they’ve done, instead of 6 we’ll say 1. So there is our featured post and I’m gonna not give it a title this time. Alright so featured post once, featured post twice, tittle, Excerpt 100, read more, save and I’m gonna do this for the next 2 and speed up the film. Ok and then another thing that we need to pay attention to is the Offset so that it doesn’t show the same post over and over again, the first one we want to show the most recent post so don’t offset at all. The second one offset 1, then offset 2, then offset 3. Otherwise it would look like this; all of them are exactly the same. So what I’m going to do is I’m gonna go back to widgets, I’m gonna go back to here and this is going to be an offset of 0 or a number, uh that’s an offset of 0 so show the most recent, save and close. The second one, offset 1, save and close. Then we should get our 4 posts and there they are and people can click on this and they can actually get to those particular posts…. and there it is.
So at this point I think you get the general gist of using widgets to pretty up the front page and basically, essentially slide in whatever you want to slide in. I mean you can do anyone of these widgets like for example our primary side bar we didn’t do anything with it. What we want to do is maybe we’ll put in…. maybe for our primary slide bar we’ll throw in recent post and we’ll just save it and underneath recent posts we’ll throw in well i don’t know a search bar and then maybe underneath that we’ll throw in a bogus calendar just because it takes up space; save-save, close-close and I will show you where our primary side bar appears. It doesn’t appear on the front page but it appears on all the subsequent pages. So when you go here there is primary side bar. So this is just taking up space for right now, so we are going to add in some plugin and some feature videos that are going to actually fill this space with something that is actually worthwhile as opposed to just kind of taking up space like this is right here. Obviously in the future we are gonna give some functionality to that button right there but I think you’ve got a pretty good idea of how to use widgets to lay out the structure of website. We didn’t do anything with photo banner, we didn’t do anything with the footer widgets, we will be able to fill that stuff in with some worthwhile contents later as we add in plugins. But for now I think our website has made some descent progress, is not that blah looking thing that it was when we first started and there is a ton more that I want to do. Hope that helps you understand widgets and the importance of widgets to setting out the layout of your website and making it pretty. There is just so much more that we can do to this website and we are going to in future videos. So please like, comment, subscribe and I hope to catch you in the next video,
Thanks
Leave a Reply