How To Add And Configure WordPress Widgets – Part 1


Category: | Reading Time: 5 minutes

As I’ve shared in this post, there are many great benefits in using WordPress to build, manage and grow a website or blog. One benefit is that you can easily add content, expand your site’s functionality, and rearrange the layout of your site without having code editing skills.

WordPress lets you quickly and easily add, delete, and rearrange various types of content on your blog’s sidebar (and header and footer sections, depending on what theme is installed on the site) using widgets.

Once you know how to use widgets, you can easily add things to your site’s sidebar area (plus headers and footers and other areas, depending on the theme*) like:

  • pages on your site
  • blog categories
  • archives
  • custom menus
  • links to resources
  • links to recent posts
  • comments
  • image banners
  • testimonials
  • survey questions & results
  • RSS feed content
  • opt-in subscription form
  • videos
  • social media buttons
  • add widgets from other sites (e.g. affiliate programs)
  • administrative forms (e.g. login, register, etc.)

WordPress widgets make managing and using WordPress easier!

(Widgets help make managing and using WordPress easier)

To learn more about what WordPress widgets are, how they work and why widgets can make managing your site easier, check out Using WordPress: A Basic Guide To WordPress Widgets

In this step-by-step tutorial I’ll will show you how to use and configure various frequently-used WordPress widgets.

Using WordPress Widgets

The Basics

Before we start learning how to configure widgets, let’s first go over some of the basic concepts of using widgets:

Most WordPress Themes Support Widgetized Layouts

Most WordPress themes support widgets and provide built-in widgetized areas in the theme’s layout where you can add widgets, such as the sidebar, header area, and footer. Depending on your theme, widgets can also be found in the content area …

(Many WP themes offer users a number of widget-enabled sections)

(Many WP themes offer users a number of widget-ready sections)

These widgetized sections correspond to a feature inside your Widget management panel called “Widget Areas” …

Widget Areas

(Widget Areas)

Your Widgets Screen

The Widgets section displays all the widgets you have available.

The right-hand section of the screen displays the “active” widgets …

Activate or deactivate widgets using drag-and-drop

(Widgets can be activated or deactivated by dragging and dropping)

Available widgets can be activated or deactivated using drag-and-drop.

Widgets dragged from the Available Widgets section to widget areas like your sidebar, footer, etc. become activated for use.

Your Widgets area also includes an Inactive Widgets section that lets you remove widgets that you no longer want to use on your website. Inactive widgets do not lose their settings.

Rearrange WordPress Widgets Using Drag And Drop

You can easily add, activate, deactivate, rearrange and delete widgets by dragging and dropping items inside your Widgets area …

Rearrange widgets on your WordPress site using drag-and-drop

(Rearrange widgets on your WordPress site using drag-and-drop)

You can also easily reconfigure your theme’s layout with drag and drop ease.

For example, in the image below, the widgets have already been configured to show the following:

  1. A subscription form,
  2. A contact support button, and
  3. A ‘click to call’ function from a widgetized WP plugin (i.e. a WordPress plugin with an accompanying widget) …

Widgets control the order certain features appear on your WordPress site

(Widgets control how certain features on your site display)

If we could peek inside the Widget area, you would see that the front-end features appear on the site’s sidebar menu in the same order as they have been arranged in the active widget area …

Rearrange your site's widgets using drag-and-drop

If we reorganize these widgets in the Widget Area using drag & drop …

Drag and drop widgets in the widget area to rearrange their order

(Drag-and-drop widgets in the widget area to rearrange their order)

The widget features have now been reordered in your sidebar …

Rearrange widgets on your WordPress site using drag-and-drop

As you can see, this immediately changes the layout of the site’s sidebar.

Rearranging sidebar layout with widgets can help to improve your site’s visitor experience.

Note in the screenshot below that the ‘click to call’ function (3) is now at the top of the sidebar navigation area, and the ‘contact us’ banner (2) is found above the newsletter sign-up form (1) …

Rearrange sidebar elements with widgets to improve your site's user experience

(Reorganizing sidebar layout with widgets can improve your site’s user experience)

Removing Widgets From Your WordPress Blog Sidebar

Removing widgets from your WordPress sidebar area is very easy.

For example, let’s show you how to delete the Search widget from your sidebar …

Search widget

(Search widget)

To remove an active widget, you can either expand the widget and click the Delete link …

How to delete your widgets

(Delete widgets)

Or just drag the widget out of the Active Widgets section and into the Inactive Widgets area …

How to remove your widget

(How to remove your widget)

Repeat this process for any other widgets you want removed from the sidebar navigation section. You can always reactivate a widget by dragging it back into the active widgets area.

Widget Settings

Many widgets provide various options that allow you to further configure these. This includes making certain types of information hidden to your site visitors but visible to registered users, displaying additional forms, fields, or data, specifying sizes of sidebar images, videos, etc.

Click on the little triangle in the corner of a widget to toggle between expanding and collapsing the item …

Toggle to expand/collapse widget settings

(Toggles expand/collapse widget settings)

When the widget expands, you can change and save your settings, click Delete to remove your widget from the “Active Widgets” section, close the widget, or click on the triangle to collapse the widget …

Widget settings

(Widget settings)

Useful Information

Some widgets provide users with little to no configurable options, or they may only allow you to add something like an optional title …

Some widgets offer little to no configuration options

(Some widgets provide users with little to no customization)

Theme Customizer

Depending upon the theme you have installed on your site, you’re also able to customize and manage widgets without actually making changes to your site. This way, you can be sure that you like the customized edits before making any permanent changes to your site.

Widget management is a great feature of WordPress. You can work in preview mode inside the WordPress Theme Customizer screen (Appearance > Customize) and see how the widget content will appear prior to publishing it (to avoid making errors), or manage your widgets on the fly using the Widget editor screen.

Edit widgets live in the Customize section

(Edit widgets in the Customize section)

If you need to make changes to the site while viewing the front-end, just click on the Customize link …

Customize your site quickly

(Toolbar Customize Link)

This will bring you to the Customizer section in the back-end.

You can do several edits, modifications and adjustments to your widgets in preview mode (like adding, removing and moving widgets around), and see all changes in real time. If you like what you’ve done, click the “Save and Publish” button and the changes will instantly become visible to your site visitors.

Widget management - work in preview mode

(Widget management – work in preview mode)

Once the changes are saved, all changes made to widgets will be automatically updated.

Useful Tip

Because the theme you use affects how elements display on your site, I recommend installing your theme first before configuring widgets.

Also, remember to use the Customizer feature to preview your changes. This will save you from having to keep two browsers open while you go through this tutorial (one to work in and one to check how your changes are coming along).

Now that you know the basics of using widgets, let’s configure a number of commonly-used sidebar widgets in WordPress.

Adding Widgets To The WordPress Sidebar

***

This is the end of part one of this tutorial series.

Click on this link to view Part Two: Using Widgets In WordPress – Part Two

Be sure to take a look around the site, I have lots of tutorials to help you use WordPress more effectively and if you’d like information on all the ways that you can use WordPress to grow your business online, then I recommend subscribing (green box bleow), so you can be instantly notified when I publish new articles and tutorials. Also, please feel free to contact us if you need any help with WordPress.

Has this helped you become a better website owner? Please add your thoughts below or share this article with your friends.

[magicactionbox id=”15531″]

*Headway Themes is my absolute favorite theme and theme framework because it’s so diverse and flexible


Is A Geek in Your Pocket Right For You?

I created my Geek in Your Pocket Service, because I found so many website owners struggling to keep up with the maintenance and security of their websites.

I believe that maintaining your website doesn’t have to be overwhelming or unfriendly to your budget.  You can have a geek in your pocket that will keep your WordPress website updated and protected at a reasonable price.

My mission is show you how to become a empowered website owner, powered with the tools and support to keep your website in tip top shape and the best way to do that is with my Geek in Your Pocket.

You’re ready, I can feel it and I’d love to be your resident geek!

Discover Your Geek in Your Pocket Now >>
Read previous post:
Protect Your WordPress Site From Getting Hacked

WordPress frequently comes under attack by hackers. In early 2013, WordPress installations around the world were subjected to large-scale brute...

Close