WordPress Widgets Tutorial

Learn All About WordPress Widgets

About This Lesson

With WordPress widgets you’re able to add special features or blocks of content, to “widget areas” in your themes. These areas are usually sidebars and footers. (Although some themes offer extra widget areas.)

This makes it easy to customize the content of your sidebar or footer.

In this lesson I’ll be teaching you the basics of widgets, including,

1) Giving You A More Detailed Explanation Of What Widgets Are

2) Showing You The Types Of Widgets You Can Add To Your Site

3) Explaining How To Use The Widgets Section Of WordPress

4) Showing You How To Find Widgets

5) How To Install And Setup Widgets

6) How To Add And Rearrange Widgets On Your Site

7) How To Remove And Delete Widgets

Prerequisites

Before starting this lesson, I recommend that you go through the following lessons,

1) What Is WordPress?

2) Understand The Basics Of WordPress Themes

3) WordPress Plugins Tutorial

And you’ll obviously need to have installed WordPress on your site, if you haven’t done that yet, go through one of my lessons below,

1) Install WordPress with SiteGround (The Quick & Easy Way)

2) Install WordPress manually

Course Navigation

How To Create A Website Course

This is Step 5 Part 2b – See the full course here!

How To Use WordPress Course

This is Step 5 Part 2b – See the full course here!

Read All About It

What Are Widgets?

With WordPress widgets you’re able to add special features or blocks of content, to “widget areas” in your themes. These areas are usually sidebars and footers. (Although some themes offer extra widget areas.)

This makes it easy to customize the content of your sidebar or footer.

Before WordPress added the widgets feature, you were either stuck with what the designer of a theme put into the sidebar or footer, or you had to add your own html/css/php to change it.

But now, with widgets, you can have greater control over what goes in these areas and it’s as simple as clicking and dragging widgets into the right place. (So you don’t need to know any code!)

What Can Widgets Do?

With WordPress widgets you could add the following items to your sidebar or footer,

  • A contact form
  • A Facebook Likebox
  • A slideshow
  • Your own text or images
  • A search box
  • An area for people to sign up to your newsletter
  • A list of your most recent blog/news post
  • Links to other pages on your site
  • Testimonials
  • A YouTube video
  • Your Twitter feed
  • Social media buttons/icons
  • And so much more

Understand The Widgets Section Of WordPress

To get to the widgets section of your WordPress site, simply hover your mouse over “Appearance”, then click “Widgets”, like in the image below.

WordPress Widgets

This then brings you to the widget section of WordPress. This section is where you’ll add, rearrange or edit the contents of widgets.

Widget Section Of WordPress

  1. Available Widgets: – Here you can see all the widgets that are currently available to add to your widget areas
  2. Widget Areas: – These are the widgets areas your theme has for you. This is where you’ll be able to add special features or blocks of content. So in the above example, I have 6 widget areas, which are my sidebar area, 4 footer areas and a WooCommerce sidebar area. (Your theme will probably have a different number of widget areas and they’ll probably be named differently. This is because widget areas are created by the developer of your theme and each theme is developed in different ways.)
  3. Inactive Widgets: – Here you can store widgets that you’ve created, but maybe don’t want to put into one of your widget areas just yet. It’s like saving a draft.
  4. To edit a widgets setting, just click the arrow next to the widgets title

How To Find Widgets

To find widgets you need to search through the plugins section of WordPress.

(It might sound strange having to search the plugins section, but that’s basically what widgets are. Something that you’re “plugging” into your site.)

Let me show you an example.

I want to add a widget that allows me to add my own text and images inside my sidebar. To do this,

How To Find Widgets

  1. I go to Plugins > Add New
  2. I could search through the “Widgets” tag, but because I already know what this widget is called, I’m going to use the search box
  3. So I type out “black studio tinymce” (or I could have searched for “sidebar visual editor”)
  4. And then hit enter on my keyboard

This will then show me a list of plugins I could install on my site.

What To Look At When Choosing A Widget

When deciding what plugin to use, first take a look at the description (1). See if it matches your needs.

To get a feel for how good a plugin is, look at the ratings (2). It’s rated out of five stars and when you hover over the ratings it tells you how many people have rated that plugin.

When you think you’ve found the plugin you want, click “More Details” (3). Here you’ll get a lot more details about the plugin, in some cases this will include some screenshots.

When you want to install the plugin, click “Install Now” (4). WordPress will then install the plugin for you.

Note: 95% of plugins simply require you to click the “Install Now” button, however, sometimes a plugin will require you to install it in a specific way. To see how to do this, click the “More Details” button (3 in the image above), and then the “Installation” tab, to see instructions on what you need to do.

How To Install And Setup Widgets

Each widget will require you to install and set them up in their own way, so it’s impossible for me to cover how to set up each individual widget, there are after all thousands of widgets available.

But to learn how to install or setup a widget, like I said above, click the “More Details” button (3 in the image above), then the installation tab. This is where most plugin developers explain what you need to do, to set up their widget.

If you run into any problems or you’re just unsure about anything to do with a widget/plugin, the WordPress support forums can be a great place to get answers.

How To Add And Rearrange Widgets On Your Site

How To Add A Widget To Your Site

Once you’ve installed and activated the plugin, you then need to add the widget to one of your widget areas i.e. your sidebar/footer.

To do this,

How To Add A Widget To Your Site

  1. Go to Appearance > Widgets
  2. In the “Available Widgets” area find the widget you want to add to your site. In this example I want to add the “black studio tinymce” widget, which is called “Visual Editor”
  3. Click and drag this widget into your chosen widget area, in this example I’m going to drag it into my “Main Sidebar”
  4. Then to edit the contents of this widget I simply click the arrow next to the widgets title
  5. And with this widget I can now add in the text/images I want to display in my sidebar
  6. When done, I click save. Then I can take a look at this widget live on my site (see the image below)

(I’ve actually got a tutorial which shows you exactly how to use the Black Studio TinyMCE Widget.)

Sidebar Widget

Rearrange Widgets Order

To rearrange the order your widgets get shown in, simply click and then drag a widget into the order you want it in.

(In the example below I moved the “Visual Editor: About The Site”, from the bottom to the top)

Rearrange Widgets Order

How To Remove And Delete Widgets

How To Remove A Widget From A Widget Area

  1. To stop using a widget, simply drag it out of the widget area and move it into the “Available Widgets”. This will then delete the contents of this particular widget.
  2. If you want to save the contents, i.e. because you may want to add it back in the future, make sure you drag it into the “Inactive Widgets” section.

All Done

And that’s it for this lesson.

But before you go, I thought I’d show you a few tutorials I’ve put together for some widgets, which show you,