All About WordPress Widgets

When you look at a website you’ll usually see that the left and right-hand columns, and sometimes the footer, have chunks of text and images that pass you on to somewhere else on the website when you click them. In WordPress these are called ‘widgets’.

What are ‘widgets’? Widgets are very handy little chunks of functionality that perform common tasks. Widgets can contain clickable hotlinks that guide your visitors around your website, or they might link to other websites. Widgets can also contain images, clickable or not. And often they contain ads.

Widgets can enhance your website by showing visitors what you have for them to view and they often add visibility to topics that you want to emphasize.

Now that you have your website loaded up with some content, it’s time for you to add some widgets to make your site look useful and well-designed.

You, the web master, choose which widgets you want to use to perform these additional tasks to improve your website’s appearance and performance.

Examples of widgets include:

  • List of categories in your website
  • Links to your latest posts
  • Custom menus (which we’ll deal with in Lesson 11) Illustrations (little pictures)
  • Blocks of text
  • Facebook, Twitter, LinkedIn buttons
  • And more…

The number and position of the widgets you can use will depend on the theme you are using. The Twenty Fourteen theme allows you to insert widgets into your left-hand sidebar (Primary Sidebar), an optional right-hand sidebar (Content Sidebar) and also in the footer. Other themes may also enable widgets in the header area.

I have now put a number of widgets into the left and right sidebars, replacing the defaults of the original installation. See how the website is now progressing?

As this tutorial progresses I’ll add or amend these widgets to illustrate other features.

It’s up to you what you use on your site because, as you will see, there are a lot of widgets to choose from.

Other themes may have other options for widgets. We are going to stick with Twenty Fourteen to illustrate how all this works which will enable you to explore other options with other themes.

Here’s how to set up widgets.

From the dashboard, click on ‘Appearance’, ‘Widgets’.

Add Some Sidebar Widgets

One of the neat things about widgets is that once you have added them to your site, they update themselves automatically. For example, every time you add a new category or a new post WordPress displays the latest information in the appropriate sidebar widget. You don’t have to do anything to keep the widgets up to date.

To insert a widget into your website simply click on it and a box will pop up to ask which widget area you would like the widget appear in Click on the appropriate sidebar, then click on ‘Add Widget’. The widget will then appear in that sidebar.

When you have done this, a ‘Save’ button will pop up and all you have to do is click that and you’re done. You will see that there are often options with widgets and you can usually insert your own titles. When you have saved a widget, click ‘Close’.

If you want to rearrange the order of the widgets in the sidebar simply drag and drop them, up and down, until you have them as you want. You don’t even need to save the sidebar: it stays as you last left it! You can also drag and drop widgets from one widget area to another: for example, I have dragged a widget from the left sidebar to the footer.

The easiest way for you to find out what widgets can do for your website it to experiment. Play around by clicking and dragging widgets into the sidebar and see how it looks. You can add and remove widgets as much as you wish.

I encourage you to experiment for yourself and see what the widgets fit in with your ideas for your own site.

Things To Be Aware Of When Playing Around With WordPress Widgets

Two characteristics that you need to be aware of when playing around with widgets:

  • If you insert a widget but you have no content behind that widget it will not appear until you have added that content. For example, if I added a ‘Recent Posts’ widget but I hadn’t added any posts yet then nothing would appear in the sidebar. But when I do add a post, the widget magically appears.
  • When you add or change anything on the Widgets page and then you click to ‘Visit Site’, do not press the ‘back’ key to return to the Widget page. If you do, you’ll find that the amendments you just made will have disappeared. Instead, to return to the Widget page, go back via the dashboard to ‘Appearance’, ‘Widgets’ again and your previous amendments will be in place.

Adding Images Using An Image Widget

You can also add an image to your sidebar using an Image widget.

The first thing you need is the URL of the image that you want to display. This could be an image in your Media Library or it could be one on an external website. In this example I’m going show you how I added the WordPress (‘W’) logo.

First, upload the image to the Media Library as explained in Lesson 7.

Then display the image URL which is shown in the box over on the right of the Attachment Details screen when you click on an image in the Media Library. 

Now copy this URL to your clipboard.

From the dashboard, click on ‘Appearance’, ‘Widgets’ and click on the ‘Image (Jetpack)’ widget. 

Then click to select which sidebar you want the image to be displayed.

This widget has a number of fields to complete.

The only essential entry is the Image URL – all the rest could be left blank. When you click ‘Save’ the image will then appear in the chosen sidebar.

I think you’ll agree that the website is shaping up to look like something others might want to browse.

I leave you to play around and experiment with all the widgets on your website.

Delete Unwanted Widgets

If you want to delete a widget from your sidebar, simply click on it and then click ‘Delete’ and it will disappear. You can always add the widget back in again if you change your mind.

FAQ

Can I have different sidebar widgets on every page?

By default, WordPress will display the same widgets on the sidebar of every post or page. There is a good reason for this: it provides a consistent visual ‘map’ of your site to your visitors so that they can more easily find their way around regardless of where they browse.

But some themes do enable you to design more than one sidebar and then choose how and when to display them, so this is not cast in stone.

If your theme doesn’t provide this and you have a good reason for wanting to display different widgets in the sidebar on different pages of your website, there is a useful plugin called ‘Custom Sidebars’ that you can use to achieve this. Plugins are covered in Lesson 12.

How do I place an ad in my sidebar?

Many webmasters and bloggers these days want to display advertising on their websites. This can earn useful income from the advertiser and there are many sources of this type of revenue.

When you sign up to become an ad publisher, the company you are affiliated with will usually provide some computer code for you to use. This may be HTML or JavaScript or whatever.

Drag and drop a text widget into your sidebar or footer, copy the computer code the advertiser has provided and paste it into the text widget. Then click ‘Save’ and ‘Close’. Your website then displays the ad related to that advertiser.


Note: If you are reading this, you are probably building an online business. Do you know that using some powerful marketing software can help your business scale to the next level? As the marketing technology develops very fast in recent years, there is a lot of new software being launched every month. To help you decide what marketing software you should use, you can read the detailed reviews of the most innovative marketing software below:

Leave a Comment