Not sure what a website sidebar is and whether or not your WordPress site needs one?
When creating a website, there are several design elements to consider, and a sidebar is one of them. If you’re new to the process, you might ask yourself, “What is a sidebar?”
In a nutshell, a sidebar is a vertical column of content that appears to the right or left of your main content. You can use it in many different ways, including creating a better user experience, helping visitors discover and engage with more content on your site, monetizing your website to increase your earnings, and more.
In this article:
Let’s dig in!
In WordPress, a sidebar is a static column of widgets (small pieces of content and functionality) that appears next to the main site content.
These widgets are tidbits of information that direct visitors to take certain actions or provide extra information that may interest them.
When viewing your website on a desktop device, a WordPress sidebar appears either to the right, left, or on both sides of your content. If your website is mobile-optimized and someone views it on a phone, the sidebar usually appears below the content.
Here is an example of a sidebar as it appears on the Jetpack blog for desktop users:
The sidebar itself is the column of text to the right of the article content. You’ll notice that this sidebar includes links to a search box, an email subscribe opt-in, and a list of categories. These three features are all examples of widgets.
On WordPress, your sidebar’s location and styling are usually controlled by your WordPress theme.
However, you can use blocks to control the actual content in your sidebar. And if you want more flexibility, there are also ways to create custom WordPress sidebars. We’ll cover all of this in more depth later in this post.
Next question – what is a sidebar used for?
Well, one of the really nice things about your WordPress sidebar is that you have a lot of flexibility for what content you include in your sidebar.
With that being said, there are some common elements that you’ll often find in sidebars. Here are some examples:
Again, you’re free to include other types of content in your sidebars as well. The examples above are just some of the most common sidebar elements that you’ll find.
There are a lot of advantages to using sidebars on your WordPress website, which is why the sidebar is such a common element.
First, you can use your sidebar(s) to create a better user experience and increase engagement with your visitors.
For example, you can include lots of features to help users discover relevant content on your site, such as a search box, links to your popular content, and so on.
By making it easier for visitors to find content they’re interested in, you can increase your chances of engaging them and turning them into repeat visitors.
Beyond helping with content discoverability, you can also improve your site’s navigation by including links to important content.
Beyond creating a better experience for your visitors, using a sidebar can also help you better monetize and grow your website.
If you plan to use display ads to make money from your website, your site’s sidebar is one of the most lucrative ad spots. It allows for large vertical skyscraper banners that earn very good rates, and it also lets you create “sticky” ads that remain visible even as a user scrolls down the page.
Because of these reasons, having a sidebar is essential if you want to maximize your revenue from display ads. This is especially true if a high percentage of your website’s traffic is using desktop devices – more on this next.
On a similar note, you can also use your site’s sidebar to promote your own content and offerings.
For example, if you have a free or paid online course, you could promote your course in the sidebar to convert visitors into students. Or, you could just drive traffic to your most recent content.
You can also promote affiliate products in your sidebar, either by directly including affiliate links in your sidebar or by driving traffic to affiliate content.
For example, if you wrote a post about “How to sleep better,” you might promote your “The best mattresses” guide in the sidebar. By doing so, you can naturally move visitors through the sales funnel and increase your chances of making a sale.
In general, the advantages of using a sidebar outweigh any potential negatives, which is why sidebars are a common element on the majority of websites.
With that being said, some people who write long-form content don’t like using sidebars because they find it creates a distracting experience for their readers. For this reason, you’ll see some writers disable their sites’ sidebars on the individual article pages or just skip sidebars entirely.
Here’s an example from RadReads of what this approach typically looks like:
We also don’t use sidebars here at WordPress.com/go, though we do on some other parts of WordPress.com.
It’s also important to remember that visitors who are using a mobile device (e.g. their smartphone) typically will not see your site’s sidebar. While this is not a disadvantage per se, it does mean that you should not rely exclusively on your site’s sidebar to provide essential information to your audience.
For example, while it’s totally fine to include important navigation links in your sidebar because it creates a better experience for desktop visitors, you’ll want to make sure mobile visitors can also easily access those navigation options. You could do this by using a different navigation menu for mobile visitors, which many WordPress themes allow you to do.
To give you an idea of how this works, here’s that same Jetpack blog sidebar example for desktop visitors from earlier.
But for mobile visitors, you can see how the sidebar content doesn’t begin until after the post content.
Now that you have a better understanding of what sidebars are and what type of content you might want to include in them, let’s get into the more hands-on section and look at what it’s like to actually use and manage sidebars on your WordPress site.
The easiest way to get started with your site’s sidebar is to use the default WordPress sidebar, which pretty much all themes support.
In the vast majority of WordPress themes, you can control the content in your default sidebars using widgets.
Since July 2021 (WordPress 5.8), WordPress lets you control content in widget areas using blocks, just like you use when you’re editing posts or pages. This gives you access to all the same design and content flexibility that you get in the regular editor.
Prior to WordPress 5.8, WordPress sites used a separate standalone widget system. While you can still access this older widget system by installing the Classic Widgets plugin, this post will focus on using the newer block-based approach because it’s the default experience and it also gives you more flexibility.
Here’s how to edit the sidebar content in most WordPress themes:
When you expand the “Sidebar” area, you’ll see a preview of all of the content that’s currently in your sidebar:
If you were to open your website on the front end, you would see that all of these blocks match the real appearance of your sidebar:
To customize the content in your sidebar, you can edit things just like you were editing a post or page:
For example, let’s say you want to add a CTA button to purchase your course.
First, you would add a new Buttons block at the location where you want it to appear:
Then, you could select the Buttons block to adjust the style as needed:
When you’re happy with how it looks, you can click the Update button to save your changes.
Then, you should see the button appear in the sidebar on your live website.
For another way to edit sidebar widget areas, you can also use the theme customizer interface.
The advantage of this is that it gives you a real-time frontend preview of what your sidebar will look like. However, the disadvantage is that the actual editing area is pretty narrow, so it might not be as easy to add content.
Here’s how to use this interface:
If you don’t see the Appearance → Widgets menu in your WP Admin, you might be using a newer WordPress theme that supports the Site Editor.
If your theme supports the Site Editor, it doesn’t use widgets. Instead, you can control every part of your theme’s design using the Site Editor, including your sidebar.
If your theme supports the Site Editor, you can access it by going to Appearance → Editor in your WP Admin.
You can then create a sidebar by adding a column to your Single template.
For more details, check out the full Site Editor documentation.
Note – the content below applies to most WordPress themes, but not newer themes that support the Site Editor. If your theme uses the Site Editor, you can also create custom sidebars using the instructions from the previous section – just create a new template for the content where you want to use a custom sidebar.
If you want to go beyond your theme’s default sidebar(s), WordPress also gives you options to create custom sidebars using plugins or code.
One of the advantages of creating custom sidebars is that you can set up conditional rules for when to use each sidebar. This lets your site use different sidebars depending on the content that a visitor is browsing.
Let’s say you have a travel blog that covers travel on three different continents – North America, Europe, and Asia.
To create a more personalized experience for users, you might want to use a different sidebar for content about each region.
For example, if someone were reading an article about traveling in Vietnam, you could use your sidebar to promote travel in other nearby areas of Southeast Asia. This content would be a lot more relevant than promoting travel content in North America, which is a 20-hour flight away.
Let’s go through how you can create custom sidebars to handle these types of situations…
The easiest way to work with custom sidebars is to use a WordPress sidebar plugin. You can find several popular options, including the following:
For this guide, we’ll use the Content Aware Sidebars plugin because it’s free and works with both block widgets and classic widgets.
To get started, make sure to install and activate the plugin. If you made your website with WordPress.com, you’ll need to be using at least the WordPress.com Business plan to install custom plugins like this one.
If you need a helping hand, you can check out our guide on how to install WordPress plugins.
Once you’ve activated the plugin, go to Content Aware → Add New in your WP Admin to create your first custom sidebar.
To start, give your sidebar an internal name to help you remember it and choose which content to use this sidebar for by using the Where to display options. For example, to only display this sidebar on content in the “Asia Travel” category, you’d configure it like this:
Next, go to the Action tab to tell the plugin what it should do with your existing sidebar. You can completely replace your default sidebar with this sidebar by choosing Replace.
Or, you can merge the two sidebars together or otherwise combine them.
The other settings tabs are optional, but you can explore them to see if you find anything relevant.
For example, if you want to promote a time-specific offer, you could configure it so that this sidebar only displays between certain dates. Or, you could use the User Visibility option to make it so that the sidebar is only visible to logged-in users.
When you’ve made all of your choices, make sure to click the Save button.
Once you’ve saved your custom sidebar, you can add content to it just like you did with your theme’s default sidebar(s):
If you feel comfortable working with code, you can also register custom sidebars by adding a code snippet to the functions.php file of your child theme or a code snippets management plugin like Code Snippets.
However, to actually display your sidebars on your site, you need to also create a sidebar template file using PHP.
If you’d like to dig into the code method in more detail, you can check out this WordPress Codex page for theme sidebars.
To finish things out, let’s go over some best practices for using WordPress sidebars…
While you can use your sidebar in a lot of different ways, you don’t want to go overboard and cram it full of too much content.
If you make your sidebar too cluttered, visitors will feel overwhelmed and struggle to use it effectively. It can also distract users from your main content, which you should always try to avoid.
Instead, try to keep your sidebar uncluttered by only focusing on including the most important elements for your use case.
For example, if your primary goal is to promote your online course, make that the main focus of your sidebar and cut anything that distracts from that goal.
Because your sidebar is a very visible part of your site (on desktop and tablet devices, at least), it’s important that you make it visually appealing.
At a bare minimum, you want the content and style of your sidebar to match the rest of your site.
Depending on your design, you could also draw attention to your sidebar with a border or some other type of styling. This can help create a clear differentiation between your main content (e.g. a blog post) and content in the sidebar.
If you’re using a responsive WordPress theme (which is pretty much every WordPress theme nowadays), your site will not usually display its sidebars beside content for mobile visitors. This is because of the very limited width that’s available on most mobile devices.
Instead, as we mentioned earlier, most WordPress themes will shift the sidebar further down the page so that it displays below the main content of that page.
For example, if the person is reading a blog post, the sidebar typically won’t display until after the comments section, which means that many mobile visitors won’t even see it.
As such, you’ll need to find other ways to provide mobile visitors with access to important content in your sidebar. You could do this by creating a custom menu just for mobile visitors.
To make sure that you’re using your sidebar(s) in an optimal way, you’ll also want to consider analyzing sidebar performance.
There are a few different ways that you can test sidebar performance, depending on how in-depth you want to go:
So – what is a sidebar? If you’ve made it this far, you know that a sidebar is a vertical content area that displays beside your site’s main content area.
If you create your site with WordPress.com, you can fully customize the content in your site’s sidebar using block widgets, including adding search boxes, listing your most recent content, promoting your offers, inserting ads, and lots more.
If you’re using the WordPress.com Business plan, you can also enhance your sidebars by adding custom sidebar plugins like Content Aware Sidebars. This lets you personalize your site by displaying different sidebars based on the content that a visitor is reading, along with lots of other options.
By optimizing how you use your site’s sidebar and following the best practices from above, you can create a better experience for your visitors and grow/monetize your site more effectively.
Want more tips? Get new post notifications emailed to you.
Colin Newcomer is an expert WordPress writer who has been using the platform for over a decade. He's on a mission to test every single plugin at WordPress.org.
More by Colin Newcomer
Whether you need a landing page or a full ecommerce site, an online learning academy or an interactive informational site for your business, we can build it for you.
Invent the world’s greatest cat food, save a rainforest, start a needlepoint club. Whatever it is, it’s going to need a website—that’s where we come in.
Digital Marketing & Design by Yellow Falcon