Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Lesson 10 – Part 2 – Understanding WordPress Widgets

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Now we’re going to talk about widgets. You’ve already seen some of these in action because it’s really hard to start in a linear fashion and move step by step through setting up a site without jumping around a little bit. But now we’re going to have a more formal description of what’s going on here.

What is a Widget?

And we’re going to start off by talking about widgets. Let’s begin with “what is a widget”? A widget is a module that adds content or functionality to a page. It can only be placed inside of a widget area and it always results in something being displayed on the page.

Terminology – Use of the terms Sidebar and Widget

Let’s start with some terminology. It’s important to understand the terminology because it has gotten a little fuzzier with the use of Thesis 2.

Once upon a time, there were no such thing as widgets. But WordPress blogs routinely had sidebars. There was a sidebar template that you could add to your regular template and then you could put sidebar content in there. And then about the time I started playing around with WordPress back in 2.5 or something like that, they started widgetizing sidebar.

And so now you could have these widgets that you could drag the sidebars and sidebars were either widgetized or they weren’t. There was just one sidebar, right? It was the sidebar sitting there on the page, on the side. And at that point, the terminology was cast in stone. You had sidebars and you had widgets. And the widget was a little thing, a little piece of functionality that went inside of a sidebar.

Well, it didn’t take very long for people to realize that you could use widget areas for lots of different things. They wouldn’t have to just be a sidebar. And so sidebar took on the meaning of widget area rather than just something that’s sitting on the side. A sidebar could be anywhere, it could be horizontal or vertical. It can in fact, be in the middle of content.

It can be pretty much any place that theme designers think is a reasonable place to put a sidebar. And when you had this we were maintaining this distinction between a widget and a sidebar or a widget in a widget area.

Thesis 2 Use of the term Widgets

Well, when Thesis 2 came along unfortunately, they called these things widgets. And what they really mean is widget areas. Let’s go to the Thesis Skin Editor in the HTML section, and then to a place where I actually have a sidebar. Let’s look inside of this main sidebar here.

If you open that up, you can see it’s called widgets which lead some people to think that you needed one of these every time you were going to put a widget in place, which is an unfortunate conclusion or draw because what this really means is widget area.

So if you’re down here in the add boxes section and you are adding widgets, what that really means is you’re adding a widget area or a sidebar. You can use those terms interchangeably. And they are essentially a place where you will insert widgets. That’s what we’re talking about here, a place where you insert widgets.

The Widget Panel

Any widget that you have placed, you will have placed inside the widgets panel. The widgets panel is this and you’ll find it under Appearance and Widgets. The widgets panel has a number of sections.

Sidebar Section

Those are sidebars and the sidebar section sits over here. You can open them and close them by clicking on these little arrows. And sometimes, they’ll have a little description about where they’re being used, especially if you have a whole bunch of them. It can be useful to have a little description about how they’re going to be used. And in Agility, the main sidebar is the sidebar that shows up on all the pages on the right hand side.

Available Widgets Section

This is your available widgets section which means this is every widget that is available for you to drag into one of your sidebars or every widget that’s available for you to create new widgets from.

Inactive Sidebar Section

And this is your inactive sidebar. Now if you are working on a site that had sidebars once upon a time and you’ve changed to Thesis 2, it’s more than likely that you’ll have an inactive sidebar panel like this for each of the sidebar your old theme used. And inside of that box is the widgets that used to be in that sidebar. If you’re starting from scratch, chances are, you won’t have this.

Inactive Widgets Section

And then there’s your inactive widgets panel. And this is a place where you can drag a widget that you don’t want to throw away but that you aren’t also using at the moment.

How to Add a Widget to a Sidebar

The way you add a widget to a sidebar is you just come over here and grab one and drag it. For example, you can drag this page’s widget over here. Once you see those little dashed lines around the widget, you can drop it. You can’t drop it until you see those though. So if you come along here and try to drop it there, nothing’s going to happen. You have to wait until it tells you that it can take the widget.

When you drag a widget in, each one of these widgets does something specific. And we’re going to talk about that in a minute here. But when you drag a widget in, you routinely have at least one option and sometimes more options.

Widget Title

Now in the case of the page’s widget, you have the title and this is the title that will show up as an Agility, as an h4 tag in the sidebar. I’m going to actually have no title there at the moment but hit save. And then we’re just going to come back over here and refresh this. And because I have no title there whatsoever, it substituted the title and the title it substituted was pages.

Organizing Pages by Page Title

What I could do here under title is have important pages. And I can choose whether I should organize the pages by page title, by page order or by page id. I’m going to pick page order and you can also specify some to exclude but I’m just going to go ahead and hit save again and come back over and refresh this. And now, the title is important pages and these things are organized in a somewhat different fashion than they were before.

Creating and Arranging Widgets Example

That covers the basics of a widget and how the widget works. Let’s look at another example. You routinely will have multiple widgets in here, right? So let’s drag a text widget in here and drop it. And let’s just say this is a text widget. And then let’s go get some Lorem Ipsum text and put it in there. And save that, refresh our page and we’re not going to have a second widget down here, right? This is the text widget and here are our text.

Now I can change or rearrange the order of these things by simply dragging one up. And now that I’ve done that and refreshed this page, the text wiget is above that widget. So that’s how you drag widgets in and how you can rearrange them.

Create Multiple Widgets

Notice that when I drag a widget over here, I don’t lose the opportunity to create another text widget. I can create another text widget and drop it in here and here’s a second text widget. I’ll hit save and I still have the opportunity to create another one.

So these available widgets really are essentially widget patterns that are available for you to use to create your widgets. And if we come back over and just refresh it again, now there’s our three different widgets.

Add Widget to the Inactive Area

Now let’s say that you’ve decided that you don’t want this widget here anymore but you don’t want to get rid of it yet. You can take it and drag it down and drop it into inactive widgets and refresh your view. Now that widget won’t be here anymore but it will stay down here until you delete it.

Deleting a Widget and Storing one for Later Use

If you want to just delete a widget, you can just drag it and drop it over here. If you drag it and drop in the available widget section, it’s just going to go ahead and delete it. But if you drag it to an active widget, it saves that widget. And when you bring it back over to your page, it retains all of the information it had before. So that’s how you delete a widget and how you store a widget for later use.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment