Templating User settings page of BuddyPress Themes correctly

Brajesh Singh in BuddyPress Theming 4 Comments

I was working on our upcoming theme yesterday, and found a way to better template the user settings page. I am going to share it here today, in the hope that it may help some of you.

Are you a BuddyPress theme developer? have you developed a custom theme before or are you going to develop a custom theme for BuddyPress in future? If yes, then read on, this post will help you.

If you have used bp-default or any other theme, the user settings page are generated from the templates included in members/single/settings.

There are four files to be specific:-

general.php :- Used for general settings(password & email change)
notifications.php :- To generate the layout for user email notifications settings
delete-account.php :- To generate the layout for Account deletion page(If that is enabled in the BuddyPress settings)
capabilities.php : – Used to moderate the displayed user. Currently, It allows site admins to mark the user as spammer.

If you look at the code, you will see that these pages are not loaded via members/single/home.php(which is used to load friends/activity/groups etc) but loaded directly by BuddyPress. So, if you want these settings page to look the same as User's other pages, There is a lot of code duplication for managing layout on all these pages.

As a theme developer, what I want is a coherent experience for users while avoiding the duplicity as much as possible.

If you look inside the members/single directory, you will see there is a settings.php file and even in members/single/home.php the condition is present to load this file(which in turn loads one of the above four files depending on the current action). The only problem is when settings page is displayed, BuddyPress does not load members/single/home.php but loads one of the above files directly.

Fortunately, the settings component does provides filters to filter out the templates. You can ask BuddyPress to load home page when the settings page are accessed. To make that happen, you can put the following lines in your theme's functions.php

// just return home.php from members/single.
function bpdev_load_user_home_template( $template ) {
	return 'members/single/home';
}

// make setting page load via home.php and avoid the code bloat.
add_filter( 'bp_settings_screen_general_settings', 'bpdev_load_user_home_template' );
add_filter( 'bp_settings_screen_notification_settings', 'bpdev_load_user_home_template' );
add_filter( 'bp_settings_screen_capabilities', 'bpdev_load_user_home_template' );
add_filter( 'bp_settings_screen_delete_account', 'bpdev_load_user_home_template' );

// just return home.php from members/single.

function bpdev_load_user_home_template( $template ) {

return 'members/single/home';

}

// make setting page load via home.php and avoid the code bloat.

add_filter( 'bp_settings_screen_general_settings', 'bpdev_load_user_home_template' );

add_filter( 'bp_settings_screen_notification_settings', 'bpdev_load_user_home_template' );

add_filter( 'bp_settings_screen_capabilities', 'bpdev_load_user_home_template' );

add_filter( 'bp_settings_screen_delete_account', 'bpdev_load_user_home_template' );

That's it. The settings page will load the members/single/home.php and the home.php will switch to settings.php in your members/single when the settings component is loaded.

Now, It is the time that you go ahead and delete all that extra code bloat in settings page. Here is my sample members/single/settings/general.php

<div class="item-list-tabs no-ajax" id="subnav">
	<ul>

		<?php bp_get_options_nav(); ?>

		<?php do_action( 'bp_member_plugin_options_nav' ); ?>

	</ul>
</div><!-- .item-list-tabs -->

<h3><?php _e( 'General Settings', 'buddypress' ); ?></h3>

<?php do_action( 'bp_template_content' ); ?>

