WordPress Widgets

Amy Valentine

Amy Valentine, Web Designer, NZ

In this post, we focus on a WordPress feature that allows users to easily add content and applications to their site and reconfigure elements of their site layout with no coding or programming skills required… WordPress Widgets!

What Are WordPress Widgets?

Widgets are self-contained modules of code that perform a specific function, such as adding a form, text box or menu to your site. Widgets also allow you to easily add, reorder and/or remove different types of content and programs on your site.

In WordPress, you can also “drag-and-drop” widgets around inside sections of your administration area to quickly rearrange the layout of your sidebars, headers and footers.

WordPress is written using a scripting language called PHP (Hypertext Preprocessor). Widgets eliminate the need to know how to program PHP or manipulate PHP code to customize your site’s content and layout, and can be used to extend the functionality of a number of WordPress plugins. Many widgets even allow you to fine-tune their settings to further enhance their function and usefulness.

WordPress Widgets

Simply put, widgets allow you to:

  • Easily add content and functionality to your WordPress sidebar without having to touch any code,and
  • Rearrange how various elements display on your sidebar using simple drag-and-drop.

Widgets were originally designed to provide a simple and easy way of giving WordPress users design and structure control of their WordPress Theme.

WordPress themes that are properly “widgetised” allow users to control many design and structural aspects of their site’s sidebar, header, footer, and other areas.

Here are just some of the things you can add to your sidebar menus (and headers and footers, depending on your theme) using widgets:

  • List Of Pages
  • Blog Categories
  • Post Archives
  • Custom Menus
  • Links To External Sites
  • Links To Recent Posts / Most Popular Posts
  • Excerpts Of Recent Comments Added To Posts
  • Text and Graphic Images (e.g. advertising banners)
  • Testimonials and Quotations
  • Poll / Survey – Questions and Results
  • Content from RSS feeds
  • Newsletter subscription / opt-in forms
  • Videos
  • Social Media Buttons
  • Display Widgets From Others Sites (e.g. Facebook Friends)

Customising Your Site’s Layout With Widgets

With most static websites, changing the site’s layout requires editing code in the site’s pages or templates.

With WordPress you only need a few clicks of the mouse to completely rearrange how information is displayed in areas like your site’s sidebars, footers and navigation menus.

The built-in Widgets feature of WordPress lets you rearrange information on your sidebar and footers using simple “drag and drop” technology …

Using WordPress Widgets

In the above screenshot, you can see that we have rearranged the sidebar layout by switching the search and testimonial sections around. This was easily done by simply dragging and dropping the widget elements into different positions in the sidebar widget section.

Widgets require no code experience or expertise. They can easily be added, removed, and rearranged in the Widgets panel of your WordPress administration area …

Using WordPress Widgets

Some widgets are “fixed” in that they provide little to no configuration options, other than to add an optional title to the widget, as shown in the example below …

Using WordPress Widgets

Some WordPress Widgets offer various customization options and the ability to specify and configure settings. This includes enabling forms or fields, including or excluding data and information, displaying optional images, and more …

Using WordPress Widgets

Let’s take a look at an example so you can see how to reconfigure your site’s sidebar layout by rearranging the widgets in the sidebar section …

In the screenshot below, you can see that the right hand sidebar of the site displays a newsletter sign-up form at the top (1), then a “contact support” button below it (2), and a “click to call” function below that (3).

Using WordPress Widgets

This is how the above looks inside the Widget settings area …

Using WordPress Widgets

As you can see from the screenshot above, the features appear on the site in the same order as they have been arranged in the widget bar.

Let’s now rearrange the order of the above widgets in the Sidebar Widget Area, using the click, drag and drop method …

Using WordPress Widgets

The widget features have now been reordered in the sidebar …

Using WordPress Widgets

And this immediately changes the layout of your site’s sidebar, as you can see in the screenshot below ….

Using WordPress Widgets

Note: in the screenshot above the “click to call” feature (3) is now at the top of the sidebar menu, and the “contact us” graphic button (2) is located above the newsletter sign-up form (1).

Hopefully, you can see from the above examples just how powerful widgets really are and why they are such an important WordPress feature.

More Resources

Divi Tutorials – by the team at Elegant Themes – this should be your first go-to resource for learning how to use Divi.

Divi Video Tutorials – by Elegant Themes. Perfect for a quick overview of each module, plus lots more video tutorials.

Quiroz.co – Geno Quiroz uses Divi on his website and his blog posts are a rich source of custom CSS snippets and Divi tutorials.

DiviSoup.com – By Michelle Nunan, creator of the Divi Academy, Divi Club Membership and Divi Tutorials.

BeSuperfly.com – By Nathan Duvall, Divi child themes, plugins & layouts



Submit a Comment

Your email address will not be published. Required fields are marked *


Take your WordPress website to the next level

Get a free no-obligation quote today!