Topic Progress:

Course Progress

Get Access To Over 50 Free Videos  To Learn WordPress

4: Adding Sidebar Widgets

Running Time:  11:18

Don’t be confused between what a widget is and what is a sidebar. Just think of a sidebar as a container that holds any number of widgets. (Woa, that sounds confusing so watch the video).

While there are some standard widgets you’ll find that it is your theme which sets the number and types of widgets you can use for your site.

Widgets can do a lot of things but they usually are tied to the blog and make it easier for users to access older posts.

Useful Links

Here are two plugins you may want to use for your site.

  • Content Aware Sidebars – Unlimited Widget Areas
    Displays different sidebars (and therefore different widgets) depending on the page a user is on. I’m using the premium version for this course and it’s fantastic.
  • Site Origin Widgets Bundle
    If you need more widgets than those that come with your theme check out this plugin. While I’ve not used this, Site Origin is a well know company in WP World with their Page Builder plugin.

Transcript Of This Video

Now let me talk to you a little bit about widgets. Widgets are commonly used in two places, and one is for a blog’s sidebar such as we see here on my prototype site, and the other which I’m not going to demonstrate now– Widgets can be used to help build home pages. That’s for another day, right now let’s focus on the most common use of widgets, and they’re used not just in a blog but specifically for sidebars. In the 2017 theme, there is a right sidebar, and I currently have several widgets in it. This widget over here I’m not going to even deal with during this demonstration, because that widget is created by the use of the Jetpack plugin, so I’ll do that when we get to the Jetpack plugin. Then I’ve got a search widget, so that would be the second one over here, and then a categories widget followed by a recent posts widget, and if I scroll all the way down to the bottom I have a footer widget. Here’s one right over here that deals with links, and then one over here that gives me the copyright and an image. It’s your theme that will determine the types of widgets and their placement on your site.

Keep that in mind when you’re working with widgets. Let’s do that right now. I’m going to go to the site that I’m working on while I already have widgets in place, and I want to see if I have anything here in the footer. No. So, let’s get to work on setting up the widgets. OK, I’m going to go over here, and I’m going to go into “Dashboard.” Widgets can be found under “Appearance,” “Widgets.” Here’s your widget management page, if you will. On the left-hand side right over here are the available widgets, and on the right-hand side are the sidebar areas to place your widgets. If you’ve noticed I already had widgets in place, and I had Surge and Recent Posts and all these other ones over here, which I’m not going to us, so I want to start by getting rid of all these. Click on the term “Search,” and I’m going to delete. Now it doesn’t mean I can’t use the search tool, and you’ll see that I can in one second. It just means I’m removing it from my site. Delete. I’ll show you exactly what I’m talking about in one second. Delete. I always like to start fresh, and it’s my theme that set this all up, to begin with, so now I like to get rid of them and put the widgets in that I want because a whole bunch of these widgets don’t mean anything to me. So, now I don’t have any widgets in my blog sidebar. To prove the point, just in case you didn’t believe me, and why wouldn’t you–? If I go over here to the blog, you’ll see there are no right sidebar widgets. They are gone. Now, I don’t recommend that you do this because widgets are really useful for letting users have access to older content. So, let’s put those widgets back in where we want them to be. I could go again to “Dashboard,” but look at this, they already have a link right to the “Widgets” section of my WP admin. How nice is that?

I’m going to use the widgets for my site that I want. One was that search widget, OK, so I’m just going to grab this. This is a drag and drop experience. Look at that. I’m not going to give it a title, and I’m just going to leave it just like that. Then I had another one for “Categories.” So let’s do that, “Categories.” OK, that’s fine. I can do a little configuring over here, but I’m not going to put the title in. I can if I want, but I can leave it the way it is. I can always come back and put in a title. For now, I’m going to do “Display as a drop down and show the number of posts.” OK, I’ll do that, and I’m going to save. Whenever you make a change to your widget setting, always save it. That’s important. I like to fold it up to get it out of the way, and the other one I like is “Recent posts.” I’m going to go down over here and finally go “Recent posts” right over here, and I’m going to slide that up over here.

