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:

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

How to Add Widgets?

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.

WordPress Widgets

The screen will show the following three sections:

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.

Click and Add Widget to Widget Area

Customizing 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.

Rearranging Widgets on 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.

Deleting WordPress Widget

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“.

Customize Widgets with WordPress Customizer

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.

Accessibility Mode for WordPress Widgets

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

Adding Widget in Accessibility Mode

Example 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.

WordPress Widget Examples

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