In part 7 of our Free WordPress Video Tutorial series, learn how to use WordPress Widgets on your WordPress website. In this video, I will be showing you how to use and create wordpress widgets. Specifically, we will be looking at:
1. What are WordPress Widgets?
2. How can WordPress Widgets be used?
3. Example of WordPress Widgets in action
At the end of this video, we’ll have you using WordPress Widgets on your own website quickly and easily.
[box]Video Title: How to Use WordPress Widgets
Video URL: https://www.youtube.com/watch?v=zE4-ekBucqw
Accompanying Course: Beginner’s Guide to WordPress – Web Design Course[/box]
< Go Back to Video Tutorials List
Transcript:
So in this video, what we are going to be looking at is actually how to install or how to use widgets. So in this a very general review of what we are going to be looking at specifically is, first, what are widgets, how can we use them and secondly, actually how do we sue it. Let me show you an example of actually how to install widgets on our example website.
And so just to get right into it. What exactly are widgets? And we just put very simply, they are what we can use to customize our website. They are just an added, addition to how we can actually customize our website, whether be in side bars, whether it be adding new features like that. It provides unique features or display to our actual website. And generally the most typical example of when widgets are used, although they can be used much more often or much different cases than this is often in sidebars and also in your footers.
So I am going to show you exactly just the basic step of how can we actually add widgets in your sidebars and also how to add widgets in your footer and that can kind of give you an idea of , you know how exactly can use widgets.
To just get right into, how we are actually going to use widgets, how we are going to, give an example of it. So if you remember correctly, this is what our example website looks like. So simple very simple. Not much besides just a post and also a sample page. If you look at the bottom, this is what our actual footer is.
We see that there really is nothing to it and also our sidebar right here. And if we look at the demo website, this is what the actual demo website, the genesis or what our theme is, the demo, we see that, there are several widget areas. This is actually a widget up here, this menu item. I am not going to show you that yet. I am going to show you that in a little bit.
This is also your widget area, which is your sidebar widget area where you can add additional widgets. You have social icons. You have recent posts. And other widgetised area. I guess you can call it as the footer area right here. So you can.
I will show you actually how to add this right here. We are going to start off just by simply adding sidebar widgets. And then we will see exactly what it is right here. So what we are going to do is we are going to log back in to the back end of the website, and remember, that’s our domain name dot com slash wp das admin.
I am assuming that you already have up to this point, you know have all the posts and pages and kind of your theme installed already. If not, you can actually go back to the previous videos. In order to actually install widgets or see how they look like, what we are going to do is, we are in the backend of wordpress, we are just going to go into appearance and we are going to go into widgets.
And we will see exactly what widgets can be used for and how they look as well. And so remember how I said that we wanted to add to our sidebar. We will start with that first. The first thing is going to be just our primary sidebar. And let’s say we want to add a recent post and although I think we have only two posts, what we are going to do is simply just drag and drop that widget area.
So that’s what these are. These are little widgets or little boxed areas that have been pre sanctioned to have these certain functionalities. As you can see these different things and you can read what each of these means, for example you want a RSS and choose form any RSS or specifically your RSS FEED. Recent comments, login area, things like that.
For us, we are going to just start simple. We are going to start with the recent post. And I am going to make sure to title it, say how many post I want to show. This has 5 posts to show. But we actually have two. So that’s probably how much we are going to see and just click save. So we back to our website and what we are going to do is we are going to refresh it.
And we will see it right there. We see the recent posts and we have our 10 tips for scoring great deal on cruises and our original hello world post. So that’s exactly how sidebar widgets, or how any widgets, how you add them. So the next thing I want to show you is actually, we see on our demo website.
We could add additional widgets in the sidebar, as many as you want, really. We will try to keep just the most important ones, kind of what you expect your users to be able to read or want to read. And so recent post perfecting to add in the beginning. Let me just show you how to add these different types of widgets down here.
We will see. This is our footer. We see the recent posts exactly the same so, you know, not much to that but. For example let’s say that you want this text widget. This is like, for example, if you want to put an about us page or something like that, or about us, a little portion in your footer.
So we are just going to go on the backend and if you can imagine, it was broken up into three blocks, footer 1, footer 2, footer 3 and this is highly dependent on what your theme actually is. Since we are learning from the genesis theme, it will be the same so what we are going to do is we are just going to add a text widget.
And a text widget is, you can literally add any text, whether that be HTML or basic content and I remember I copied something over. So this would be, let’s just say an about me. So we paste it in, whatever text you want to talk about yourself and we are just going to click save. And then we are going to go back to the demo website and we are going to see the footer 2, second third of the footer is your recent post.
So let’s just do that as well. Let’s try to keep it consistent, just for simplicity sake and we will just call that, recent post. We will save that and what I am doing here is I am clicking this little triangle to just minimise things, just to keep things a little bit, not as crowded for myself, but you can keep them open.
The third one if I recall correctly, it is search and tags and we do have a couple of tags. I don’t think we have too many tags. And so we will see how exactly to add those tags. It’s going to be this tag cloud right here. A cloud of your most used tags. And yeah, we can just call them tags and the just save it and then we want to add a search bar below that.
That’s what the demo says. And we will just type search. And when we say all that, make sure that you have actually clicked save on each one. Otherwise it actually won’t show up. We are going to refresh our actual website. And when we scroll down, we will see that we have an about me page and this is just an example of text.
We have a recent posts with our two most recent posts and we have out tags. We have these three tags that we have tagged our post with. And we have a search. So everything that we wanted to add is all right there. It still looks kind of basic, especially because there is no menu items. It’s actually going to be on our next lesson.
But the one thing that I do want to show is because a lot of people do want to know, how do you monetise a blog? If you want to make a blog, also, you will want to add, for example, maybe an advertisement or something like that. So if you want to add an advertisement, for example say we signed up with Google ad sense, that’s probably the most common.
How do we actually add that in? It’s actually very simple. So we are just going to drag over into sidebar. Say I wanted it be right in that top right corner. All I am going to do is add a test widget and I am just going to get my Google AdSense code. I actually pasted it over here in just a normal text editor.
And we are just going to save it. And let me just make sure I remove that extra space and the title. And you can say, if you want to, you can say, our sponsors or whatever it is. You can leave it blank without a title as well. And that’s probably actually better. But we will see what it looks like.
So our sponsors and it has this simple ad. So it’s exactly where we wanted. Now for example, let’s say we wanted to have a social sharing, for example in the demo website, we have these social icons and these are cool. But this actually involves adding an additional plugin to get this functionality.
So I am not going to show you how to do that in this lesson, because the next lesson is about actually how to use plugins, how to install and things like that. So I will save that for the next lesson. But let’s say for example, this is actually our main website, wpforall dot com. Say we wanted to add these kind of follow us with these little social icons.
And so this is a little tricky. But what I ultimately did is I uploaded these. Like I showed you before, these are just pictures. These pictures, I can give you the actual picture files to upload. They are actually free. Readily available online.
All you have to do is upload these. And so it’s basically similar. I don’t want to show you the specifics of it. Just simply because that’s not this video is for. I just want to show you how you can maybe utilise your sidebars or widgets specifically. And they are just some HTML code that is right here.
And that’s just kind of displaying the pictures. Literally it’s just displaying the pictures and we are just going to have another title and we are going to save it and when we refresh it, we will see that you have our sponsors and we also have our follow us.
So underneath them. They are all just basic pictures and so when they click on it, it will actually go to our twitter page for example. So it will go to twitter dot com slash wpforalltv. And that’s exactly what we wanted to go to.
So that’s a perfect example of how widgets can be utilised. I will go into more detail about actually, maybe how to customize with additional plugins in the next lesson. But for now, we can actually see kind of how we can bring functionality and design to our website using these widgets. And like I mentioned before, some of these other areas, for example this top right is actually a widget.
If we look right here, the header, that’s another widget. But I am going to save that for. For example if you want to add a menu item, that’s what I am going to save that for. So I am going to save that for a few lessons down the line.
But now you can see what sidebars are and actually what widgets are and how we can utilise them.
So in the next lesson, we are going to be actually looking at plugins, how to install plugins. And some of the more popular plugins that I believe that every website should have.
Leave a Reply