How To

Customizing a Sidebar Profile – BuddyPress

Customizing your sidebar to have a cool and sexy profile accordion is actually pretty easy!

I was looking at BP Tricks and thought ‘You know what would rock my site? A sidebar profile controller!’ Turns out this is pretty easy and only ‘requires’ two plugins.

My final product (see left) isn’t super impressive, but it’s pretty simple and easy to use. The basic idea is that I have two master widgets. One is what the non-logged in user sees (a simple signup window) and one is what the logged in user sees. The logged in user should be able to see their profile info, their notifications and anythign else I want. Before I got started I made a list of what I wanted them to see.

  • Profile – This lists your profile, edit links, settings links, and a logout link
  • Notifications – This lists everything that can email you: notices/messages, comment subscriptions, newsletters, mailing lists
  • Achivements – I use Paul Gibbs’ Achievements for BuddyPress
  • Activity – Links to the various activity screens

First I decided I wanted an accordian style profile, where you had sections. I grabbed Tabbed Widgets and tossed that in my widget area. Then I used Widget Logic and set the tab to only show if a user was logged in. If the user is NOT logged in, I used the PHP Code Widget to display a login form. Since I’m using BuddyPress, I just grabbed this wholesale from the source.

<form id="sidebar-login-form" class="standard-form" action="<?php echo site_url( 'wp-login.php', 'login_post' ) ?>" method="post" name="login-form"><label><!--?php _e( 'Username', 'buddypress' ) ?--> <input id="sidebar-user-login" class="input" type="text" name="log" value="<?php echo esc_attr(stripslashes($user_login)); ?>" /></label><label><!--?php _e( 'Password', 'buddypress' ) ?--> <input id="sidebar-user-pass" class="input" type="password" name="pwd" value="" /></label>
<p class="forgetmenot"><label> <input id="sidebar-rememberme" type="checkbox" name="rememberme" value="forever" /> <!--?php _e( 'Remember Me', 'buddypress' ) ?--></label></p>

<center><!--?php do_action( 'bp_sidebar_login_form' ) ?--> <input id="sidebar-wp-submit" tabindex="100" type="submit" name="wp-submit" value="<?php _e('Log In'); ?>" /> <input type="hidden" name="testcookie" value="1" /></center></form>

I could have probably done this with a widget, but I like being able to customize my PHP as I want to. Next it was time to build my tabs. The Tabbed Widget plugin is pretty easy to use. You make your widgets in the Invisible Widget area and they show up available for the Tabbed Widget. Using the list I made above, I pulled in the obvious widgets. Three are PHP and one is the Achievements widget which came with the plugin. I dislike using plugins just for widgets, so my PHP is how I customized things. The PHP for notifications has extra cruft you probably won’t need, but I wanted you to see how you could easily port in any link.

My profile

<div style="float: left; padding-left: 5px;"><strong>Hello, <!--?php echo bp_loggedin_user_fullname() ?--></strong>
 • <a href="<?php echo bp_loggedin_user_domain() ?>profile/">Visit My Profile</a>
 • <a href="<?php echo bp_loggedin_user_domain() ?>profile/edit/">Edit My Profile</a> 
 • <a href="<?php echo bp_loggedin_user_domain() ?>settings/">Edit My Settings</a> </div>

My Notifications

• <a href="">Edit Comment Subscriptions</a>
• <a href="">Edit Daily Update Emails</a>
• <a href="">Edit CSI Watch Subscription</a>
• <?php if ( messages_get_unread_count() > 0 ) {
	?><a href="<?php echo bp_loggedin_user_domain() ? rel="nofollow"><?php echo BP_MESSAGES_SLUG ?>">Inbox (<?php echo messages_get_unread_count(); ?>)</a><?php 
} else {
	?><a href="<?php echo bp_loggedin_user_domain() ? rel="nofollow">/messages/">No new messages</a><?php 
} ?>


<div style="padding-left: 5px;">
<ul id="user-menu">
	<li><a href="<?php echo bp_loggedin_user_domain() ?>activity/">Site Activity</a></li>
	<li><a href="<?php echo bp_loggedin_user_domain() ?>activity/just-me/">My Activity</a></li>
	<li><a href="<?php echo bp_loggedin_user_domain() ?>activity/favorites/">My Favorites</a></li>
	<li><a href="<?php echo bp_loggedin_user_domain() ?>activity/groups/">My Groups</a></li>
	<li><a href="<?php echo bp_loggedin_user_domain() ?>activity/mentions/">@<!--?php echo bp_loggedin_user_fullname() ?--></a></li>

Once I was done making those, I just pulled them into my Tabbed Widget in the order I wanted, with the style and defaults I wanted. The rest was all CSS, which you can do yourself.

Basically, this just goes to show you that you can do pretty much anything you want with WordPress plugins. I really only needed two to do this, though the third (PHP Code Widget) really helped me take it to the next level. If you’re PHP shy, you can use Login with Ajax instead of my ‘Login’ code, BP Notification Widget instead of my Notification code, and I’m sure people can pick out some alternatives to other code bits.

Hope this gets you started!

21 replies on “Customizing a Sidebar Profile – BuddyPress”

I found your neat little idea on bp-tricks, thanks for putting together and posting. I didn’t actually know about tabbed widgets or php widgets, so I got a triple bonus from this one. I incorporated this on my site, I hope you don’t mind, it’s pretty cool. Thanks!

Of note? This breaks on WordPress 3.1 right now! It’s the Tabbed Widget plugin. I dropped a note to the dev, and I suspect it’s because of the jQuery change in WP 3.1 😀 Gotta laugh!

It works on the 1.3 version of the plugin, but I’m having issues with 1.3.1 for some reason.

I’ve run into this with TW 1.3.1 on a new theme, as well. I’m curious: what did you fix in your theme to make it work? Maybe I have the same issue…

HOLY COW! Just found this post and I am simply over the moon – thank you soooo much for posting this. I have been wondering how to do this and you have saved my day. I am doing a little dance in your honour right now 😀

HOLY COW! Just found your post and I am overjoyed… I have been wondering how to do this and you have made it really easy to follow. Thanks soooooo much! I am doing a little dance in your honour 😀

When I use your new code I get this error:

Parse error: syntax error, unexpected ‘=’ in /home/tradesh4/public_html/wp-content/plugins/php-code-widget/execphp.php(44) : eval()’d code on line 2

Can You help? Thank you!

That code is what I was using (I’m not using it at all right now due to other issues, unrelated), but it worked fine.

I would start with just checking that the basic if/else part works:

if ( messages_get_unread_count() > 0 ) {
echo "Unread!";
} else {
echo "No new messages";

If that works, start adding in the rest.

Comments are closed.