In this video, we're going to talk about WordPress widgets and we're gonna start by defining a
widget. A widget is actually a small piece of code that does one small specific thing.
Traditionally, they go on a sidebar. So over here we have a search widget, recent posts widget,
recent comments, etc. but they don't have to go in the sidebar. They could go in the bottom, the
top or right in the middle. It really depends on how your theme is built.
Let's take a look at how this thing is built. Here in the admin area or under appearance widgets and
these are all the different kinds of widgets that we could use. On the right, here are the different
widget areas. We have an area for the top, an area for the footer, the right showcase and bottom.
They're all called sidebars out of tradition but the one in the footer is obviously not in the side
and then one at the top is obviously not on the side but let's take a look at what we have here.
This is our right sidebar. If we go back to our home page, you'll see right here in the right
sidebar their search, recent posts, recent comments, etc. Now our site actually has a search box
right here at the top so we don't need another one right here. So to get rid of it, we simply drag
it out and now it's gone. There's no saving, there's no updating. If we reload now you'll see that
it's come. So what else don't we want? You probably don't want meta, which has a login area and, on
this page, I don't think we want recent comments. So now let's go back and see what we have. We have
recent posts, archives and categories.
What other kinds of things might we want? His archives calendar relates to our posts and then
there's categories. There's a custom menu widget here that we could use to make custom menu, and
we'll take a look at that when we get into the menu section next, but right here is an image widget.
Let's drag that over here. Now, the image widget is not built into WordPress. That came from a
plug-in that I got called image widget.
So the first thing we do is select an image and we'll promote the aquarium so we'll pick the jellies
here. We click insert into widget and you'll note that it's actually really big right here but
that's okay. So for our title, we can put in visit the aquarium and then we can put in a caption.
Then we can make a link and you can link to anything. I'm going to link to "/aquarium" because
that's our page for the aquarium and we can choose to have them stay in the window or open a new
window. Here we can choose the size of the image. Now, visually, the image is not going to get
bigger than its box but if you choose full size then it's going to be really big and swish down into
a tiny space. If you choose thumbnail, it's actually going to be too small. So what you really want
to do is pick one that's just a little bit bigger than the space that there is so that it squishes
as little as possible and then you can choose alignment left, center or right. We're going to choose
none, so now we click Save and let's go look at our homepage.
Here we have a box at the top that says visit the aquarium and there's a little bit of text. If you
click on the image, it goes to the aquarium page. Now this theme also has some other areas to put
widgets. Let's look at what we can do in the footer.
Now in our footer we might want some information about where our town is, so let's see if we could
find a Google Maps widget. Little plugins add new search for google map widget. Look at the details
to make sure this is a quality one - updated three weeks ago, compatible up to 4.6.1, active
installs 100,000, average rating of five. It looks pretty reputable so let's click install. Now
activate and there's a little pop-up telling us how to use it but let's now reload our widgets page
and here is a Google Maps widget. So I'm going to click and drag that right over here and I'm going
to remove the title and we're going to pretend we are in Word Ville, Oklahoma. Then there are a
bunch of normal Google options here.
Now one of the great things is this isn't actually going to put a map on our page. It's going to put
an image of the map which will load much, much faster. So let's click Save, then reload, look at our
footer and there's our map. If we click, it opens an actual Google map.
Now we might also want some weather so let's add new and we'll search. Now this one was last updated
seven years ago, so I'm going to pass on that one. This one was updated seven days ago and has 4,000
active installs, so I'm going to view more details and look at the screenshots. That looks like it
could do, so let's click install now and activate. Now, we will reload our widgets page. I've been
putting widgets in the sidebar by dragging so far but you can actually click and choose just like
that and save.
Now let's reload our page and that made a really pretty widget but it is far too big, so what we
learned about plugins is that if we have one we don't like we simply deactivate and delete. So
instead, what I'm going to do is put in a text widget, which is plain text, anything you want to say.
You can choose automatically had paragraph tags so the only HTML I needed to write in was the h4 for
City Hall so now I click Save and I actually put it in the wrong sidebar but that's okay because you
can easily drag widgets from one sidebar to another. There we go and you can add all the widgets you
Let's go ahead and put the meta widget over here as well and that provides things like links to site
admin logout etc. Now there are many, many widgets available and it's really easy to just load up on
widgets and make your sidebar be much, much longer than your page. This one already is but we should
have some more information on our home page, actually, so it would work out.
Think about the content of your page and think about your widgets. Make your widgets support your
content rather than the other way around. Widgets are fun, they're gadgety, they're neato, but think
about your content, think about your readers and make sure that they're actually doing what you want
them to do.