Remove the Divi Sidebar from BuddyPress and bbPress Pages

WordPress Tweaks

The popular Divi 2 WordPress theme by Elegant Themes has easy, built-in controls for choosing how the sidebar works on posts and pages. However, if you install the latest BuddyPress 2.6 or bbPress 2.5 plugins to set up user forums or profiles, Divi displays the default right-hand sidebar with no option to change or remove it. This is unfortunate.

Thankfully, it’s easy to remove by changing one line in a template file and adding a few lines to your child theme’s functions.php file:

1. Remove the sidebar from the page template(s)

The first thing we need to do is to remove the get_sidebar() code from the bbPress and/or BuddyPress page templates. Both bbPress and BuddyPress have in-depth articles on how to override templates in a child theme. But for our purposes, it’s pretty simple:

  • Make sure that you are using a child theme for Divi
  • If you want to remove the sidebar from bbPress, copy the page.php from the Divi theme folder into your child theme folder and rename it to bbpress.php
  • If you want to remove the sidebar from BuddyPress, copy the page.php from the Divi theme folder into your child theme folder and rename it to buddypress.php
  • Edit both the bbpress.php and/or buddypress.php files that now reside in your Divi child theme folder and remove the “get_sidebar();” line near the end of the file.

2. Adjust body classes to correct Divi styling

We’ll now need to adjust the classes of the <body> tag so that Divi correctly styles bbPress and BuddyPress pages as fullwidth with no sidebar. This can be done by adding the following code to your child theme’s functions.php file: (By the way, the “<?php” line at the very top is not needed if you’re adding this to an existing “functions.php” file).

The above code adds a function to the body_class filter that detects if you’re on a buddypress or bbpress page. If you are, it removes any “et_right_sidebar”, “et_left_sidebar”, and “et_includes_sidebar” classes and instead inserts a “et_full_width_page” class.

22 Comments

  1. Tom Dunn

    Excellent! However, what if instead of removing the default divi sidebar, I then wanted to replace it with different sidebar content?

    Reply
  2. Andy

    This gave me an error:

    Parse error: syntax error, unexpected ‘unset’ (T_UNSET)

    Reply
  3. Robert Staddon

    Hey Andy! It sounds like a problem with the way you copied and pasted the code. I re-embedded the code using GitHubGist to make it easier for you to copy over. Want to try it again?

    Reply
    • Robert Staddon

      Hello Dick! It does not appear that your site is using a Divi child theme. The child theme is where the customizations happen and it appears that the main Divi theme is activated on your site, not a child theme of Divi.

      Reply
  4. Dick Impens

    Hi Robert,

    Thanks for your prompt reply. Yes, for sure the site uses a child theme. All my sites have. I create a lot of wordpress sites but this is the first time I’ve installed bbpress for a customer. The child-theme name is mcdivi, and it’s active.

    Reply
    • Robert Staddon

      It appears that you may be mistaken. I don’t see “mcdivi” in the source of your page at ghostware.org anywhere. If you’re using a child theme named “mcdivi” on the site and it was active, we should be seeing “/themes/mcdivi/style.css” being loaded somewhere. Instead, all I see is “/themes/Divi/style.css”, what we would be seeing if Divi was the active theme instead of the child theme.

      Reply
  5. Dick Impens

    Hi Robert,

    You are totally right, sorry, did not pay attention. It had the child-theme, but was apparently not activated. Now it is and works. Thanks for your help, I appreciate that.

    Reply
    • Robert Staddon

      No problem. Glad it’s working now! Keep up the good work. 🙂

      Reply
  6. Kimberly Watters

    I’m not clear on how to do this: If you want to remove the sidebar from bbPress, copy the page.php from the Divi theme folder into your child theme folder and rename it to bbpress.php

    Reply
  7. Kimberly

    I am using a child theme. I’m just not sure what to copy where in my php to eliminate the Divi sidebar and include the bbpress sidebar.

    Reply
    • Robert Staddon

      Great! What you want, Kimberly, is a file named bbpress.php in your child theme folder that has the exact same contents as the page.php file from your Divi theme folder. The one change you’ll make to the bbpress.php file is to remove the “get_sidebar();” line near the end of the file.

      Reply
  8. Kimberly

    I’m sorry to be so dense, but is this the code I’m supposed to be modifying?

    }

    <article id="post-” >

    ” . esc_html__( ‘Pages:’, ‘Divi’ ), ‘after’ => ” ) );
    ?>


    Reply
    • Robert Staddon

      If you’re using the latest version of Divi (3.0.34), you’ll find “get_sidebar();” on line 64 of “page.php”

      Reply
  9. Vito

    Hi,
    I have actually the opposite problem. Im using Beaver Builder and my BP profile page is full width without any sidebar and I have no idea how to asign sidebar. I suppose I have to create extra template with sidebar.

    Any help with this?
    Thank you!

    Reply
  10. Eric Malalel

    Thanks a lot, works like a charm.
    Just have to change:
    if( is_buddypress() || is_bbpress() ) {
    into:
    if( is_bbpress() ) {
    since I just use bbpress and was getting php fatal error

    Reply
    • Greg

      This is important. Thanks, Eric!

      Reply
    • Arno

      Hi, thanks so far. i changed this but still get an fatal error. any other ideas?
      Thanks, Arno

      Reply
      • Guillaume

        Hi Arno, do you still have a fatal error ? I had fatal error but now it’s resolved, where did you put the code in your function.php ?

        Reply
  11. Alice

    Is there any way to get rid of the side bar without creating a child theme? Is it possible for someone to create for me something I can copy and paste into the Diviv theme options custom CSS box that would work? Thanks!

    Reply

Trackbacks/Pingbacks

  1. A Better Way to Remove the Divi Sidebar from All WooCommerce Product Pages - Abundant Designs - […] to allow WooCommerce pages to go full width by removing a few classes from the body tag (similar to…

Submit a Comment

Your email address will not be published. Required fields are marked *

Notify me of followup comments via e-mail. You can also subscribe without commenting.