<form action="<?php echo bp_displayed_user_domain() . bp_get_settings_slug() . '/general'; ?>" method="post"
	  class="standard-form" id="settings-form">

	<?php if ( ! is_super_admin() ) : ?>

		<label for="pwd"><?php _e( 'Current Password <span>(required to update email or change current password)</span>', 'buddypress' ); ?></label>
		<input type="password" name="pwd" id="pwd" size="16" value="" class="settings-input small"/> &nbsp;<a
				href="<?php echo site_url( add_query_arg( array( 'action' => 'lostpassword' ), 'wp-login.php' ), 'login' ); ?>"
				title="<?php _e( 'Password Lost and Found', 'buddypress' ); ?>"><?php _e( 'Lost your password?', 'buddypress' ); ?></a>

	<?php endif; ?>

	<label for="email"><?php _e( 'Account Email', 'buddypress' ); ?></label>
	<input type="text" name="email" id="email" value="<?php echo bp_get_displayed_user_email(); ?>"
		   class="settings-input"/>

	<label for="pass1"><?php _e( 'Change Password <span>(leave blank for no change)</span>', 'buddypress' ); ?></label>
	<input type="password" name="pass1" id="pass1" size="16" value="" class="settings-input small"/>
	&nbsp;<?php _e( 'New Password', 'buddypress' ); ?><br/>
	<input type="password" name="pass2" id="pass2" size="16" value="" class="settings-input small"/>
	&nbsp;<?php _e( 'Repeat New Password', 'buddypress' ); ?>

	<?php do_action( 'bp_core_general_settings_before_submit' ); ?>

	<div class="submit">
		<input type="submit" name="submit" value="<?php _e( 'Save Changes', 'buddypress' ); ?>" id="submit"
			   class="auto"/>
	</div>

	<?php do_action( 'bp_core_general_settings_after_submit' ); ?>

	<?php wp_nonce_field( 'bp_settings_general' ); ?>

</form>

<ul>

<?php bp_get_options_nav(); ?>

<?php do_action( 'bp_member_plugin_options_nav' ); ?>

</ul>

</div>

<?php do_action( 'bp_template_content' ); ?>

<form action="<?php echo bp_displayed_user_domain() . bp_get_settings_slug() . '/general'; ?>" method="post"

class="standard-form" id="settings-form">

<?php if ( ! is_super_admin() ) : ?>

<label for="pwd"><?php _e( 'Current Password <span>(required to update email or change current password)</span>', 'buddypress' ); ?></label>

<input type="password" name="pwd" id="pwd" size="16" value="" class="settings-input small"/>  <a

href="<?php echo site_url( add_query_arg( array( 'action' => 'lostpassword' ), 'wp-login.php' ), 'login' ); ?>"

title="<?php _e( 'Password Lost and Found', 'buddypress' ); ?>"><?php _e( 'Lost your password?', 'buddypress' ); ?></a>

<?php endif; ?>

<input type="text" name="email" id="email" value="<?php echo bp_get_displayed_user_email(); ?>"

class="settings-input"/>

<label for="pass1"><?php _e( 'Change Password <span>(leave blank for no change)</span>', 'buddypress' ); ?></label>

 <?php _e( 'New Password', 'buddypress' ); ?><br/>

 <?php _e( 'Repeat New Password', 'buddypress' ); ?>

<?php do_action( 'bp_core_general_settings_before_submit' ); ?>

<input type="submit" name="submit" value="<?php _e( 'Save Changes', 'buddypress' ); ?>" id="submit"

class="auto"/>

</div>

<?php do_action( 'bp_core_general_settings_after_submit' ); ?>

<?php wp_nonce_field( 'bp_settings_general' ); ?>

</form>

You can see that I don't have any header/footer or item-body div. All the layout is properly handled by members/single/home.php. You can make the similar changes for other three files.

We are almost done and It is time to take a break but wait, we have left something. The problem is BuddyPress theme authors are lazy(I am assuming it, because I could not find a theme with different layout for profile etc) and most of them will just copy paste the code form BuddyPress template pack or bp-default theme. So, you will see that your settings.php inside members/single directory looks like this.

<div class="item-list-tabs no-ajax" id="subnav" role="navigation">
        <ul>
			<?php if ( bp_core_can_edit_settings() ) : ?>

				<?php bp_get_options_nav(); ?>

			<?php endif; ?>
        </ul>
    </div>

<?php

if ( bp_is_current_action( 'notifications' ) ) :
	locate_template( array( 'members/single/settings/notifications.php' ), true );

