How to add widgets to a WordPress website sidebar

Widgets are panels that can appear on the left or right of the main content on a web page or at the bottom. Nearly all websites use them and the sidebar that appears on the right of many web pages is a common example. They are optional, but so useful you will want to include them on your own website.

Widgets can contain almost any content, but common uses include a list of popular articles on the site, an image or text promoting a product, service, or web page, adverts, a list of previously posted articles and so on.

The content in widgets can be used to sell your products or services, highlight great articles you have written and keep people on your website for longer, and earn money through advertising.

There are different types of widget and each widget is designed to display a particular type of content.

Widgets can be displayed only in certain locations, such as in the sidebar. If a theme does not have a sidebar then you cannot display widgets there.

A theme can add more widgets to the ones that come with WordPress.

Explore the widgets

Log into your website at yoursite.wordpress.com/wp-admin

Click Appearance in the sidebar on the left.

Click Widgets in the sidebar.

On the left side of the page is a list of widgets. Each has a title and brief description.

On the right is a list of locations – the places in the site’s design and layout that are able to hold widgets. In the screenshot above there is Sidebar, Content Bottom 1 and Content Bottom 2.

The locations depend on the theme and if you install a different theme, there will be different locations.

Each location can be expanded or shrunk using the arrow in the top right corner of the location, so you can expand Sidebar for example, and show the widgets located there, or expand Content Bottom 2 and see a list of widgets there.

Edit a widget

Expand Sidebar and there are two example widget – Text and Search.

Click Text and expand it by clicking the little arrow in the corner next to its name.

Click in the Title box and replace the text with your own.

Click in the Content box and edit the text, replacing it with your own.

Click Save at the bottom to save the changes.

Show and hide widgets

Widgets can be deleted by clicking the Delete link in the bottom left corner. However, there is another way to control whether a widget appears on your website if you have the Jetpack WordPress plugin. (It’s built into wordpress.com, but needs to be added to self hosted WordPress.)

Click the Visibility button at the bottom.

A rule can be created that determines whether the widget is displayed on not. Here is an example, and as you can see, it is almost in plain language:

Show if Page is Front Page

Click Save and this widget will only appear on the home (front) page of the website and no other.

Visibility rules enable you to choose which widgets appear on which pages. If no rule is set then a widget appears on every page.

Check the widgets

When adding and configuring widgets, it is useful to have two web browser window open. One in the admin interface to configure the widgets and the other showing the website as visitors will see it. You can save a widget, switch to the other window and reload the page to view the changes.

Here is the widget on the home page. It is in the sidebar on the right,

Add a new widget

A widget can be added to a location, such as Sidebar, by clicking and dragging it from the list on the left.

When a widget is dragged and held over locations on the right, they shuffle around and open up spaces where it can be dropped.

This takes some practise! Drag the Archives widget over to the Sidebar, wait a second for a space to open, and then drop it.

The order of widgets is changed in the same way – drag them and drop them in the new position. A widget can be dragged from one location, such as Sidebar, and dropped in another, such as Content Bottom 2.

A widget can be used more than once. The Search and Archive widgets only needs to appear once, but you might want to have several text widgets to display different things.

After adding a widget, expand it with the little up/down arrow in the corner and configure it. Archives has a couple of tick boxes to enable or disable features that affect the display. Try them and see what happens by viewing your site.

The Archives widget can be seen on the right and it lists the months that new articles were posted. In the screenshot above, two articles were posted in October 2016. Clicking the link displays the articles.

It is a useful widget that helps visitors find content on your website.

Advanced widgets

Adding the Text widget is more difficult than the Archive widget because it is off the bottom of the page.

Scroll right down to the bottom of the page (widgets are in alphabetical order). Click and drag the text widget and let the mouse hover just off the top of the page, somewhere in the web browser’s toolbar or address box.

This causes the web page to scroll and when you get back to the top of the page and can see the locations, you can drop it to add it.

Text widgets are very powerful because they can contain code. When writing posts and pages there is an editor that works like a word processor, but here you have to use HTML code to make text bold or italic, create links and so on.

Here is an example of code in a text widget.

The text widget was added to Content Bottom 2 and so it appears at the bottom of the page. Here’s what that code looks like.

Writing your own code requires knowledge of HTML and other technologies. That is not part of this course.

What you need to take away from this example is that code is inserted in text widgets. sometimes you are asked to insert code, such as for an advert, affiliate link, or for some other purpose. You often don’t need to understand it, you just need to be able to copy it and paste it into a text widget.