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 1 – Understanding WordPress Widgets

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to - ,

Good evening everybody and welcome to the Lesson 10 of our How to Build a Professional Website Using the Genesis theme and WordPress course. Tonight, we are going to talk about understanding and using plugins and widgets.

What is a Widget?

A widget is a module that adds content or functionality to a page, it can only be placed in a widget area and it always displays something on a page.

The Widgets Panel

Let’s go ahead and take a look at the widgets panel on the site that we’re working on, If we come over to the dashboard then we go to Appearance and Widgets, this is the widgets panel.

Sidebars Section

The widgets panel has a couple of different sections. It has the sidebars section which is here on the right hand side. These are the sidebars or widget areas if you will, that are created by Genesis and by the Agency theme. They are the header right sidebar, the primary sidebar, secondary sidebar, the home welcome sidebar, home slider, home left, home middle, home right and footers 1, 2 and 3. These are the sidebars where you can place widgets.

Available Widgets

In addition to the sidebars section, you have the available widgets panel that shows you all of the widgets that you can use. This is the list of all of the widgets that are currently available.

When we install plugins, these will also add additional widgets that you can use and we’ll be looking at that here as we start installing some plugins but for the moment, with the default installation of WordPress, the Genesis theme and Agency Child theme, these are the widgets that are available to use in these sidebars.

Inactive Widgets

The third area is the inactive widgets area. These are widgets that you have already configured and placed in the sidebar but have decided not to use. The difference between an inactive widget and an available widget is that an inactive widget is one that’s been configured.

An example is our custom menu which we configured way back when and we added the main menu to our site using this. If we change our mind, what we could do is drag this widget down to the available widgets panel and it would save the settings for this widget.

Now, if we drag it instead over to the available widgets panel, it does the same thing essentially as delete the widget which means it removes a widget and it removes all the settings. For a widget as simple as the custom menu, that’s not that big a deal but you’ll see when we’re working for example with the NextGen Gallery, there’s a bunch of settings that you’re going to do.

If you drag the widget over to the available widgets, it’s just going to remove those settings but if you drag it down here to inactive widgets, it’s going to retain the settings so that you could drag it to the sidebar later.

There’s one other potential set of panels here that don’t show up in this case but may show up if you are switching to the Genesis theme from another theme and that is the inactive sidebars section. Inactive sidebars is essentially a place holder for each sidebar in a theme that you have configured.

If you changed themes from one theme to another and the new theme that you’ve changed to doesn’t have the same sidebar, those widgets would come down here into the inactive widgets section. So you have sidebars, available widgets and inactive widgets.

Adding a Widget to a Sidebar

In order to add a widget to the sidebar, all you do is grab it and drag it over. If we grab our calendar widget, drag it to the primary sidebar and hit save, there’s our calendar showing up in the sidebar. The process of doing that is simply dragging the widget over.

If we say drag the meta widget over as well, let’s call it “Info”, hit Save and refresh the screen, our meta widget shows up as well in that sidebar. That’s how you add the widget to the sidebar, you just grab it over here and drag it to the sidebar that you want it to show up in.

Secondary Sidebar

The Secondary Sidebar is a sidebar that does not show up in our current design because we only have a single sidebar but if we were using a design that had 2 sidebars in it, then the Secondary Sidebar would be the second sidebar.

What is in a Widget

These widgets have parts. The first part of the widget is its Title and in both of these cases, the Title is the only part that it has. For example, if we use Latest Tweets, the title is “My Latest Twitter”, now you have the title and you have the settings.

The settings in this case is my username, byobwebsite, let’s show 3 tweets, we’re going to hide the @Replies, we’re going to load tweets every 30 minutes and we’ll include a link to Twitter Page and we’ll say “Follow me on Twitter”. Those are all the settings, you’ve got your title and you’ve got your settings.

If we hit save to that, come back over and refresh this, here’s my latest tweets and here’s “Follow me on Twitter” so  “My Latest Twitter”, that’s the heading then this is what the widget creates based on the settings.

Arrange the Widgets in the Sidebar

There’s one other thing you can do which is arrange the widgets in the sidebar. We’ve got our primary sidebar and you arrange the widgets by dragging and dropping them. I just dragged the “My Latest Twitter” up there, if we come over and refresh the page, the twitter has been raised to the top. That’s how you arrange widgets in a sidebar, simply dragging and dropping them.

What you want to make sure you do is pay attention to this dashed line. Where those dashed lines are is where the widgets are going to be placed. You can see where I’m sitting here, it’s confused the system so it’s showing the widget up at the top but if I moved it over, it would show it in a different location and that’s what’s happening there.

Deleting Widgets

You can delete widgets either by dragging them off to the side like this or by selecting “Delete”. Either way, that’s how you can remove widgets. What those widgets did was they added content to this specific location in the page which in this case was the primary sidebar.

Maybe I should do one without a title here. If we just take out the title all together, the widget will display without a title or with a default title. I think meta probably has “Meta” as its default title. Yes, “Meta” is its default title.

Some widgets like the text widget, if you use a text widget here and you don’t put a title in, it won’t show anything as a title but other widgets are created with a default. That’s a widget, it has content or functionality to a page, it can only be placed in a widget area so you can’t use it anywhere else but only in a widget area or in a sidebar, those two terms are synonymous. Widget area and sidebar are the same thing and it always ends up displaying something on your Genesis theme page.

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