Many WordPress beginners are a little unsure about what widgets are and how to use them. To help, this article will give a detailed overview of widgets, show you how to incorporate them into your webpages and give you an understanding of the ways they can enhance your site.
Components of a web page
To get a proper understanding of widgets we need to look at the components of a webpage.
As you can see in the image, a webpage is divided into four main areas: header, content, sidebar and footer. The header usually consists of an image and a menu and is created using your theme’s options or customisation controls. The content is usually a post or page, though it can also be a range of other content such as an image gallery, product, portfolio or custom content. The sidebar and footer are for displaying a wide range of additional content on your website and this is created and put into a structure using widgets.
What are Widgets?
Widget are tools for displaying small pieces of content in your sidebar or footer. There are many types of widget, each with their own function, letting you display a specific type of content and giving you some control over how that content is displayed.
You can display a range of different widgets at the same time and have the ability to order the content in the way that best suits your website.
Where do I find widgets to use?
To find the widgets available to use on your website, navigate to Appearance then Widgets in your WordPress admin panel.
The widgets you can use can be found on the left-hand side of the page, under the heading Available Widgets. Widget availability depends on a number of factors. WordPress comes pre-installed with a number of widgets and themes often have their own additional widgets too. You can also install plugins which create other widgets and you can even create your own.
How do I add a widget?
Adding a widget is unbelievably easy. Either, drag and drop the widget you want to use into the widget area you want it to go (e.g. Primary Sidebar or Footer 1) or click on the widget and select widget area from the dropdown list as in the image below.
All you need to do then is adjust the settings to your preference and click on save. You can see this in operation in the image below, where we’ve used a Text widget to add some sample text to our sidebar.
The sidebar on our website now looks like this:
Putting widgets in the footer is just as simple. Here we’ve put a Contact Info widget in Footer 1, a Subscribe widget in Footer 2 and a Search This Site widget in Footer 3. The final result looks like this:
I’ve added a widget, but how do I remove it?
Removing a widget is just as easy as adding one.
- Return to the Widgets page (under Appearance) in the WordPress admin panel.
- Find the sidebar or footer area that you want to delete your widget from.
- Click on the widget you want to delete so that the settings box opens.
- Click Delete at the bottom. The widget will now disappear. See image below.
There are, however, two alternative options which you may want to consider. If you want to move the widget to a different widget area you don’t need to delete and start again instead just drag the widget to the new area you want it to go to and it will appear there automatically.
Alternatively, if you think you may want to use it at a later time, just drag the widget out of the widget area and drop it at the bottom of the Available Widgets page under the Inactive Widgets heading. Any setting you saved will be stored here.
How to organise the order of widgets in a sidebar or footer
In a sidebar, you organise simply by dragging and dropping. If you want to rearrange, just click on the widget you want to move and drag it above, below or between the others.
In the footer, there are usually four sections, each taking up a quarter of the page. Footer 1 is usually on the left and the numbers go in order to Footer 4 on the right. Just drag your widget to the most appropriate one.
Issues that you need to be aware of with widgets
Whilst widgets offer great functionality to a website there are some issues which you need to consider.
Adding too many widgets may slow your website down as each individual widget will require extra data to be sent to your reader’s browser. Only use those which are needed or valuable for your site.
Sidebars and footers come in fixed widths, depending upon the design of your site. Sometimes it is possible to put images or videos in a widget which are too big for your sidebar / footer and which the widget has difficulty resizing. This can result in either squashed images, sidebars which overlap into the main content or webpages that need to scroll sideways to be fully viewed. All of these should be avoided. To fix this, you may need a different widget or need to tweak the image or video embed code. This issue can also be caused by adding advertising code in a widget, so if you use Adwords or show affiliate marketing banners served from another website, do be aware.
Whilst sidebars and footers have fixed widths, they don’t have a fixed height. If you add too many widgets in a sidebar your page can look very odd; the sidebar keeps going on and on after the content has finished. Ideally, the content of your sidebar should not be longer than the content of your post or page. With footers, this can look even worse. A footer should be short 300px deep maximum. Always restrict to one widget per footer section and keep the content short in the widget’s settings
The other thing you should always check is how your sidebar and footer displays on mobiles and tablets. Responsive themes usually work well, but occasionally some of them can display sidebars and footers in ways which look a little odd on mobile devices.
Looking for widget flexibility?
If you want to take your widget use one stage further, then one of the best things you can do is have different widgets showing on different pages or categories. This way you can match the content of your sidebar to the needs of people who visit different sections of your website. This can be achieved by using plugins such as Content Aware Sidebars.
Conclusion
You should now have a clearer understanding of what widgets are, where on a web page you can place them and how to put them there and remove them. In addition, you should have a better grasp of their benefits and some of the issues they can cause.
If you are looking for WordPress hosting, check out our Dedicated WordPress Hosting page. Our affordable packages are packed with helpful features and backed up with expert WordPress support and first-class security.