There are so many great things about choosing the WordPress web publishing application for managing and growing your web site. One of these is that you can easily add content, expand your website’s functionality and rearrange your site’s layout with no web coding skills required.
WordPress allows you to quickly and easily insert, remove, and control various types of content from your site’s sidebar menu (and header and footer sections too, depending on what theme you have installed) using widgets.
(Widgets)
In this blog post you will learn how widgets work, why widgets make life easier for non-technical users and how widgets can help add new functionality to your website.
WP Widgets: An Introduction To WordPress Widgets For Beginners
(Widgets make managing and using WordPress easy!)
Widgets are self-contained modules of code that perform a specific function, such as adding a form, or a text box or item to your site.
The WordPress software is written using a scripting language called PHP (Hypertext Preprocessor). Normally, to add features and functions to a website, you have to learn how to program web code.
Now … don’t worry if the above sounds too geeky. As will soon see, WP widgets are perfect for non-technical users.
Widgets eliminate the need to know how to program code or manipulate PHP code in order to enhance the functionality of your site.
(WP widgets help you manage many features and functions on your site without requiring knowledge of coding)
Widgets were originally developed to provide an easy way to give WordPress users to manage aspects of their website’s layout and functionality.
In plain English terms, a widget allows you to:
- Easily insert, edit and delete functionality in areas of your site without having to touch any code, and
- Reconfigure the functional layout of your theme on widget-enabled areas of your site (e.g. the sidebar, header, footer and other areas) using drag-and-drop technology.
Here are just some of the cool things you can add to your site’s sidebar menu (plus headers and footers and other areas, depending on the theme you have installed) using widgets:
- nested list of your web pages
- categories
- blog post archive
- menus displaying only selected pages
- links to resources
- links to recent posts
- recent comments
- text ads
- testimonials
- polls
- RSS feed items
- subscription form
- video galleries
- social media share buttons
- display widgets from other sites (e.g. Facebook friends)
- administrative forms (e.g. login, register, etc.)
In other posts and tutorials, we provide more detailed explanations of WordPress plugins and themes; what they are, what they do, how plugins and themes can easily add loads of new features to WordPress and even alter the whole look and feel of your website.
As you will learn shortly, WP themes affect how widgets display on your website and a number of plugins add accompanying widgets that can help further fine tune your website or blog’s features.
Widget-Ready Areas
Most WP themes support widgets and provide widgetized sections on your site where you can add widgets to.
Normally, widget-driven functions can be found in your sidebar, but depending on the theme, these can also be in the header, in the footer, sometimes even below or above the content area.
It all depends on the theme that you have installed on your site.
For example, the WP theme in the screenshot below has only one widget area displaying items in the theme’s sidebar navigation …
(Some themes have only one widget-ready section)
Below is the widget screen of the theme shown above, where you can see that this specific WordPress theme only includes one widget-enabled area …
As you can see from the above, the only area where you can add widgets to your site using the theme above is in the site’s sidebar section.
In contrast, the WordPress theme shown in the screenshot below contains a number of widgetized areas …
(Many themes provide a number of widget-ready areas)
Here is the widget screen of the theme above, and you can see how many widget areas are included in this specific WordPress theme …
(Multiple WordPress widget areas)
As you can see, with the above theme, you can add widgets to the sidebar area of 2 different page templates (Main Sidebar and Showcase Sidebar) and 3 different Footer areas (Footer Area One, Footer Area Two, Footer Area Three) …
(Some WordPress themes let you add widgets to your site’s footer section)
How Do I Access My Widgets?
The Widgets area is located inside the admin by going to Appearance > Widgets …
This loads the Widgets section in your browser …
(Widgets Area)
The Widgets screen displays a list of all the widgets that are available.
On the right-hand side of the window, you can see your “active” widgets …
(Activate or deactivate widgets using drag & drop)
Available widgets can be activated or deactivated by dragging-and-dropping items to different areas of the widgets screen.
Widgets dragged from the Available Widgets section to widget areas like your sidebar, footer, etc. become activated for use on your site.
Your Widgets area also includes an Inactive Widgets section that lets you remove any widgets that you no longer want on your site. Inactive widgets do not lose their pre-configured settings.
By default, your site already comes with a number of pre-installed widgets (e.g. widgets for displaying your pages, links, posts, post categories, adding text, adding RSS feeds, adding tags, adding a search box, etc …) and active widgets.
These widgets are available right out of the box in your default WordPress theme and display items like Search, Archives, Categories, etc. to your site visitors …
(By default, your site already comes with several pre-installed widgets)
Sometimes, you may find that new widgets get added to your Widgets area as new WordPress plugins are installed on your website or blog …
(Installing new WordPress plugins can sometimes add new widgets to your Widgets admin area!)
Widgets Features: Drag And Drop
WordPress widgets are great because you can easily add, activate, deactivate, reorder and delete them all from your Widgets section using simple drag & drop …
(Rearrange your site’s widgets using drag and drop)
Drag and drop lets you easily reconfigure the order and layout of your website’s widgetized areas.
For example, take a look at the image below. In this site, the widgets have already been configured to show:
- A newsletter opt-in form,
- A click for support button, and
- Click to call sales buttons from a widgetized plugin …
(Widgets control the order certain features on your site display)
Inside the example site’s Widget area, you would see that these features appear on the site in the same order as their corresponding widgets were arranged in their active widget area …
If we reorganize these widgets in the Main Sidebar Widget Area by dragging and dropping elements in the widget area …
(Drag and drop to rearrange widgets in your widget area)
The widgets have now been reordered in your sidebar …
As you can see, this instantly reorganizes the order of items in the site’s sidebar. Note in the screenshot below that the click to call function (3) is now at the top of the sidebar menu, and the contact us section (2) has been moved to the spot above the newsletter opt-in form (1) …
(WordPress widgets are very easy to use!)
Pretty cool stuff, huh?
Here are a few other useful things about WP widgets that are also worth keeping in mind about:
Widget Management – WordPress Theme Customizer
Depending on the theme that you have installed on your site, you’re also able to customize and manage widgets without making actual changes to your site, so you can be sure that you like what you see before committing these changes to your live website.
You can do a number of modifications and adjustments to widgets in preview mode, like inserting, removing and reorganizing the currently added widgets to any widget areas that your theme makes available, and it’s all done in real time. If you like what you’ve done and click the “Save and Publish” button, your changes will then be instantly updated and reflected on your site to visitors.
(Widget management – work in preview mode or configure widgets on the fly!)
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 your widget content will appear prior to publishing any changes (and avoid making errors), or configure widgets on the fly using the Widget editor area as discussed previously.
Widget Configuration
As we’ve explained earlier, with WordPress you can easily reorganize how information is displayed in widgetized areas of your website sidebars, footers and navigation menus with only a few clicks of your mouse button, using drag-&-drop …
(Reorganize sidebar elements with widgets to improve your site’s visitor experience)
In the screenshot above, for example, you can see that we have easily rearranged the sidebar by switching around the search and testimonial sections. As you now know, this was easily done by simply dragging and dropping the widget elements into different positions inside the sidebar widget area.
Rearranging sidebar elements using widgets can help to improve your site’s visitor experience.
Now … what about the widgets themselves? Can the widgets be customized instead of simply added, removed and rearranged?
Absolutely!
With most traditionally-designed websites, you would need to edit code in your site’s templates to rearrange the layout, customize features on page elements like subscription forms, or just add useful features like page lists, or a dropdown menu of your post categories, an archive section, menus, links to recommended resources, links to your recent posts, the latest comments, a section displaying advertising banners, testimonials or survey questions & results, content from RSS feeds, product catalog images, Twitter feeds, and more.
While some widgets are “fixed” in the sense that they provide little to no customizable options, other than to add something like an optional title to the widget as shown in the example below …
(Some widgets give you little to no customizable options)
Most widgets offer various settings that allow you to further customize these. This can include things like making certain types of information hidden to your site visitors but visible to registered users, displaying additional forms, fields, or information, specifying sizes of sidebar images, videos, etc. and more …
(Most widgets provide users with configuration options!)
How To Use WP Widgets
As you have just seen, widgets require no coding experience or programming expertise to use. Most widgets can be added to your website or blog simply by activating a plugin and then dragging and dropping the plugin’s widget into your Active widgets area.
For some useful tips and tricks to using widgets, see these great step-by-step tutorials showing you how to use various types of widgets in WordPress to improve the effectiveness of your site, plus lots of cool tips for getting the most benefit out of WordPress with widgets:
- How To Use And Configure WordPress Widgets – Part 1
- How To Use And Configure WordPress Widgets – Part 2
- How To Use And Configure WordPress Widgets – Part 3
- How To Use And Configure WordPress Widgets – Part 4
Related Posts
If you are new at WordPress, you may also find the following topic-related posts useful:
Hopefully, now you have a better understanding of problems that can affect your web site and how WordPress can help you get better results online. To learn more about the benefits of using the WP CMS platform please see our related posts section.
***
"I am beyond impressed with what you have put together. I can tell that you put a ton of hard work into building what you have. You have the absolute best content on WordPress I have ever seen!" - Robert T. Jillie
***