Getting BuddyPress and Elegant Themes’ Divi to Work Together

Getting BuddyPress and Elegant Themes’ Divi to Work Together

With the launch of a new premium plugin imminent I needed a solution that would handle licensing, purchasing, downloads and support.  Going with Easy Digital Downloads (EDD) was a no-brainer; everyone I checked with recommended them enthusiastically.

2015-06-17_7-50-32For a support system EDD suggested using BuddyPress with bbPress for the forums.  Unfortunately my theme, Divi, isn’t compatible with BuddyPress.  Out of the box, the page was completely messed up with the main content area ignored, BuddyPress content appearing above the sidebar, and the sidebar divider line appearing to the left.

Researching the issue was frustrating.  I’m a Elegant Themes premium member, but questions about Divi and BuddyPress on the forums were ignored.   I really didn’t wanted to change my theme just to accommodate BuddyPress so I tried Multiple Themes, a WordPress plugin that lets you assign themes by page.  It didn’t work well with Divi, unfortunately.

Since EDD integrates with BuddyPress I couldn’t run it in a separate WordPress installation, so adding something like support.beyond-paper.com was out.

I messed around with theme template pages, but still couldn’t solve the problem.  Finally I sat down and compared the source for the offending BuddyPress page against the source for my blog page.  I found that BuddyPress was:

  • stripping out a vital class for the body tag
  • used different classes for the sidebar widgets

And that was it!

The Solution

For all of these changes I am working in a child-theme of Divi which I called Divi-Child.

In Divi the body is called in the header, so I needed a new header file.  I copied the regular header.php from Divi to Divi-Child and renamed it header-buddypress.php.

Next I made a copy of page.php and renamed it buddypress.php.

Finally, because I wanted a different sidebar for my buddypress pages, I created a file called sidebar-downloads.php.

In the header I changed
<body <?php body_class(); ?>>
to

<body <?php body_class('et_right_sidebar'); ?>>

In the buddypress.php file I stripped out all of the Divi specialized code to get to the basics. I also call in the special header and sidebar:

<?php
get_header('buddypress');
?>
<div id="main-content">
<div class="container">
<div id="content-area" class="clearfix">
<div id="left-area">
<?php while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h1 class="main_title"><?php the_title(); ?></h1>
<div class="entry-content">
<?php
the_content();
wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'Divi' ), 'after' => '</div>' ) );
?>
</div> <!-- .entry-content -->
</article> <!-- .et_pb_post -->
<?php endwhile; ?>
</div> <!-- #left-area -->
<?php get_sidebar('buddypress'); ?>
</div> <!-- #content-area -->
</div> <!-- .container -->
</div> <!-- #main-content -->
<?php get_footer(); ?>

I set up the sidebar-buddypress.php file:

<?php
if ( is_active_sidebar( 'sidebar-buddypress' ) ) : ?>
<div id="sidebar" >
<?php dynamic_sidebar( 'sidebar-buddypress' ); ?>
</div> <!-- end #sidebar -->
<?php endif; ?>

Since this is a new sidebar I had to add it to my functions.php file:

function bp_sidebars(){
register_sidebar( array(
'name' => __( 'Buddypress Sidebar', 'vendd' ),
'id' => 'sidebar-buddypress',
'description' => '',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<span class="widget-title">',
'after_title' => '</span>',
) );

}
add_action( ‘widgets_init’, ‘bp_sidebars’ );

2015-06-17_7-48-43I still had to mess around with the CSS to make the sidebar look nice.  The biggest problem was that BuddyPress uses the class widget-title instead of the widgettitle.

You can see the result.  I’m pretty happy with how it turned out, but it was a lot of work for what turned out to be a simple fix.

Follow me

Trackbacks/Pingbacks

  1. BuddyPress + Divi 4.x + MembershipPro Compatible? – WordPress Solutions Group - […] I was told to add a couple of pages to the child theme: https://beyond-paper.com/getting-buddypress-and-elegant-themes-divi-to-work-together/ […]

Submit a Comment