Build Your Own Business Website header image

WordPress 3.9 Crash Course – Part 25 – Understanding WordPress Widgets

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

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.

What is a Widget?

The next thing we’re going to talk about are widgets in WordPress 3.9. So what is a widget? A widget is a module that adds content or functionality to a page.

Examples

For example, let’s look at this site here with this photo gallery. The photo gallery is a widget that was inserted into this page. This “We love helping Small Business Owners Build Their Own Sites” is a widget that we’ve added to the page. This is a recent post widget that has been added to the page.

Let’s take a look at BYOBWebsite. Not all but most of my pages have tons of widgets on them. The Start Learning Now, Become a Free Member is a widget, the Search is a widget, this description of Thesis 2 skins is a widget. These are all widgets that add content to this page.

On our sample site, the one we’re working on right now, we have a couple of widgets. We’ve got the Recent Posts widget and the Howdy Folks widget and I think we have that because this page has the front page template. Let’s take it to the default template for a second and view the page. Now we’ve got all these widgets here which are automatically added in this theme.

Widget Panel – Manage Widgets Here

Let’s go to Appearance and Widgets. We can see our widgets panel and widgets can only be added to a page in this area. So, again, you come to Appearance and Widgets and this is where you can manage all of your widgets.

Available Widgets

The widgets panel has 4 parts to it. It has the available widgets which are widgets that you can use and drag into a sidebar or into a widget area.

Widget Areas

Then there are widgets areas over here and these widget areas are dependent upon the theme. Some themes only have one widget area, some themes have lots of widget areas. This theme has 3 widget areas, two of them for the front page and one of them for the main sidebar.

Inactive Widgets

Then you’ve got your inactive widgets down here. Inactive widgets are widgets that you have edited and added to one of your sidebars but that you don’t want to show up and you don’t want to lose your edits. In that case you drag them out of here and drop them into inactive widgets.

Inactive Sidebar

There is a fourth part but it’s going to be dependent upon us choosing a different theme so we’ll come back over here to Twenty Thirteen and then back over to our widgets panel. We have the inactive widgets but we also have this inactive sidebar and this is a storage place for widgets that were in sidebars in a different theme.

So if you switch from one theme that has a bunch of sidebars or widget areas to a theme that only has one or two widget areas or has different widget areas, WordPress will save those down here. Then if you go back and restore that other theme, they’ll be moved into the correct location again.

This gives you a chance to change your theme permanently without losing any widgets that you’ve created. If the theme that you changed to doesn’t have the same widget areas then all of those widgets will show up in inactive sidebars and you can drag them out of the old widget areas and drag them into the new widget areas.

The Terms Sidebars and Widget Areas

I want to speak about sidebars for just a moment. Sidebar is an antique term in WordPress that means widget area and you will see those two used interchangeably. It used to be that the only widget area was on the side of a page and so they called them sidebars but in fact, widget areas can be anywhere on a WordPress site.

Widget areas can be anywhere on the page and so sidebars no longer really a useful term. A lot of themes don’t use the term sidebar at all, they just use widget area just as this theme is doing. You need to be aware of the fact that widget area and sidebar are synonymous.

How to Add a Widget to a Widget Area

Now I want to show how to add a widget to a widget area. All you have to do is drag it over. For example, let’s drag a text widget over here and say “Hello” and “Here is some widget”. Hit save. And now when we come back over and look at our page, here’s that widget that was added to it.

Down here in the footer area, which is the main sidebar, there are footer widgets and then there’s the secondary sidebar which is this one is the column on the right side. In this sidebar we have a recent post widgets and that “Hello” widget we just created.

Parts of a Widget

You can open and close widgets and widget areas with these little arrows. And this brings us to the parts of a widget. A widget generally has a couple of different parts. It has the title section and then it has the settings section.

Let’s look at this recent post widget. The title is blank so it automatically added its own title and then the settings really are just how many posts you want to display and whether or not you want to show a post date.

We’re going to say “My Recent Posts” for the title and hit save. Let’s come back over and look at our page again and you’ll see this “Recent Post” has changed to “My Recent Posts”. And then we’ll have the dates of them showing up here.

Changing Widget Arrangement

You can arrange and rearrange your widgets any way you want just simply by dragging and dropping. So we could move the Hello widget at to the top. You see those little dash lines around the widget area? Well, that means you can drop it there and once you’ve done that it has rearranged the widget.

You’ve already observed that different themes have different widget areas, right? When you switch themes, widget areas are in different places and they are different widget areas period. So that’s just something for you to keep in mind while you are moving from one theme to another, different themes have different widget areas.

One of the things you need to do at the when you’re working on your site for the first time is to get an understanding of where the various widgets are on any given theme.

0 Comments… add one
0 comments… add one

Leave a Comment