I’m going to put it right in position. Notice I can move them around. So I want five recent posts to show, I’m not making any changes, so there’s nothing to save, but what I mean by “Move them around” is I can change the order in which I want my three widgets to appear. Right now it’s going to be search, and the categories widget, and then the recent post widget. I don’t have to save anything at this point, and it’s done automagically for me. To prove that point let’s go over here and let’s go to the blog.

Now you’ll see I have that search widget, I have “Categories,” and I have “Recent posts.” I have this as a drop down, and I don’t think I like it as a drop-down, so let me show you how easy it would be to change that. I don’t really like that, it looks ugly, so I’m going to go back to widgets and let’s de-select this option over here to display it as a drop down. Again, make sure you save any change in the widget configuration. So, I just did that. Let’s take a quick look again at the blog. Much nicer. It looks clean. Now I’m going to add widgets to the footer, currently, there aren’t any, so let’s do that.

Let’s go to widgets now. Again, the number of placements or positions or places, if you will, on the page where I can put my widgets are determined by the theme itself. This theme allows for three different locations on the page where I could put my widgets, other themes, specifically premium themes, may have many more options than just three. In fact, they usually do so for the footer widget. I remember I had a menu, but I have to create that menu, so let’s do that first. I’m going to go over here to “Menu,” and I’m going to create a new menu. To create a new menu, click on “Create a new menu.” Let’s call this “Footer menu.” Remember, you always have to name everything when it comes to many things in WordPress. So, let’s create the menu. Good. Now I’m going to pick out the pages that I want in the menu, so I want the blog page, and I want “Harvest,” “Plant,” “Prep,” and “Home.” Perfect.

Now I’m going to add these to the menu, and I’m going to make sure they’re in the right order. So, “Home” would be first, and then I want “Prep.” We definitely don’t want this to be a sub-menu, so “Blog” is going to be at the end. Let me stick that down there. So, “Home,” “Prep,” “Plant,” “Harvest.” You’re not going to be– Sometimes it takes a little bit of doing to get these in the right order. Let me flip this over here. We don’t want that. “Blog” going over here. Let’s switch these around. If you have a problem you can always do this, click on that chevron. You want to go up one level. OK, perfect. There is always an answer for everything. “Home,” “Prep,” “Plant,” “Harvest,” “Blog,” perfect.

Let’s save the menu. OK, let’s go back to our widgets. For the footer, I have a menu to go in there, so I’m going to go over to custom menu, and I’m just going to drag it right over here. I’m going to give us a title, and you’ll see why in a second. You don’t have to title things, but– In fact, let’s do a better one. Let’s call this “Key links.” Now you have to pick out which menu you want in there, in the footer. I want the footer menu. I’ve created two menus so far, and I don’t want the main menu, I want the footer menu that created just for this occasion. Let’s save that and let’s have a look. So, I always like to look at things. Let’s go over to “Blog,” and we’ll see right over here– Looks like the footer one means on the left-hand side. Here are my links, so if I click on any one of these, they would take me to that page, “Key links.” That’s fine. Now if I go back to here–

You might say, “Wait a second. Didn’t you just put something in there?” Yes, I did. If you come back to the widgets page and you don’t see the widget that you just added, my suggestion would be to refresh or reload your page, which I’m doing right now. You’ll see that it’s there. So don’t worry about that, it’s there. The last one I want to do is in the second footer, footer two. There’s two different widgets I’m going to stick in there. One is a text widget, and it’s far away to slide it all the way up there so what I’m going to do is click on the text widget and here are the three different sidebar areas I could stick this. I said I wanted it to go into two, so I click on “Two” and add it. Now it’s over here in two, and I’m not going to do anything other than pasting the copyright for the site. I’m going to save this– Remember, I made a change, so make sure you click “Save.” I’m going to fold up this little window over there, I don’t want that, and now I’m going to add that cornucopia image. So, “Image–” Again, I’m going to do it this way. Sometimes it’s just a lot easier to do that, “Add” instead of dragging and dropping. I’m going to find the image that I want to add, and the image is already in my library. Click on that. Click on this. Away we go. Save, of course. Let’s go over to the blog. So we will have our second footer here, which contained two different widgets. One was that text widget, and then the other was the image widget.

All 6 Modules In This Course