Using WordPress Widgets

WordPress Widgets Explained

Using WordPress WidgetsThis tutorial explains what WordPress widgets are, how widgets work, and how widgets can be used to customize and extend the functionality of your website or blog.

This tutorial covers the following areas:

Overview of Widgets

As well as being a powerful and flexible platform for building, managing, and growing your web presence, one of the main benefits and advantages of using WordPress is that you can easily add content, enhance your site’s functionality and customize your site’s layout with no coding skills or knowledge required.

Depending on the theme you have installed, WordPress lets you quickly and easily manage different types of content and functionality on areas of your site like the sidebar, header, and footer using widgets.

Widgets.
Widgets.

What Are Widgets?

Widgets are self-contained blocks of code that perform a specific function, such as adding some type of content (e.g. a text box or a list), a media element (e.g. an image, video, or audio), a form, or a script to your site.

The WordPress software is written using an open-source general-purpose scripting language suited for web development called PHP (Hypertext Preprocessor).

Normally, adding features and functions that will enhance the functionality of a website requires knowing how to program code like PHP.

Now … don’t worry if all of this sounds too technical.  WordPress widgets require no coding experience or programming expertise to use.

A widget contains all the complex code required to run whatever function or feature you want to add to your site.

Anatomy of a WordPress widget.
Widgets lets you add many features and functions to your site without requiring coding skills or knowledge.

Instead of writing all the code that would be required to run a feature or functionality you’d like to add to your site, all you do is insert a widget that already includes all of that coding wherever you want that functionality. The widget will then run the functionality.

Many widgets also include customizable options and settings. This gives you complete control over the feature without requiring you to mess with any of the feature’s code.

Everything happens ‘under the hood.’

What Can Widgets Do?

Widgets were originally designed to provide WordPress users with a simple and easy-to-use way to control the design and structure of their WordPress Theme.

As you will see shortly, you can easily add, remove, reorder, and rearrange widgets around different sections of your website simply by clicking, dragging, and dropping them into “widgetized” areas of the theme, such as the sidebar, header, footer, (and even inside the content of your posts and pages if using the block editor).

WordPress blog with widgets section.
Use widgets to expand the capability of your site.

Here are just some of the many things you can add to your WordPress site using widgets:

  • Site search feature
  • List of pages (and nested subpages)
  • List of post categories
  • Tag clouds
  • List of archived posts
  • Custom menus
  • Links to external sites
  • Links to your most recent posts
  • Most recent post comments
  • Rotating advertising banners
  • Client testimonials
  • Polls, quizzes, and surveys
  • RSS feeds
  • Newsletter subscription/Lead generation opt-in/User registration forms
  • Shopping cart information
  • Featured products
  • Videos, images, audio files
  • Social media buttons and links
  • Widgets from other applications or sites (e.g. Facebook, Instagram, Amazon affiliate programs, etc.)
  • Administrative forms (e.g. login)
  • And many more!

info

Notes:

  • Installing certain plugins on your site can add widgets to make new features available.
  • Installing different themes can affect where widgets can be used on your site and change your widget layouts.
Add Plugins - widgets.
Installing certain plugins will add new widgets to enhance your site.

The Future Of Widgets

As WordPress evolves toward a more block-based architecture and the introduction of features like Full Site Editing (FSE), where the entire site can be customized using blocks, widgets may end up being replaced by blocks altogether.

So, instead of dragging widgets to ‘widgetized’ areas of your theme like the sidebar, header, footer, etc. you would simply add a block that will do whatever you want, wherever you want that function to appear on your site.

WordPress is heading toward this future but it’s not quite there yet, hence the reason why we have the “Classic” and “Block-based” widget editors.

Our widget tutorials currently cover both editors. As things change, we’ll update the tutorials in this section to reflect new developments.

The Widgets Screen

You can access the widgets screen and customize widgets on your WordPress site:

Access The Widgets Screen From Your Dashboard Menu

To access the widgets screen on your WordPress site from your menu, go to Appearance > Widgets.

WordPress Menu: Appearance - Widgets
Click on Appearance – Widgets to go to the Widgets section of your site.

Widgets Screen – WordPress Classic Editor

If your site uses the WordPress Classic Editor, your Widgets screen should look like the screenshot below.

WordPress Widgets screen - Classic Editor.
WordPress Widgets screen – Classic Editor.

