The more you learn about the features and tools of the WordPress website administration panel and the features you add to your site, the more your opportunity to design a professional and attractive website for visitors will increase. Today we will talk about explaining Sidebar by clarifying all the improvements you make as part of the rest of the parts of the WordPress control panel .
We will learn how to customize the sidebar of a WordPress site and how to deal with all its components professionally, and we will learn how to show or hide the sidebar on some types of screens, and other things that play a major role in moving your site to a professional level.
What is a sidebar and how is it useful for the site?
Sidebar means the sidebar that appears on most pages of the site. As you notice, while browsing one of the articles on the WordPress website from the desktop version, you will notice the presence of a rectangle containing some elements from the site to the left of the article. This is one of the sidebar applications for customizing and preparing content. The website and facilitate browsing in a way that helps improve the visitor’s experience.
There is no doubt about the great benefit that the sidebar adds to your site, but this does not mean that you should exaggerate in displaying widgets that have no benefit, as this will lead to negative results and will confuse browsers of your site. On the other hand, you will need to include a sidebar that contains the most important interactive elements that you want to display in All pages of the site with the aim of increasing user interaction.
This strategy helps you improve the visitor experience, and also helps increase the length of time the visitor stays on your site, which in turn reduces the bounce rate, and thus your site is highly trusted by visitors and by search engines as well. Therefore, it was necessary to review the most important elements of the sidebar in order to better customize it for your site.
Side bar and widgets
Widgets are the main component of the sidebar, because the primary goal of developing the sidebar is to include widgets within it to create the appearance of the site, design it, and arrange its elements in the desired manner.
When you enter the WordPress control panel and then go to Appearance << Widgets , you will see a shape similar to the image above. The image above shows two main parts:
- Widgets bar: which contains all the widgets that you can drag and place inside the sidebar of your site or in any other part supported by the template.
- Widget insertion bar: In which you can insert any number of widgets that you wish to appear on your site in front of visitors. We advise you to use it to add widgets that are useful to the visitor and not to use all the widgets that may distract the reader.
Widgets are elements programmed by WordPress developers in order to perform a task or display or add additional elements or parts within your site without your need to modify the code.
You can insert widgets into the sidebar, header, footer, or any other part of the site, provided that your template supports it. You can do this by entering the WordPress control panel and then going to Appearance << Widgets , in order to see the parts that are supported by the template you are using.
We can see so far that it is simple when you need to create a sidebar within your site, as you easily drag any of the widgets you want to insert into the sidebar box. After that, the side bar will appear on your site, including all the widgets you added previously.
This is an example of a simple sidebar that contains some basic widgets found in most themes, such as archives, categories, and collections.
The most important widgets in WordPress templates
There are many widgets supported by WordPress templates , and although free templates contain a good repertoire of widgets, if you want more customization and variety in choosing widgets, paid templates are the right choice for you.
Among the most popular widgets that you can benefit from, and you can find them in most templates, are the following:
- “Latest Comments” : displays the latest comments within your site’s content, and when you add them, you can specify the number of comments you want to appear at the bottom of the article or one page.
- “Latest Articles” : Such as the one that appears on the WordPress website in Arabic and is located on the far left of the page, as it contains articles and explanations for beginners.
- “Categories” : It includes a drop-down list containing the categories that exist within your site, and the visitor can click on one of them to open the content classified within it.
- “Search” : It is used to provide visitors to your site with the opportunity to search for specific content by typing the name of the article or page into the search box, and the widget automatically displays the search results most relevant to the topic within your site.
- “Image”: Through it, an image can be displayed in a designated part of your site, such as displaying an advertising banner.
- “Sound”: It is also used to insert an audio file within the site, and you can customize it to play automatically or when the visitor presses it to play it. It can be used if you broadcast radio broadcasts on your website for visitors to stay informed of the latest news and developments.
- “Calendar” : inserts a small box containing the calendar for the date and time according to the settings you choose.
- “Shopping Cart” : This widget is available in templates designated for e-stores, or when installing an e-commerce add-on such as Woocommerce, this widget appears, which displays the customer’s shopping cart inside the store.
- “Sort by price” : It is also one of the widgets that appear in online store templates, as it displays a slider that allows the visitor to sort products descending or ascending according to price.
Add widgets to the sidebar from within the control panel
You can easily add widgets from within the WordPress control panel by following these steps:
- Go to the control panel, then go to: Appearance >> Widgets .
- Choose the widget you want to add to the side bar of your site, or to any other part.
- Click on the selected widget to open a drop-down list containing the custom parts within your site, into which the widget can be inserted.
- Among these options, you will find the “side bar.”
As you can see in the picture, we can choose the part in which we want to insert the widget. Here we chose “ the blog sidebar ,” which is the side bar of the site. After that, we will click on “ Add the widget ” to be added to the part designated for the blog’s sidebar, and from there we can customize the widget settings:
As the picture shows, after adding the “ Latest Comments ” widget, the widget’s options box will appear, which enables us to customize its settings. For example, you can enter the title that appears at the top of the widget on the site, and you can also choose the number of comments to be shown in this widget.
You can also insert a sidebar into the site, by dragging the widget you want to insert and dropping it into the part designated for it, whether it is a sidebar or any other part of the site:
In the same way as dragging and dropping, you can enter any of the parts that contain widgets and rearrange them, such as moving one to the bottom and moving the other to the top:
You can also delete any widgets that have already been added to the Side Bar or any other part of the widget display, where you can open the item that contains the widgets, to show you the widget data. You can also easily click on the “Delete” option to delete the widget from within the section designated for it, but it remains present within the widgets window in the control panel so that you can insert it at any time you want later:
Set the side bar by customizing the template
From within the WordPress control panel, go to Appearance << Customize . The window for customizing the template and its internal elements will open completely. When you enter the “ Widgets ” item, the window for customizing the widgets available in the template will open:
When you enter any of them, such as the Side Bar or the one called “Blog Sidebar,” another window will open containing the widgets that are already present in the Side Bar, and you can rearrange them, delete them, or add new widgets within the Side Bar with ease.
When you click on “ Add Widget ,” a window will open for you containing all the widgets available in the WordPress template, which you can easily choose from and insert them into the Side Bar without any problems:
Customize the side bar using one of the add-ons
As you noticed in the previous paragraphs, the default options within WordPress to control the Side Bar are very simple, as you just drag and drop the desired widget into the part designated for it, for example within the Side Bar, but there are many features that are not provided by the default settings in the WordPress template, such as Organizing the display locations of widgets and changing their position on the site, as well as setting one of the widgets to appear only within a specific page or article to the exclusion of the rest of the site’s pages. As well as the ability to customize the side bar to appear on desktop computer screens and disappear on mobile.
These options can be done using one of the WordPress plugins that provide these features. It is the Custom Sidebars plugin , which is very popular and trusted by users. At the time of writing the article, the plugin had more than 200,000 active installations on WordPress sites around the world:
After you install and activate the plugin on your WordPress website template, then when you enter the WordPress control panel and then go to Appearance << Widgets , you will notice the appearance of a special new element in addition to creating a new custom sidebar .
When you click on Create New Sidebar, the sidebar creation window will open for you, in which you must enter the name of the sidebar in the Name field , as well as a description of it in the Description field .
This information will be useful if you have a large number of sidebars on your site and later want to distinguish each one of them with a name and description that is distinct from the others.
After naming the sidebar and providing a text description for it, click Create sidebar :
The sidebar will be created with the name and description you entered:
Now you have added the widgets that you want to include in the side bar. Choose all the widgets that you want to appear in the side bar:
As you will notice, after adding the desired widgets inside the new sidebar box, you will notice the presence of a Sidebar location button indicated by the red arrow. This option is very important and is not present in the default settings of WordPress, as through it you can specify the location of the sidebar display within your site.
As you can see, when you click on the “Select sidebar location” button, a window will open for you to control the locations of the sidebar display and the types of slots or categories to appear within it.
For example, when you choose one of these options on the page to specify where to display the sidebar, you can choose whether you want the sidebar to appear within “articles” and “pages” or “products”:
You also have other options from which you can choose the category pages in which you want the sidebar to appear, separate from the rest of the other categories:
Also, through these settings, you can control the types and sizes of screens on which you want to show or hide the side bar, by entering the For screen sizes option:
Three input boxes will open in front of you to control the size and dimensions of the screens in which you want to show or hide the sidebar. These boxes are as follows:
- Screen width: Here you specify the size of the screen on which you want to control the appearance of the sidebar. Let us set screens with a size of 700 pixels.
- Show: It has two options: Hide to hide the side bar on those screens, and Show to show it on screens whose size has been specified.
- Screen : Here you specify the maximum or minimum value for the screen size that you have specified.
Therefore, if we want to hide the side bar on screens with a maximum size of 700 pixels, the settings will be as follows:
In this case, the side bar will only appear on screens whose size exceeds 700 pixels.
One of the additional tools that this add-on also provides is the ability to insert a sidebar from the page for editing articles or editing pages in WordPress. If you install and activate your add-on, when you edit an article or page on your site, you will find a box in the sidebar that allows you to add a sidebar. A custom bar is only within the current article, and will not appear anywhere else except in the article you are editing:
In the end, customizing the side bar helps you show some distinctive and useful content to the reader, which will clearly improve the user experience. But on the other hand, placing a lot of items inside the site in an annoying manner may negatively affect the visitors’ experience inside the site, so we advise you to take into account good design and arrangement that is comfortable for the eye, as well as choose the places where they appear carefully