elseif ( bp_is_current_action( 'delete-account' ) ) :
	locate_template( array( 'members/single/settings/delete-account.php' ), true );

elseif ( bp_is_current_action( 'general' ) ) :
	locate_template( array( 'members/single/settings/general.php' ), true );

else :
	locate_template( array( 'members/single/plugins.php' ), true );

endif;

?>

<ul>

<?php if ( bp_core_can_edit_settings() ) : ?>

<?php bp_get_options_nav(); ?>

<?php endif; ?>

</ul>

</div>

<?php

if ( bp_is_current_action( 'notifications' ) ) :

locate_template( array( 'members/single/settings/notifications.php' ), true );

elseif ( bp_is_current_action( 'delete-account' ) ) :

locate_template( array( 'members/single/settings/delete-account.php' ), true );

elseif ( bp_is_current_action( 'general' ) ) :

locate_template( array( 'members/single/settings/general.php' ), true );

else :

locate_template( array( 'members/single/plugins.php' ), true );

endif;

If you examine it closely, It does not load capabilities.php file when the admin tries to moderate a user. Well' that's not good and we need to change the php block to something like this.

 <div class="item-list-tabs no-ajax clearfix" id="subnav" role="navigation">
		<ul>
			<?php if ( bp_core_can_edit_settings() ) : ?>

				<?php bp_get_options_nav(); ?>

			<?php endif; ?>
		</ul>
	</div>

<?php

if ( bp_is_current_action( 'notifications' ) ) :
	locate_template( array( 'members/single/settings/notifications.php' ), true );

elseif ( bp_is_current_action( 'delete-account' ) ) :
	locate_template( array( 'members/single/settings/delete-account.php' ), true );

elseif ( bp_is_current_action( 'general' ) ) :
	locate_template( array( 'members/single/settings/general.php' ), true );
elseif ( bp_is_current_action( 'capabilities' ) ) :// load capabilities.php too.
	locate_template( array( 'members/single/settings/capabilities.php' ), true );

else :
	locate_template( array( 'members/single/plugins.php' ), true );

endif;
?>

<ul>

<?php if ( bp_core_can_edit_settings() ) : ?>

<?php bp_get_options_nav(); ?>

<?php endif; ?>

</ul>

</div>

<?php

if ( bp_is_current_action( 'notifications' ) ) :

locate_template( array( 'members/single/settings/notifications.php' ), true );

elseif ( bp_is_current_action( 'delete-account' ) ) :

locate_template( array( 'members/single/settings/delete-account.php' ), true );

elseif ( bp_is_current_action( 'general' ) ) :

locate_template( array( 'members/single/settings/general.php' ), true );

elseif ( bp_is_current_action( 'capabilities' ) ) :// load capabilities.php too.

locate_template( array( 'members/single/settings/capabilities.php' ), true );

else :

locate_template( array( 'members/single/plugins.php' ), true );

endif;

Now, go ahead and modify your theme for better templating. Do let me know in comments if you use this trick or plan to use it in future 🙂

4 Responses to Templating User settings page of BuddyPress Themes correctly

mercime #
Thanks Brajesh! I'm going to check out the templates mods this weekend 🙂 Good to see you posting your awesome tutorials again!
Brajesh Singh #
Thank you Mercime 🙂
Getting back to the old self again 🙂 Hoping to do better in future.
Henry #
Brajesh,
I've been looking at these settings templates for ages thinking they're not set up properly by default. Thanks for this tip, making everything work consistently is always good!
Nicolas #
Wow dude, just WOW! I never take time to thank posters for usefull info, BUT YOU JUST FRIGGING ENDED 12 HOURS OF AGONY AND SELFLOATHING OVER THE FACT THAT IM BUDDYPRESSES BITCH. I couldnt for the love of god figure this one out, not even with googleing magic so, i'd like you to know that in Buenos Aires, Argentina there's a dude who would buy you a beer if the chances met, THANK YOU CODEBRO!