How to display Dynamic Sidebars as well as Widgets that Reduce Bounce Rate

Jan 2, 2025
WordPress dynamic sidebar and widgets

-language-notice>

We'll today be tackling the subject of widgets and sidebars that are dynamic (those which are relevant to your content); more importantly the ways they can lower bounce rate on your website and increase the likelihood of conversion.

What is the Bounce Rate?

Bounce rate refers to the percent of people who enter and leave instead of staying on to explore other pages on your website. In order to reduce bounce rates, you must increase the engagement, and this tells you a lot about the website's accessibility. If a user finds the content valuable, they stay and are eager to return for even more useful content. This, in turn, will result in a better percentage of conversion. The longer your visitors stay on your website and the longer they stay, the better the chance of more sign-ups, sales as well as ad income.

You'll want them to remain longer which is why you should have a solution to stop them from leaving too quickly -- informative content.

Usability is the key to reducing Bounce Rate

It isn't enough to make your site user-friendly through only providing helpful content to your site users. Also, you must optimize your tools that you show on every page so to allow them to interact. Additionally, the tools you display should be useful to the content that's being used on a certain web page.

The widgets I'm talking about are the navigation bar and all widgetized sections on any given webpage, not just the sidebar. Although to some, navigation bars is the most important element in engaging users but you shouldn't take for granted the importance of the widgets you have. It's especially important when you are aware of the options WordPress provides for you to control these areas.

The sidebar is the main widget placeholder that can either make or break your website's usability. Why? It's convenient to just put whatever widgets you want in your sidebar and not think about the question of whether or not these widgets relate to the main content.

What are WordPress Dynamic (Content-Relevant) Sidebars?

The screenshots below show how different the sidebar is on MarketingProfs.com.

Podcast Page (Screenshot A)

In this blog post, MarketingProfs is showing the following widgets: suggestions for subscribers, links, and most popular articles.

Dynamic sidebar (Screenshot A)
Sidebar dynamic (Screenshot A)

Page of the article (Screenshot B)

This blog post MarketingProfs is showing these widgets: subscription opt-in, social media widgets, and the most frequently read blog posts.

Dynamic sidebar (Screenshot B)
Sidebar dynamic (Screenshot B)

How dynamic sidebars can help Reduce Bounce Rate

The sidebars on websites help visitors choose the next step to take. In the case of the blog's page, they can opt to join a newsletter. If you've got a variety of newsletter categories it is possible to display a subscribe widget in the category to which the blog post falls. Each widget bears the name of the section, ensuring that readers are aware of precisely what newsletters they're signing up to. Check out the pictures below which are from The Washington Post.

Content-relevant sidebars also aid in specific marketing. Create one that is specifically for users you group based on demographic information. You can, for instance, create sidebars to your site's various languages, and display the contact information in them based upon location, or display the latest promotions for your products based on interest. You can also create different sidesbars according to the type of your blog's posts.

The Washington Post has "Must Reads" as one of its sections for newsletters. The widget appears in the article titled "Salmonella-tainted chickens killed 1 and sickened 17 in a multi-state outbreak, CDC says" and all the other articles belonging to the same group.

Dynamic sidebar widget A
Dynamic sidebar widget

On the other hand on the other hand, this Tech article, "Facebook and Twitter executives will testify before Congress next week" From The Washington Post has the widget "Tech news email alerts" displayed in the left-hand column, aimed at those who read of news stories that are tech related.

Dynamic sidebar widget A
Dynamic sidebar widget A

Incorporating relevant Widgets into the Sidebar

The first step for developing content-related sidebars is to determine what's relevant and what's not. Deciding which widgets to appear on your page or blog requires an in-depth understanding of the purpose and why you created that webpage or blog initially.

You may have created an online product page, not just to describe the product's characteristics, benefits, and pricing. You also did so to convince the users to purchase it, or thinking about similar products. You may also wish to highlight the product's highest ratings and top reviews to aid them in deciding whether to purchase it. Or, you may want to assist them in connecting with an agent to address questions. Whichever action they choose it is important that the website shows them the way to do it. The sidebar is among the ideal places to display the call-to-action buttons. Hence, the sidebar becomes an extremely effective tool for maintaining your site's visitors' interest your site.

As an example, the blog uses For instance, they use different CTAs on their blog depending on the type of their blog. This ensures that the content is specific and relevant to the subject of the article.

Sidebar widget CTA
Sidebar widget CTA

Weeding Out Unrelated Widgets

Furthermore, deciding what not to include in the sidebar can be crucial as is deciding which widgets to place there. The size of the sidebar as well as other widget places on the page adds to the overall design and feeling. The elimination of unnecessary or unneeded widgets addresses the same issue by reducing bounce rates. In fact, some websites may decide that having no sidebar at all is a better way to go.

You may have tossed a few of widgets in your sidebar, thinking they're useful to your visitors. However, an overcrowded looking website could deter a potential customer. If there's a lot happening on the page, visitors might lose focus on the reason they came to the page in the first place. This could mean the presence of too many ads from outside or too many product links.

Simply put, determining which information in the sidebar is pertinent or not is crucial to increase engagement of users.

The importance of highlighting important widgets

When you have decided what widgets to place in the sidebar area, it is possible to make sure that the widgets standout from the rest. A way to do this is by making the widgets appear in different places, like the footer. Another method is to have them appear fixed, and then floating across the webpage as people scroll. This allows users to instantly be able to interact with them and not have to scroll back up or down.

Next Step: Choose the Best Methods

