• Introducing WordPress Widgets
  • Introducing WordPress Widgets





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.

Contact Us

JoomlaWired Ltd, Metloc Business Hub, 37 Victoria Road, Romford, Essex, RM1 2LH
Tel: +44 (0) 20 8252 3758

Copyright © 2022 JoomlaWired LTD
JoomlaWired Ltd is not affiliated with or endorsed by The Joomla! Project™. Joomla! Learning Partners™ are officially recognized and licensed by, but not organized or operated by, Open Source Matters, Inc. (OSM) on behalf of The Joomla! Project™. Each Joomla! Learning Partner represents an independent company. Use of the Joomla!® name, symbol, logo, Joomla Learning Partner™, JLP™, Joomla! Certification Program™, and related trademarks is licensed by Open Source Matters, Inc.