Adding A Sidebar In WordPress

Guide & tutorial: Learn the process of how to create a sidebar & call it in your WordPress website with widgets & blocks on different methods

Updated on April 11, 2024
Adding A Sidebar In WordPress

Guide & tutorial to learn the process of how to create a sidebar in your WordPress website with widgets and blocks with different methods.

How To Add a Sidebar in a WordPress Website With Widgets on It?

To add a sidebar to your WordPress website and populate it with widgets, you can follow these steps:

Access the WordPress Dashboard

  • Log in to your WordPress website using your administrator credentials.
  • Once logged in, you’ll be directed to the WordPress dashboard.
  • In the WordPress dashboard, locate the “Appearance” tab in the left-hand menu.
  • Hover over “Appearance” to reveal the sub-menu, and click “Widgets.”

Choose a Sidebar

  • On the Widgets page, you’ll see a list of available widgets on the left side and available widget areas (sidebars) on the right side.
  • Identify the widget area where you want to add a sidebar. Common widget areas include “Sidebar,” “Main Sidebar,” or “Right Sidebar.”
  • Click on the widget area to expand it.

Add Widgets to the Sidebar

  • In the expanded widget area, you’ll see the available widgets listed on the left side and the selected widgets for that sidebar on the right.
  • Drag and drop the desired widgets from the available widgets section into the selected widgets section of the sidebar.
  • Alternatively, you can click on a widget in the available widgets section, select the sidebar where you want to add it, and click the “Add Widget” button.

Configure Widget Settings

  • Once a widget is added to the sidebar, you can click on it to expand and configure its settings.
  • Each widget will have different settings and options based on its functionality.
  • Configure the settings of the widgets according to your preferences. For example, if you add a “Text” widget, you can enter custom text or HTML code in the widget settings.

Customize Widget Order (Optional)

  • If you want to change the order of the widgets within the sidebar, you can drag and drop them to rearrange their position.
  • The order of the widgets from top to bottom will determine how they appear in the sidebar of your website.

Save and Preview

  • After adding and configuring the widgets in the sidebar, click the “Save” or “Update” button to save the changes.
  • Visit your WordPress website to preview the sidebar with the added widgets.
  • The sidebar should now be visible on the designated widget area of your website, displaying the widgets you added.

Depending on your theme’s options, you can repeat these steps to add sidebars and widgets to different areas of your WordPress website, such as the footer or header. Additionally, some themes may provide additional customization options for sidebars, such as different sidebars for different pages or post types.

Video Tutorial for Adding Sidebar in WordPress

Adding a sidebar in WordPress / widgets on a page

In this tutorial on Visualmodo knowledge base, we will show how to create, apply widgets and add a sidebar on pages using our WordPress themes in an easy way. Keep reading this guide & tutorial: Learn the process of how to create a sidebar & call it in your WordPress website with widgets & blocks on different methods

This tutorial will show you to add and place a widget on a sidebar. Go to the page editor, Custom Fields page area, and select a sidebar. After this, you must go to the Appearance widget and place widgets on the sidebar tabs.

Moreover, in case, you want more widgets on your sidebar, our theme works great with plugins for it, and WordPress has a lot of free plugins to apply to more devices. The Jetpack is an excellent example of this purpose.

Calling a Sidebar With Elementor WordPress Plugin Page Builder: Adding in WordPress

  1. Install and activate the Elementor plugin from the WordPress.org plugin directory.
  2. Create a new page or edit an existing one using the Elementor editor.
  3. Once in the Elementor editor, drag the “Sidebar” widget onto your page where you want the sidebar to appear. The “Sidebar” widget is under the “Elements” tab.
  4. Customize the sidebar widget according to your needs. You can set the layout, choose the sidebar content, and style it to match your website’s design.
  5. Save the changes you made to the page.
  6. Go to your WordPress dashboard and navigate to “Appearance” → “Widgets.”
  7. You will see a sidebar area created by Elementor. Drag and drop the desired widgets into this sidebar area to populate it with content.
  8. Configure the widget settings and content as required. You can add widgets such as Recent Posts, Categories, Search, or any other available widgets to the sidebar.
  9. Once you have finished adding and configuring the widgets, visit your page with the sidebar to see the changes.

Calling a Sidebar With WPBakery WordPress Plugin Page Builder: Adding in WordPress

WordPress Theme guide tutorial widgets page builder element

Using the widgets page builder element, you can call a sidebar on any page. Please take a look at the image above to see how we design the theme blog, for example. So, you can call any sidebar you want on any page, but some pages (pages that uses default templates), like the posts page, and the shop page (WooCommerce) have a default sidebar.

You can add widgets on its sidebars on WP Appearance > Widgets > drop widgets on the tab ‘sidebar’ for blog/posts page / single posts. In addition to the ‘WooCommerce’ tab for your products and shop catalog page.

Adding a sidebar in WordPress with widgets on your pages using our WordPress themes – By Visualmodo

How To Extend The Number of WordPress Widgets & Blocks?

You can extend the number of widgets and blocks to add to your website sidebar by installing the free Borderless WordPress plugin, adding quality options to your bars. Keep following this guide & tutorial: Learn the process of how to create a sidebar & call it in your WordPress website with widgets & blocks on different methods

What is The Difference Between WordPress Widgets and Blocks?

WordPress Widgets and Blocks are elements used for adding functionality and content to your WordPress website, but they have some fundamental differences in functionality and usage. Here’s an overview:

WordPress Widgets

  1. Definition: Firstly, Widgets are small modules that can be added to widget areas on your website, typically in sidebars, footers, or other predefined widgetized regions.
  2. Appearance: Secondly, Widgets are typically displayed as simple boxes in the backend of WordPress, where you can configure their settings and content.
  3. Placement: Widgets are commonly used in specific widget areas predefined by your theme. These widget areas are often consistent across different pages of your website.
  4. Customization: Widgets usually have limited customization options, allowing you to configure their basic settings such as title, content, appearance, and sometimes additional settings specific to the widget type.
  5. Accessibility: Finally, widgets are accessible through the “Widgets” section in the WordPress dashboard, where you can manage and arrange them within the available widget areas.

WordPress Blocks

  1. Definition: Blocks are modular components used for creating and structuring content in the new WordPress block editor (Gutenberg). Each block serves a specific purpose: paragraphs, headings, images, galleries, videos, etc.
  2. Appearance: Blocks are visually represented as individual content elements within the block editor. They can be customized and configured directly in the editor, with settings specific to each block type.
  3. Placement: Blocks can be added anywhere within the content area of your website, including pages, posts, and custom post types. You have more flexibility in placing blocks within your content.
  4. Customization: Blocks offer a more comprehensive range of customization options compared to widgets. Each block has settings and styles that can be adjusted to match your requirements. You can also install block plugins to add more block types and functionality.
  5. Accessibility: Blocks are accessible directly within the block editor. You can easily add, rearrange, and manage blocks within your content using the drag-and-drop interface and block settings panel.

In summary, widgets are primarily used for adding predefined functionality to specific widget areas on your website. At the same time, blocks offer more flexibility and control over the structure and design of your content within the block editor. Blocks allow for a more visual and modular content creation and customization approach. I hope this guide & tutorial: Learn how to create a sidebar & call it in your WordPress website with widgets & blocks helps.

Can’t find what you’re looking for?

Contact Support