How To Move BuddyPress Cover To The Top Of Your Site

BuddyPress is a very useful plugin that can turn your WordPress site into a social network in just 5 miniute. By default BuddyPress acts just as if you created a post where everything is below your navigation, above the footer and before or after your sidebar. However group cover may not look good as you’d expect inside that tiny little area compared to what we see on SoundCloud and Facebook.

In this tutorial, we will show you how you can move the cover section to the top.

Things you will need:

  • Basic PHP skills
  • Managing files
  • And CSS (may not needed in this tutorial)

 

First off we will need to head to buddypress/groups/single/ and open up the home.php file depending on where you have this. Mine was in my template folder.

Is recommended to have this file and the folder structure set up in your theme folder as well, since any modification done to the BuddyPress plugins folder will be lost after update.

 

Open up your header.php file in your template folder and find something like this:

<div id="content-wrapper"> or <div id="content">

Depending on your template. You can also inspect element to find out.

Below that code, we will need to add 2 things, to check if we are at the groups page and also members/profiles page.

Please skip to the end for an update before proceeding.

<?php if ( bp_is_single_item() ) { ?>
// Checks if we are in a group.
<?php } elseif ( bp_is_user() ) { ?>
// Checks if we're viewing a profile.
<?php } ?>
<?php if ( bp_is_single_item() || bp_is_user() ) { ?> 
// Checks both conditions at once.
<?php } ?>

Now go back to home.php we mentioned earlier and you should see something like this:

<?php if ( bp_has_groups() ) : while ( bp_groups() ) : bp_the_group(); ?>

<?php

/**
* Fires before the display of the group home content.
*
* @since 1.2.0
*/
do_action( 'bp_before_group_home_content' ); ?>

<div id="item-header" role="complementary">

<?php
/**
* If the cover image feature is enabled, use a specific header
*/
if ( bp_group_use_cover_image_header() ) :
bp_get_template_part( 'groups/single/cover-image-header' );
else :
bp_get_template_part( 'groups/single/group-header' );
endif;
?>

</div><!-- #item-header -->

 

We will need to copy this code and insert after the condition check we mentioned earlier.

<?php if ( bp_is_single_item() || bp_is_user() ) { ?> 


<?php if ( bp_has_groups() ) : while ( bp_groups() ) : bp_the_group(); ?>

<?php

/**
* Fires before the display of the group home content.
*
* @since 1.2.0
*/
do_action( 'bp_before_group_home_content' ); ?>

<div id="item-header" role="complementary">

<?php
/**
* If the cover image feature is enabled, use a specific header
*/
if ( bp_group_use_cover_image_header() ) :
bp_get_template_part( 'groups/single/cover-image-header' );
else :
bp_get_template_part( 'groups/single/group-header' );
endif;
?>

</div><!-- #item-header -->
<?php endwhile; endif; ?>

<?php } ?>

Also make a note of the endwhile tag and make sure they are added before the php closing tag or otherwise you will run in to php errors.

You don’t have to worry about modifying groups/single/group-header or groups/single/cover-image-header, since those 2 files will be read at BuddyPress plugin directory.

Right before

<?php if ( bp_is_single_item() || bp_is_user() ) { ?>

and after the php closing tag for condition check we will need to add the BuddyPress div wrapper so that everything will display properly and not look messed up.

<div id="buddypress">
<?php if ( bp_is_single_item() || bp_is_user() ) { ?>
and
<?php } ?>
</div>

Finally, you can remove that big chunk of code from your home.php (the one from your template directory not plugins directory) so you don’t see 2 covers at once and hit save.

Make sure is this part only:

<div id="item-header" role="complementary">

<?php
/**
* If the cover image feature is enabled, use a specific header
*/
if ( bp_group_use_cover_image_header() ) :
bp_get_template_part( 'groups/single/cover-image-header' );
else :
bp_get_template_part( 'groups/single/group-header' );
endif;
?>

</div><!-- #item-header -->

Refresh your group page or your profile page and see the results.

Now the cover should look something like what Soundcloud and Facebook has.

UPDATE:

As we discovered that you may see multiple covers from groups that you’ve created if you use both filter mentioned at the first step. So we will need to change the code and use the crossed out code instead. We also found that user profile is not showing the new changes like groups does.

<?php if ( bp_is_single_item() ) { ?>
// Group header code goes here.
<?php } elseif ( bp_is_user() ) { ?>
// Checks if we're viewing a profile.
<?php } ?>

As you can see above where “// Group header code goes here” is where the header code for the group goes. Now we also need to update the code to make user profile look the same.

So we will need to copy home.php from buddypress/members/single to our theme directory as structured.

Now open up home.php from your theme directory and find the following:

<div id="item-header" role="complementary">

<?php
/**
* If the cover image feature is enabled, use a specific header
*/
if ( bp_displayed_user_use_cover_image_header() ) :
bp_get_template_part( 'members/single/cover-image-header' );
else :
bp_get_template_part( 'members/single/member-header' );
endif;
?>

</div><!-- #item-header -->

This time we need to copy this code and paste into “// Checks if we’re viewing a profile” part and then remove the original code from home.php and hit save. Now both the profile and group should look the same.

Leave a Reply