A Basic Tutorial on Sidebar Widgets
In the older days of the Internet, there was no inherent separation between the actual content of any given web page and the web design under which that content was displayed. Each page was coded individually such that the content and the design were intrinsically intertwined. With modern content management systems like WordPress, this is no longer the case. What this means is that you can alter the design of a web page without directly impacting the core content and vice versa. Part of this dynamic has to do with the sidebar widgets that you’ll find on most WordPress blogs.
Even if your technical expertise is minimal at best, you can still easily add, move, and change the sidebar widgets on your blog. This is one of the easiest ways to implement advertising and introduce features that can improve the user experience, like easy access to recent posts, recent comments, post categories, social media profiles and more.
What Are Sidebar Widgets?
There are many components to any given WordPress theme. Some of these can only be altered or updated by digging straight into the hard code of the PHP templates and CSS stylesheets, whereas others can be adjusted through a more visual or intuitive interface. Sidebar widgets are one such example.
With the noted exception of single-column designs, most WordPress themes will have one or more sidebars. A common example is to have the main content in a wider column to the right and to have a single sidebar to the left. Some themes may have sidebars on either side of the main content. In most cases, editing these sidebars does not require having to change the hard code of the sidebar.php file directly. Instead, they can be adjusted by adding, moving, removing and customizing sidebar widgets.
The best to understand widgets (which can also apply to footer widgets in some themes) is to think of them as individual modules that can be easily moved around. This is not unlike the home screen widgets you might find on an Android smartphone or tablet. You could have a widget for a search bar, another widget for a calendar of posts, and a widget for your blogs RSS information, among many others.
Adding and Removing Widgets
Some WordPress themes, like the default ones that are released each year (e.g., Twenty Fifteen) allow users to customize widgets through the same WYSIWYG interface as changing other elements of the blog. For most other themes, the process is equally intuitive and easy to use.
- Log into your WordPress blog as normal through example.com/wp-admin, replacing example.com with your blog’s domain.
- Click on Appearance in the navigation bar along the left side of the screen.
- Click on Widgets from the resulting sub-menu.
- The available widgets are listed along the left, while the current themes sidebars are shown on the right.
- Add a new widget by clicking and dragging one of the available widgets and placing it in the desired location in the desired sidebar.
- Remove a widget by clicking and dragging one of the active widgets away from the sidebar listing.
Many of the sidebar widgets available in WordPress (and with specific themes) can have different options available. Under the sidebar listing, click on the downward facing arrow for any given widget to see what options are available. The options are widget-specific.
Custom WordPress Widgets
If you would like to display information that is not available through one of the default widgets, it is possible to create a custom widget. Possible usage cases here include advertising code from any given ad network, promoting your own products or services, or including a widget with your latest tweets from Twitter.
- On the same widget customization screen as above, choose the Text widget from the available list, clicking and dragging it to the desired location on the desired sidebar.
- Click on the downward facing arrow for the widget to edit.
- Enter a title for the widget. This text will typically be displayed above the widget as header text in the sidebar. The particulars are defined by each theme.
- Click on the blue Save button.
Whenever you add, remove, move or edit your sidebar widgets, it is a good idea to have a separate browser window with the main page of your blog to view these changes. A regular refresh (F5) may not reflect all changes, so be sure to use a hard refresh (CTRL+F5) to make sure you are getting the newest version of your blog.
Saving Widgets for Later Use
You may create a custom widget that you no longer require, but that you may wish to re-implement at some point in the future. Thankfully, you don’t have to discard your unused widgets altogether. To save widgets for later use, simply click and drag the widget in question from the sidebar listing to the list of Inactive Widgets, which is shown beneath the list of Available Widgets. When you would like to use one of these widgets again, simply click and drag into position as before.