Previously on the CogitActive Saga:
Widgets can be managed from two locations: Appearance > Customize > Widgets or Appearance > Widgets.
Let me start from the beginning: what is a widget?
- Widget
- In WordPress a widget is a self-contained area of a web page that performs a specific function, or the code that generates such a self-contained area.
According to WordPress, widgets were originally designed to provide a simple and easy-to-use way of giving design and structure control of the WordPress Theme to the user
1. Indeed, they are modular elements that allow you to add content and features in the widget area (e.g. sidebar) with no code experience or expertise
1. As such they are an inherent part of WordPress’ design and layout customizations
. In keeping with this idea, there is no restriction onto where the widget area(s) can be. For example, the Twenty Seventeen theme includes two widget areas in the footer in addition to the typical sidebar location. However, themes are not required to have widget areas and some of them are not widget compatible/ready.
WordPress widgets are independent blocks of content which can be added in the widget areas provided by the theme. They add some specific functionality or feature to a WordPress website.Sunita Rai
WordPress comes with many widgets out of the box. Specifically, the default Twenty Seventeen theme includes seventeen widgets. However, themes – in addition to determining the widget areas – can come bundled with their own set of widgets. These might bring additional (i.e. not covered by the default set), as well as more advanced (as compared to the default set), functionalities. Now, if those are insufficient for your needs
1, you can get even more widgets using plugins. While some widget plugins will add a single functionality, others will provide a completely new collection of widgets. Of note, plugins (not categorized as widget plugins) can also contain widgets.
Because widgets are integrated into some themes and plugins, deactivating a plugin or switching to another theme will remove the widgets you were using that were connected to them. So, if you stop using a plugin or change themes and notice certain widgets disappear, now you know why.Ariel Rule
Even though themes and plugins can provide additional widgets and being aware of those is necessary, I will restrict this post to the ones pre-packed with WordPress (using the Twenty Seventeen theme). Granted, they might be quite basic; still, understanding how the default widgets work is essential.
Appearance > Widgets
The Appearance Widgets screen comprises three sections: Available Widgets (on the left), Inactive Widgets (on the bottom) and the available widget areas (located on the right side). As already stated, the Twenty Seventeen theme comes with seventeen widgets (see table below) that can be added to three widgets areas, namely Blog Sidebar, Footer 1 and Footer 2.
| Archive | Audio | Calendar |
| Categories | Custom HTML | Gallery |
| Image | Meta | Navigation Menu |
| Pages | Recent Comments | Recent Posts |
| RSS | Search | Tag Cloud |
| Text | Video |
You can find a description of the various types of widget along with their configuration options
2 in the Appearance Widgets Screen article; at least for twelve of those widgets, the missing one – added recently – being Audio, Custom HTML, Gallery, Image and Video. Briefly, the Audio widget – introduced with WordPress 4.8 – allows you to add an audio player, the appearance of which will vary by theme. The Custom HTML widget – introduced with WordPress 4.8.1 – actually works similarly to the Text widget in WordPress 4.7 and below. The Gallery widget – introduced with WordPress 4.9 – provides you with a simple way to display a photo gallery (with few options for layout). The Image widget – introduced with WordPress 4.8 – provides you with a simple way to display an image (to which you can even add a link). Last, the Video widget – also introduced with WordPress 4.8 – makes it easy to display a video from the media library or from YouTube, Vimeo, or another provider.
To populate your sidebars/widget areas with individual widgets, drag and drop the title bars into the desired area.
As explained in the aforementioned WordPress article2, as well as in WordPress Widgets, the (conventional) procedures to add new widgets are straightforward. You can either use the drag-and-drop method (from the Available Widgets section to the actual widget area that you want to use it in) or click on the widget name. If you opt for the latter approach, just select a destination and click the Add Widget button (see screenshot). Alternatively, you can Enable Accessibility Mode, which allows you to use Add and Edit buttons instead of using drag and drop
. Of note, widgets may be used multiple times; that is you can add multiple times the same widget (even to the same widget area).
You can rearrange the order of widgets by dragging and dropping them into different arrangements.
Once in the widget area, you can configure the widgets’ settings. The number of options will vary by widget, though. For instance, the most basic widgets usually enable you to add only a title (which is optional), while some complex ones will provide more detailed settings. To view your changes, you have to click the Save button – a necessary measure not to lose your changes anyway – and then visit your site (i.e. there is no preview mode).
Once you drag a widget into a sidebar, it will open to allow you to configure its settings. When you are happy with the widget settings, click the Save button and the widget will go live on your site.
Clicking the Delete link will remove the widget from the widget area, hence from your site. Now, if you would like to remove a widget from your site, but keep its configuration, simply drag it into the Inactive Widgets section. Like this, the widget and all your settings are stored for potential future use. When you are ready to return the widget, simply drag it back to the widget area. This functionality is especially helpful when you switch to a theme with fewer or different widget areas
1.
If you changed themes and seem to be missing widgets, scroll down on the screen to the Inactive Widgets area, where all of your widgets and their settings will have been saved.WordPress
In my post about the Customizer, I claimed that I favor the conventional approach (i.e. via Appearance > Widgets) to manage widgets because of the Inactive Widget functionality. Now, I have to admit that the preview feature of the Customizer has made me change my mind. The Manage with Live Preview button will redirected you to the Widgets section of the Theme Customizer. You can read this section of the aforementioned article for how to manage widgets from there.
Which widgets?
By default, the Blog Sidebar of a newly installed WordPress came pre-filled with the following widgets: Search, Recent Posts, Recent Comments, Archives, Categories and Meta. Obviously, you don’t have to keep those; in fact, the ones you use will depend on your site’s needs and audience
3.
Search
Giving visitors the ability to search for content is crucial. Therefore, keeping this widget is a no-brainer – even though some people claim that the WordPress search feature is fairly limiting
. Not only this widget adds a search bar to your site, but it also makes navigation easier. As opposed to featured packed third-party alternatives, this widget’s only customization choice is to provide a title (optional).
Admittedly, internal search in WordPress doesn’t compare to advanced search algorithm. Moreover, it will not return results from widgets, comments, categories, gallery captions or other text, or tags
. Indeed, this widget searches only through the titles and main content of your posts (and pages), as well as the titles, alt text4, file names and captions of your medias.
Anyway, as for now, I have decided to keep the Search Widget (in the sidebar of my blog and in the footer of my website).
Recent Posts
This widget offers a smart way to encourage visitors to explore your latest content
3. Again, this built-in widget might be basic; still, it comes with some customizations. First, you can change its title (i.e. what will be display above the recent posts list). Second, you can choose the number of posts to display (up to 15). Third, you can choose to show or hide the published date(s) of the post(s).
As you can see on the sidebar of this blog, I decided to keep the Recent Posts widget.
Recent Comments
As opposed to the previous one, I did not keep this widget, which displays a list of the blog’s most recent approved comments
2. The fact that this default widget has very limited features did not influence my decision. Simply, I don’t see how this one – as opposed to the two aforementioned widgets – could improve navigation.
Archives
This widget organizes your previously published posts by month. Given my content type, I don’t see the point of this widget. One more and less!
Categories
As emphasized in WordPress categories, you should make it as easy as possible for your readers to navigate through your content. The Categories widget allows you to do just that by making your categories (and sub-categories) easily accessible. Besides, this will help your visitors quickly see what topics you write about.
This widget comes with few settings. As often with widgets, you can provide a title; if you don’t it will default to “Categories”. By default, it displays the categories in list view, but if you want to save space, you can opt for the Display as dropdown option. Importantly, in the former configuration, you can hover over any category to see its description as a tooltip; however, this feature is not present in the dropdown view. Next, you can check the Show post counts option if you want the total number of published posts for each category to be specified (next to its name). Last, if you have sub-categories, you can select the Show hierarchy checkbox to show the parent/child relationships in an indented manner
2.
Navigation Menu
Although the Categories widget is very convenient, it is not without limitation. First, you cannot decide to show only the parent category (i.e. without the sub-categories). If you uncheck the Show hierarchy option, all the categories will be listed without indentation. Second, you can’t prevent the widget to display the description of the category on hover (in the list view). This can become a problem with long descriptions; it will look congested. Third, you cannot specify the order of your categories and subcategories; they are listed alphabetically.
You could look for a third-party widget with more advanced customization to tackle these limitations; yet, a better alternative is to use the Navigation Menu widget. Indeed, WordPress allows you to insert your categories to a custom menu. Specifically, you will have to create a new menu (via Appearance > Menus) and add your categories to it (see Creating the structure of my website: from pages to menu). Then, within the aforementioned widget (in Appearance > Widgets), you will just select the desired created menu (and provide the widget with a title).
When creating your menu, you can decide to include only the categories you want. For example, you may exclude your subcategories or some categories that might not be worth showcasing. Problem 1 solved! Next, you can provide a short(er) description in the Title Attribute property. Indeed, this field defines what will be displayed when the visitor hover over the category; i.e. instead of the (official) category description, which is listed in the Description field. You can even decide not to provide any, leaving this field blank. Problem 2 solved! Obviously, in addition to defining your hierarchy, you can adjust the order of appearance of each category (and sub-category). Problem 3 solved!
Meta
This widget is a little different compared to the others. It provides five links:
- Site Admin
- Log in (or log out)
- Entries feed
- Comments feed
- WordPress.org
Granted, it is common courtesy to provide a link back to the WordPress website. However, while this widget may come in handy for specific websites, I really don’t see the point of keeping it. I do not allow new registration – neither for sites nor users (see Network Settings). Concerning the feed to this blog, it is already in the Social Links Menu (bottom left of this blog). Admittedly, at the time of this writing, the RSS Social Icon is still missing (in Twenty Seventeen), hence the chain link in its stead!
Which widgets (reloaded)
After some trimming, let me go through some other widgets that are worth mentioning – if only the ones that I added to my blog. Of note, the Navigation Menu widget is one of those (see above) even though not listed below.
Text
This widget used to have a special place in the default set – until WordPress 4.8 – as it was allowing HTML, embeds, and JavaScript. However, the latter WordPress update introduced TinyMCE (i.e. the editor before Gutenberg) functionality to this widget. As the Visual editor tends to strip out portions of code, a new widget – Custom HTML – was introduced with WordPress 4.8.1 (see below). Now, the current Text widget – a legacy of its previous version – should be used for arbitrary text only.
Indeed, while the former version was commonly used for adding audio, images, videos, and of course HTML, it is now better to use the Audio, Image, Video and Custom HTML widgets, respectively (even if the Text widget comes with an Add Media button and allows basic HTML markups). In other words, keep the Text widget only for normal formatted text as exemplified in my “Welcome to Beyond!” on the top of the sidebar.
Custom HTML
This is the new best friend of advanced users, or at least to anyone who needs to enter HTML code. It has syntax highlighting, auto-complete and error detection. Interestingly enough, given the flexibility of this widget, I didn’t even bother using the Image widget to display the following picture in my Footer 2.
Tag Cloud
This widget is another great way to bolster the navigation at your reader’s disposal. As stated in WordPress tags, not only can this help your visitors to access posts about specific topics with ease, but also this shows the most prominent subjects in your blog. That being said, as already stressed several times, the current version of this widget (since Twenty Seventeen 1.4) displays all tags alphabetically in the same font size. This accessibility improvement wipes out the cloud format in which the font size of tags varied according to their counts. You can still provide such information using the Show tag count checkbox, but this is not as stylish.
Wrapping up
Definitively, widgets provide a very simple way to customize your site and include the exact elements you want (in those pre-defined widget areas). As illustrated in this post, the default widgets – despite being basic – already offer a fair number of possibilities. Of course, you can look for more advanced third-party widgets, but you should keep in mind that your primary goal is to make your site as user friendly as possible. In other words, don’t overload your blog with too many widgets as this can cause distraction and take your visitors’ attention away from your main content.
1 See WordPress Widgets. ^
2 See Appearance Widgets Screen. ^
3 John Hughes (2018) WordPress widgets 101: what they are and how to use them. Themeisle. ^
4 The alt attribute of the <img> tag (in HTML) specifies an alternate text for an image, if the image cannot be displayed (e.g. slow connection) or if a user for some reason cannot view it (e.g. screen reader). Moreover, this text helps search engines to understand what the image is about and plays an important role in SEO. ^