Learn exactly how to makeBETTER WEBSITES RIDICULOUSLY FAST

Get exclusive tips that'll help you master WordPress, Beaver Builder and lots more.

Disable the Blog Sidebar on Single Posts when using the Beaver Builder Theme

One of the only negatives I’ve found after switching from StudioPress’s Genesis Framework to the Beaver Builder Theme is the ability to alter the layouts of pages and posts conditionally using PHP snippets in the functions.php file.

Don’t know what I’m talking about?

Read on.

disable-blog-sidebar-on-single-posts-outcome

This animation shows the final result of what we’re going to create in this post. There is a sidebar on the main Blog page which lists the Blog Posts in the Blog but then on individual Blog Posts there is no sidebar and the content is full width.

Let me explain the problem we’re trying to fix with this tutorial on how to disable the Blog Sidebar on Single Posts

Let’s say we want to have a sidebar on our main Blog page but then remove it on Single Posts so we can make our Blog Posts full width.

In Genesis, we’d add a simple function like the below to our theme’s functions.php file which would check if the current page loading is a Blog Post. If it is, it would force the layout to be full width and remove the sidebar from the content-sidebar (or sidebar-content layout) that we might have set up for our Blog pages.

Unfortunately, a filter to change the layout of your website using a function is not available in the Beaver Builder Theme (not yet at least – I have contacted the core Beaver Builder development team to request it).

So we need to do it in a more manual way until they introduce a filter like this.

Here’s exactly how you can have a sidebar on your main Blog page but then also remove it from your individual single Blog Posts.

Step 1: Activate the Blog Sidebar in the Beaver Builder Theme

To do this, login to your WordPress Dashboard and navigate to Appearance > Customize > Content > Blog Layout and set Sidebar Position: Right (or left), as shown in the below animation.

activate-blog-sidebar-bb-theme-sidebar-right

Active the Blog Sidebar in the Beaver Builder Theme by using the WordPress Theme Customizer.

Now, when you change this setting in the WordPress Customizer, the sidebar appears correctly on our main Blog page as expected but it ALSO shows when you view an individual Single Post.

Below is a single blog post with the Blog Sidebar showing now that we’ve activated the Blog Sidebar in the WordPress Customizer.

activate-blog-sidebar-single-post-right-sidebar

But what if you want to have the sidebar only on the main Blog page and have the Single Posts full-width – a common need?

Let’s hide the Blog Sidebar on single Blog Posts in the Beaver Builder Theme.

Step 2: Copy the single.php file from the Parent Beaver Builder Theme into your Child Theme and remove the functions that output the sidebar

Next, using your FTP Client or cPanel, navigate to the Beaver Builder Parent Theme’s files located at /wp-content/themes/bb-theme and copy the single.php file from here and paste this single.php file into your active child theme’s folder.

So, let’s say you’re using our highly popular FitnessDirect Child Theme for the Beaver Builder Theme. You’d copy the single.php file from /wp-content/themes/bb-theme into /wp-content/themes/fitnessdirect.

In our demo site  we’re using for this tutorial our child theme is called odw, so we’re going to copy the single.php file from the Beaver Builder Parent Theme to /wp-content/themes/odw, as per below.

activate-blog-sidebar-copying-single-php

Next, edit this single.php PHP file you’ve copied into your active Child Theme and replace this PHP code

with this PHP code below.

WHAT WE’VE JUST DONE BY REPLACING THE FIRST PHP CODE WITH THE SECOND

  1. We’ve commented out the PHP functions that output the sidebar if it is set to output in the Appearance > Customize > Content > Blog Layout setting. We do this by adding two forward slashes (i.e.// ) to the code that outputs the sidebar (two forward slashes is how you comment out a line in PHP so it doesn’t execute).
  2. We removed <?php FLTheme::content_class(); ?> from the fl-content div and replace it with the Bootstrap CSS class col-sm-12 which just makes this content 100% now.

And that’s it!

Below is an animation that shows the main Blog page with the sidebar and a single Blog Post without the sidebar.

disable-blog-sidebar-on-single-posts-outcome

NOTE! The above animation shows a custom section up the top of the single Blog Post that we added in this previous tutorial Customize the Post Header of a Single Post in the Beaver Builder Theme. We recommend you read this tutorial to really customize your Blog Posts and get your readers reading your content.

Wrapping it up

As you can see, it is very easy to tweak where your sidebars show on your website.

Definitely not as easy as it is with StudioPress’s Genesis Framework, but we have faith in the Beaver Builder developers and are use they’ll implement a layout filter in the coming version of the Beaver Builder Theme.

Comment below

Please leave a comment below if you have anything you’d like to ask us about.