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.

Understanding WordPress Widgets

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - ,

Applies to -

Good Morning and welcome to lesson 12 in this class on how to build a Professional Website using WordPress and Thesis theme 2.3. In this lesson we are going to work with plugins and widgets.

What is a Widget?

The first question to answer is “what is a widget?”. Well, a widget is a module essentially that adds content or functionality to a page. And widgets can only be placed in a widget area.

Examples

Let’s look at the example of our demonstration site. This is a widget that shows recent posts. This is a widget with contact information. This is a widget that shows a photo gallery.

This is not a widget although it looks like one. This is a widget and it’s A little Call to Action that we created. It’s not an Agility skin Call to Action, this is actually a widget.

This contact form is in the form of a widget. So there are all kinds of things that are widgets on this WordPress site that we have been building.

Let’s look on BYOBWebsite for a second. Each of these are widgets on this page and then if we go to the courses, Start Building Your Website Here, this course list is a widget. If there were related live answers to this they would be here and that’s in a widget.

If we go to this course these lessons shown are in the form of a widget. If we go to a lesson, this is a widget. This resources is a widget. And lessons in the course is a widget.

So there are all different kinds of widgets and they do different kinds of things. But generally speaking what they do is display some kind of content on your page, usually.

Where Widgets Can Be Placed

Well, you can’t just put a widget anywhere. A widget has to go inside of a widget area. Widget areas used to be called sidebars because that’s what this area was. In fact, when I started with WordPress the idea of a widgetized sidebar was just starting. Most sidebars were hard coded. You wrote some code and that’s what ended up in your sidebar.

But then they decided to create this thing called widgets that you could put in the sidebar. And that was the only place they ever imagined that you’d use them. For years and years that was the party line, the only place for widgets was in this area here on the sidebar. Now that’s all gone and the obvious answer is that you can use widgets anywhere you want to put a widget area.

Widgets Panel

But every widget area you have will show up in this widgets panel you can see me pointing to here. The widgets panel can be found under Appearance and Widgets.

On the right hand side here are the widget areas. Often the name of the widget area is created by the theme, often you’ll see it called sidebar or sidebars or widgets. They get different names depending upon who is naming them.

But regardless of who is naming them in the widgets panel, the sidebars or the widget areas are over here on the right and the widgets that you can put in them are on the left.

This is a fairly minimal site but if we go to the widgets panel on BYOBWebsite, well actually I forgot the new BYOBwebsite doesn’t have that many sidebars anymore. Before I moved to Thesis 2.2 I had about 30 widget areas. Now I just have special widget areas. I don’t have as many as I used to but I do have lots more widgets available to me.

Plugins Can Have Widgets

There is a sort of base number of widgets that come with WordPress but then lots of plugins that you install will also show widgets. In fact, Agility Skin has its own widget called Agility Page Specific Content widget. You may have more or less widgets in the context that you are working in than you see here.

Panel Organization

In any case, what we have right now is all of our widget areas are empty. What you’ll find on the widgets panel is the following.

  • Available Widgets
  • Widget Areas
  • Inactive Sidebars
  • Inactive Widgets

Looking at our example you can see the available widgets here. Then the widget areas and then if you scroll down you can see inactive sidebars. That means sidebars that were created by some other theme and that are not currently being used. And then you have inactive widgets.

The inactive widgets are widgets that at one point or another you were using but rather than deleting them you’ve moved them down into this inactive widgets area so that you could use them in the future.

How to Add a Widget to a Widget Area

It’s slam dunk simple to add a widget to a widget area. You do it simply by dragging the widget into place. So let’s take this categories widget and drop it into the main sidebar widgets. Now once you do that you end up with essentially a set of settings.

Widget Settings

These settings are different from widget to widget.

Title

The first part of the setting is the Title. Some widgets automatically add a title if you don’t put one in. Some widgets give you the choice of displaying or not displaying a title. You’ll have to look to see what the case is for each widget.

In this case, we’ll call it Categories. This widget will automatically display the word Categories as its title if you don’t put something in. And in this case, you can show the list of categories as a drop down. You can post counts beside it and you can show the hierarchy.

In our case we’re going to leave them all unchecked because we don’t have hiercharchy so it doesn’t matter.

Agility Skin Styling

And then the Agility skin adds a couple of other things to this. It lets you select either the supplemental style or supplemental 2 style. And that is set up inside of skin design. We’ll be styling widgets in this lesson but for now let’s just come over to skin design to take a look.

In the widget area here you can see you’ve got supplemental widget styles and supplemental 2 widget styles and you can select the supplemental widget or supplemental 2 widget style from here to apply to this widget.

Or you can add your own custom class. This is for professional web designers who are writing custom CSS. This let’s them add a class to the widget so that they can add their own styles to that specific widget.

Saving Settings

Bear in mind that the are sometimes settings here that you have to save.

How to Move Widgets

And if you’ve got more than one widget. Let’s say you’ve got that one and Search. You can rearrange them simply by doing that, just dragging them where you want.

So anyway, those are widgets and that’s how they work.

How to Make Widgets to Inactive

If you have a widget, let’s say you have a text widget that has a whole bunch of stuff in it and you may not want to use it now but you don’t want to throw it away, you make it inactive. Simply drag it down here to the inactive sidebar widgets and it’ll save it so that you can drag it back up later if that’s what you want.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment