Skip to Content

How to use WordPress Widgets

How to use WordPress Widgets

WordPress websites are easy to customize. They don’t require manual coding. While you always customize a WordPress website by editing the code of its theme or plugins, widgets are easier to use. You can use widgets to customize a WordPress website without editing any code.

Widgets Explained

Widgets are modular, side-wide content blocks for WordPress. They were introduced to the content management system (CMS) in February 2006. Since then, widgets have become synonymous with WordPress. WordPress now supports them for customization purposes.

All widgets contain content, which may or may not be interactive. Visitors can interact with certain types of widgets. The links widget, for instance, allows you to display one or more links on your website. Visitors will see these links in the area where the links widget is placed, and visitors can interact with the links by clicking them.

As site-wide content blocks, widgets appear on every post and page. With that said, you can only add them to supported areas. Available widget placements are determined by your website’s theme. Nearly all themes are widgetized, meaning they support widgets. However, the supported types of widgets and their available placements will vary depending on the specific theme.

Common widget placements include:

•   Right sidebar

•   Left sidebar

•   Header

•   Banner

•   Footer

Common Widget Types

There are many different types of widget types. WordPress comes with a few dozen built-in widget types, but it supports additional widget types from themes and plugins. If WordPress doesn’t come with a widget you want to use, you can probably add it with a theme or plugin.

One of the most common widget types is categories. The categories widget will display a list of your website’s categories. The latest posts widget, on the other hand, will display a list of your website’s posts. The categories and latest posts widgets only work with posts. If your website only has pages, you won’t need to use them.

Widgets can contain images or videos. To display an image, you can use the image widget. To display a video, you can use the video widget. You can choose an image or video that’s already on your website, or you can upload a new image or video to the widget.

Plugins may come with widgets as well.  When you activate a new plugin, you may discover that it added a new available widget type to your website. Plugins often come with companion widgets. Companion widgets serve the same purpose as the plugins with which they are packaged. They simply allow you to use plugins in a supported site-wide area of your website alongside other widgets.

The NextGEN Gallery plugin comes with a companion widget. You can use the NextGEN Gallery plugin to create photo galleries. It will add a gallery block to the Gutenberg editor, which you can insert into posts and pages. You can use the NextGEN Gallery companion widget to add this same gallery block to a site-wide area of your website that supports widgets. Other plugins come with their own companion widget, which allows you to use them in the widget-supported areas.

How to Use Widgets

You can add, customize, arrange, and remove widgets on the widgets page in the admin dashboard. The widgets page is available by selecting the “Appearance” tab in the admin dashboard and choosing “Widgets.”

WordPress now uses a Gutenberg-style interface for the widgets page. In the past, the widgets page featured a more traditional drag-and-drop interface. Known as the Classic Widgets Screen, it features a list of available widgets on the left and a list of available placements on the right. You could drag widgets from the left of the Classic Widgets Screen and drop them in an available placement on the right. 

The Classic Widgets Screen has been replaced with a new Gutenberg-style interface. Upon loading the widgets page, you’ll be confronted with an interface similar to that used for posts and pages. The widgets page now features blocks.

The center of the widgets page shows the available placements as per your website’s theme. You can add a widget by clicking the drop-down arrow for a given placement and choosing a widget type. Alternatively, you can add a widget by clicking anywhere on a given placement, followed by the add icon in the icon-left corner of the widgets page.

When adding a widget, you’ll have to choose a type. There are several categories of widget types, such as text, media, design, widgets, theme, embeds, and more. While they all consist of widgets, most of the categories here are available as blocks for posts and pages. The widgets category, though, is different. Widget blocks in this category are only available for the widgets page.

You can rearrange widgets after adding them. The new Gutenberg-style interface offers similar drag-and-drop functionality as the Classic Widgets Screen. You can select an added widget by clicking them. You can then drag it to a different placement.

There are toolbar buttons that you use to rearrange widgets. The toolbar for all widgets has an up button and a down button. Clicking these buttons will move a widget up or down, respectively. The toolbar has a “move to widget area” button as well.

While the up and down buttons only allow you to change the position of a widget with a particular placement, the “move to widget area” button will move the widget to a different placement.

Many widget types are also customizable. After adding a widget to a placement, you should see a block tab for it. The block tab is displayed on the far right of the widgets page. Because the widgets page now uses a Gutenberg-style interface, it reveals a block tab for each added widget. You can customize widgets by using the block tab.

Failure to use widgets will result in a bland-looking website. Widgets are designed to fill empty spaces in themes with content. Your website’s theme may have two or more sidebars and a footer, for example. Rather than leaving them empty, you can fill these spaces with widgets.

Sharing is caring!

This site uses Akismet to reduce spam. Learn how your comment data is processed.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You cannot copy content of this page