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. Widgets are such elements affect the whole site and can be added in the sidebar and footer area of your site’s layout. Let us explore more on managing widgets in your WordPress site in this article.
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.
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.
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.
Example of WordPress Widgets
Below are some of the widgets offered by all types of WordPress themes.
- Recent Posts
- Recent Comments
- Tag Cloud
The text 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 widget.
Most themes also offer social widgets like Facebook like or 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 on 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. But WordPress remember the widgets settings, so if you revert back to same old theme then the widgets will appear again automatically.
- Additional widgets can be added through plugins. Also plugins can be used to control the behavior of widgets.
- Widgets can only be added on sidebars and footer areas. Same widget can be added multiple times.