Introducing WordPress Widgets

 

Video:

Transcript:

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 want.
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.

Tags: WordPress

OSTraining

Support

OSTraining teaches people how to build great websites, focusing on PHP platforms such as WordPress, Joomla, Magento and Drupal. You can learn more about there service by visiting OSTraining.com or by subscribing to their Youtube channel.