Widgets Screen – WordPress Block Editor

If your site uses the default WordPress Block Editor, your Widgets screen should look like the screenshot below.

WordPress Widgets screen - Block Editor.
WordPress Widgets screen – Block Editor.

To learn how to navigate the Widgets screen and use widgets on your site regardless of which screen displays on your site, see this tutorial: How To Use WordPress Widgets – Part 1

Customize Widgets In The Theme Customizer

To customize widgets in the Theme Customizer, go to Appearance > Customize.

The items displayed in the Customizer screen will depend on your current theme. Most themes support widgets. If your theme supports widgets, click on the “Widgets” section.

WordPress Theme Customizer - Widgets menu.
Most WordPress themes let you access and configure widgets via the Theme Customizer.

This will bring up all the widget elements that your theme supports.

WordPress Theme Customizer - Widgets list.
The widgets you will see in the Theme Customizer depend on the theme you have installed.

To learn how to use widgets in the Customizer screen, see this tutorial: How To Use WordPress Widgets – Part 1

Widget-Ready Themes

Most WordPress themes support widgets and provide “widgetized” areas on your site where you can add widgets to.

Widgetized sections of a WordPress site typically include:

  • Sidebar (including left and right sidebars, or double sidebar columns on either side, depending on the theme).
  • Header (including top bar).
  • Footer (including multiple footer column sections).

As has been repeatedly stated here, it all depends on the current theme you have installed.

For example, the WordPress theme shown below has only one widget area (Footer), so any widgets you add to your site will only display in the theme’s footer.

Composite image: WordPress theme with Widgets section.
This theme only has one widgetized section in the footer. Theme: Twenty Twenty-One.

Here is the widget screen of the theme shown above. You can see that this theme only has one widget-enabled area.

Widgets screen - Footer.
This theme only lets you add widgets to the footer.

In contrast, the theme shown below includes multiple widgetized areas.

WordPress Theme with multiple widgetized areas.
This theme has many widget-enabled areas. Theme: GeneratePress.

Here is the widget screen of the above theme. You can see this theme includes many widget-ready areas.

Widgets screen with many widgetized areas.
This theme offers you many widgetized sections.

As you can see, with the above theme installed, you can add widgets to sections like the header, left and right sidebar, and up to five different Footer areas, including a Footer bar.

Footer section of GeneratePress theme with 5 footer columns.
This theme lets you display up to five footer columns on your site.

Widget Options

As we have just seen, different themes affect how widgets display on your site.

For example, in the theme options below, how widgets display in the sidebars of this specific theme depends on how you configure different sidebar layouts for different site elements (e.g. the blog page vs single post layouts).

WordPress Theme Customizer - Customizing layout - Sidebars screen.
Your theme configuration settings can affect how widgets can be customized and displayed on your site.

Ok, so different themes affect where widgets can show up on your site.

But what about the widgets themselves. Can they be configured and customized?

Yes, but it depends on the widget.

Some widgets provide little to no configurable options or settings.

For example, the Tag Cloud widget only allows you to switch taxonomies (e.g. display categories instead of tags in the word cloud) and show post counts.

WordPress Widgets screen - Tag Cloud.
Tag Cloud widget block.

The Search widget block gives you limited options.

You can:

  • Toggle the search label on or off.
  • Specify the position of the search button (no button, button outside, button inside).
  • Change the Search label into an icon
  • Choose a fixed width for the search field (25%, 50%, 75%, 100%).
WordPress Widgets screen - Search widget block.
Search widget block.

The Latest Posts block gives you a wider range of options.

WordPress Widgets screen - Latest Posts block.
Latest Posts block.

Every widget has its own unique set of options and settings. Some widgets offer no customizations or configuration options (i.e. you add them to your site, and they do whatever they are supposed to do) and some are highly configurable…it all depends on the widget!

How To Use WordPress Widgets

For detailed, step-by-step tutorials on using widgets in WordPress, go here:

Also, the following tutorials contain additional useful information to help you understand how to use widgets on your site:

Congratulations! Hopefully, you now have a better understanding of what widgets are and how they can add useful features and functionality to your website or blog.

The WordPress Widgets screen.
Add useful features and functionality to different sections of your WordPress site using widgets.

***

Print Friendly, PDF & Email

Terms Of Use | Privacy Policy

Scroll to Top