After we've talked about the significance of what widgets you use then the next task is to pick a method of creating those content-relevant sidebars. Two options are available:

Option 1: Control Widgets Visibility using a WordPress plugin

One of the best ways to control widget visibility for your sidebars is making use of the WordPress plugin. A plugin like Widget Optionslets lets you control the visibility of your sidebar by a couple of clicks. It allows you to show or block the sidebar content for each page or post using specific conditions, such as tags, categories and page names.

Widget Options WordPress plugin
Widget Options WordPress plugin

Widget Options is a WordPress plugin. Widget Options plugin has more than 70,000 users with an outstanding 5 out of 5-star rating. Download it via the WordPress repository or search for "widget options" on your WordPress dashboard under "Plugins - Add New." After that, click "Install Now" to activate the plugin.

Install Widget Options plugin
Install Widget Options plugin

Hidden Widgets from a Particular Webpage

After you've got installed the Widget Options plugin set up and activated You can remove the widget on a particular webpage with just a couple of clicks. To illustrate, here's the example of a coupon-related widget. In the settings for the widget, there's now an option for visibility that lets you choose between hiding or showing the widget on specific pages.

Hide WordPress widget on certain pages
Widget Options' Hide/Show Widgets on specific pages

The restriction of widgets on specific posts

To locate the ID of your post search for the article and then hover (don't click) over it. You will then see the "Edit Post" option on your WordPress administrator toolbar. On the left side of your browser, you'll be able to see the post ID #.

WordPress find post ID
WordPress Find the post ID

If you've obtained your post ID(s) You can use it with the conditional tags listed below.

    hide a widget from Multiple Posts:    

!is_single(array('Post ID', 'Post ID'))

    Hide a Widget from One Post    

!is_single( 'Post ID' )

For the widget you would like to keep hidden from your post, go to"Logic" on the "Logic" tab, and then enter the tag as shown below.

WordPress widget logic
WordPress widget logic

In addition, should it be necessary to utilize an appropriate title for widgets that are related to the post's heading tags, you are able to make as many copies of that widget as needed and create a distinct name for every.

Hide Widgets On Mobile Devices

You can also restrict widgets access when a webpage or post is viewed on specific device types.

Because of the small screen, it's easy to make pages or article appear overcrowded when viewing it on mobile devices, such as tablets or smartphones. It is important to ensure that every page does not look too dense both on the desktop as well as mobile. We also wish to benefit from the bigger desktop screen for showing relevant widgets in every widget area feasible.

For example, we want the opt-in form for e-mails to show both in the sidebar and within the footer. For mobile devices and on the flip side it is important to eliminate the same widgets. Widget Options allows you to hide widgets on mobile view.

Hide widget on mobile devices
Hide widget on mobile devices

Change Sidebar Widgets to be Fixed

Another option to manage widgets' appearance is to have their visibility fixed. That is to say that they'll follow user's movements as they scroll up or down on a webpage or blog post. If you make sure to keep your sidebar clean, or only apply this only to two or three widgets, you don't need to worry about making it unintentionally obtrusive. Check out the picture below. WPMU Dev has a great use of this feature on their blog.

The widgets for social sharing are displayed on the webpage but don't overshadow the primary page content. They encourage users to take action whenever they are willing to take action. This means they don't have to return into the sidebar to interact with these widgets.

Fixed sidebar widget
Example of a fixed sidebar widget

Widget Options gives you the option of you can make each widget fix and then follow visitors as they scroll. You can choose to make the widgets on your sidebar fixed or just pick one or two that you think need more exposure than the rest.

Fixed sidebar widget
Fixed sidebar widget

Option 2: Add Custom Sidebars

The other option is creating custom sidebars manually by coding. It's a bit more laborious as compared to using a third-party plugin which allows you to make sidebars with just one or two steps. But, since WordPress offers a wide range of options for coding, you can opt to take advantage of the option. This way, you can design exactly the way you would like.

There are some components you can change to suit your needs. See the following example:

 __( 'For Pages Only', 'your-site' ), 'id' => 'page-only-custom-sidebar', 'description' => __( 'Contents to this widget area will be displayed on pages only. ', 'your-site' ), 'before_widget' => '', 'after_widget' => "", 'before_title' => '', 'after_title' => '', ) );  add_action( 'widgets_init', 'page_only_custom_sidebar' ); ?>

The next thing to do is make the sidebar visible somewhere in the website. In order to make it function you must add it to templates file(s) of the places you want them visible. Check out the code below which aims to show the sidebar only on specific pages.

In order to do that to do this, we insert it into in the page.php file of the theme. If we were using Twenty Seventeen, the Twenty Seventeen theme, that is what it will look as follows:

    

It's Your Time: What Do You Reduce Bounce Rate?

What I've shown is just one small part of a few ways to lower the bounce rate. Sidebars, which are among the least utilized areas on websites, can become effective tools that encourage visitors to explore your website, thus improving the chances of conversions. The creation of content-related sidebars needn't be to be challenging, especially with all of the easily-to-use plugins that are available in the WordPress repository.

In order to achieve usability be aware that content is the king. Start with helpful content and then pair it with the right content subcategories (the widgets, the hyperlinks as well as your sidebars that are relevant to content) that will encourage them to explore your sites.
--- Jeffrey Carandang (@jeffreycarandng) October 1, 2018

Are you using dynamic WordPress sidebars or widgets for your website yet? If yes, what were the results?

Jeffrey Carandang

Jeffrey designs and creates expertly cooked WordPress Plugins over at Phpbits. It is the perfect mix of user-friendliness, creativity and performance!