How to Add and Customize Widgets in WordPress Site?

WordPress as a content management system allows adding different types of elements on your site. The overall layout on a published WordPress site can be divided into four different parts – header, content area, sidebar and footer. You can add different types of elements to one of these parts to achieve the desired layout and functions. Some elements are depending on themes and some can be added using additional plugins. Some affects the whole site level and some affects only the particular post or page.

What are WordPress Widgets?

Widgets are elements added outside the main content area and affect the whole site. The area widgets can be placed on your site is referred as “widget area”.  There are two common widget areas on any WordPress site – the sidebar and footer of your site’s layout. The widget can be used to add simple text content or to show categories or to add signup form on the sidebar.

There are three types of widgets on WordPress:

• Default widgets that come with WordPress installation.
• Widgets comes with your theme.
• Widgets added with additional plugins.

Some plugins also offer special widgets that can be used to control the behavior of header and the main content area of your page.

Blocks Vs Classic Widgets

WordPress introduced a block based widget editor in version 5.8. Though blocks offer additional functionalities, it will slow down the admin screen and some users may not like this setup. You can easily disable Gutenberg widget editor and continue to use the old Classic Widgets interface as explained in this article. So, first we will explain with Classic Widgets and then cover block based widgets.

How to Add Widgets in WordPress Using Classic Editor?

Each theme comes with set of widgets specific to that theme. Assume you have a “Theme A” active on your site. All available widgets of “Theme A” can be viewed under “Appearances > Widgets” in WordPress admin panel.

The screen will show the following three sections:

• Active widgets on the theme – simply drag and drop the required widget to the required sidebar or footer area.
• Available widget areas – all sidebars and footer area.
• Inactive widgets – you can add the active widget to inactive area as a placeholder. The real purpose is to remove the live widgets from widget area and keep it here for temporarily instead of deleting it permanently.

The active widgets are the empty ones while inactive widgets contains the content inside. For example, the “Text” widget in inactive area will have the “Title” and “Content” used before on the live site. You can drag and drop the widgets from the widget area to inactive area to keep it sometime instead of directly deleting it permanently.

Nowadays, a WordPress theme offers variety of widgets with multiple sidebars and also the footer area can be divided into multiple columns. In such case, the screen area on admin panel will be clustered with widgets and widget areas. This makes the drag and drop difficult as the required widget area may not be in an expanded status and needs to be scrolled down. To make it simple, clicking on the widget will show you the list of available widget areas for adding the widget. Select the required area and click on “Add Widget” button to add the widget to that area.

Customizing WordPress Widgets

The added widget by default will appear last in the widget area. You can drag and rearrange the position of the widget on the sidebar.

Widget once added will instantly show on the published site, hence be quick to customize the widget. For example, when you add social follow us widget ensure to add all the social links quickly. Otherwise only the heading like “Follow Us” may appear on the sidebar without any social icons. Save the widget changes, once the required parameters are added.

Deleting and Deactivating

Each widget on the sidebars and footer area can be deleted by clicking on the “Delete” link.

Instead of deleting the widget permanently you can move to the inactive area for reusing it later. The widgets available in inactive area will not be visible on live site.

Using WordPress Live Customizer

WordPress also allow customizations of widgets through live customizer which can be accessed under “Appearance > Customize“.

Using Accessibility Mode

If you feel difficulty in dragging and dropping the widget then click on the “Screen Options” and “enable accessibility mode”. This will disable the drag/drop function add enable “Add / Edit” buttons as shown in the below picture.

Clicking on “Add” or “Edit” button will take you to new screen and offer further options.

Examples of WordPress Widgets

Below are some of the widgets offered by default with WordPress installation:

The text / custom HTML widget is the widely used one due to the broader scope. You can add advertisement codes like Google AdSense, simple text content, shortcodes, CSS, HTML and scripts inside the text / custom HTML widgets. Besides the default widgets, most of the themes also offer additional widgets. For example, themes can offer widgets for social widgets like Facebook like , Twitter timeline and Google+ follow button. Below picture shows the use of five different widgets on the footer area of this site.

Enhancing the Widget Functionality

Plugins are used to add new functions not offered by your theme. Also you can use plugins to enhance the existing functions. Plugin developers offer a custom widget especially if the function is to be added on site wide. The best example is a social plugins, offering custom widget under “Appearance > Widgets”. The custom widget then can be added to the required place on the sidebar like any other widgets.

Adjusting Widget Visibility

A widget added on the primary sidebar will be visible on all the posts, pages, archives and blog index page. This is not what you always want. Sometimes you want to show a widget only on the archives and blog index page while showing different widgets on regular posts and pages. The widget visibility can be controlled using plugins like Jetpack. Check out the article on controlling widget visibility using Jetpack.

Points to Remember on Widgets

• Widgets added and saved in the widget area will appear instantly on live site, no need to activate separately.
• Widgets are theme specific. When you switch a theme, the old widgets will not appear on the new theme. However, when you revert back to the old theme then the widgets will appear again automatically (unless you did not delete them). Otherwise, you can find the widgets under “Inactive Widgets” section.
• Additional widgets can be added through plugins. Also plugins can be used to control the behavior of widgets.
• Generally widgets can only be added on sidebars and footer areas. Same widget can be added multiple times.
• Some special widgets control the header and main content area behaviors like the widgets offered by ad management plugins.

Managing Widgets in Gutenberg Block Editor

If you are using the latest Gutenberg based blocks widgets, then you get get lot of additional features. Instead of dragging and dropping, you can search the available widgets and insert them in the sidebar and footer widget area. For example, search for “categories” to find and insert Categories widget in your sidebar. Unlike classic categories widget which has a title as part of the widget, here you need to add the heading block to add title for your widget.

Here are some of the things you can do with block based widgets:

• You can insert any blocks available in your theme in the widget area as well as in the Gutenberg post editor. For example, you can use “Latest Posts” block to showcase your recent posts in the sidebar, footer or inside content area which is not possible with classic editor.
• Blocks offer lot of customization features which you can access from the sidebar settings section. It is possible to add custom CSS classes to your widgets and add styles.
• You can group the widgets as “Widget Group” and multiple widgets together.
• After adding a widget, you should update the section for the changes to be effective on the live site.

You also have “Blocks” widget with Classic Widgets Editor which you can use to insert Gutenberg blocks while using Classic Widgets interface.