Tag: buddypress

FYI – In WordPress 3.3 the Admin Bar was renamed the Toolbar, replacing the header entirely, and now has more hooks to edit it. Please read http://wpdevel.wordpress.com/2011/12/07/admin-bar-api-changes-in-3-3/ for more information.

Since WordPress 3.1, the Admin Bar has been around and been somewhat controversial. Some people love it, some hate it, and some couldn’t care. A lot of the time in the WP Support Forums I had to remind people that you can turn this off for yourself in your profile.

My standard replies to people was pretty much this:

If it’s throwing your theme out of whack, make sure you have a call to wp_footer() in your theme’s footer. The next cause for that is your theme’s css having a conflict. If it’s your avatar size, again, that’s CSS. Wanna turn the admin menu ON for EVERYONE? Use the Always Show Admin Bar Function. Like the bar but not the search? Hide Admin Bar Search Plugin is there. Want to minimise it? Admin Bar Minimiser Plugin. Want to disable it selectively? Admin Bar Disabler Plugin can do that.

Finally if you MUST turn it off… you can add one of these to your functions.php

add_filter( 'show_admin_bar', '__return_false' );
show_admin_bar(false);
show_admin_bar(0);

OR use the Disable Admin Bar plugin.

FYI, if you put the plugin in a folder called mu-plugins (yes, you can do this on Single Site as well as MultiSite) then your users won’t be able to un-install it unless they go in via FTP. Just put the mu-plugins folder in the same level as themes and plugins (wp-content/mu-plugins) and copy the FILE (not the folder) for the plugin into there. Done.

Now me? I like having it on. I used to have it turned one for all users, all visitors, everyone all the time. Recently, when I re-designed some sites, I removed that functionality because it was showing too much info to people who were suffering from information overload. Once I pulled the admin bar off for non-logged in users, I realized I wanted to change the way it worked.

The normal admin bar is actually pretty straight forward. The pretty icon of your user ID with a drop down menu rocks. The problem I had was my site was built to keep people off the backend. I already use the rocking WP Hide Dashboard plugin, and BuddyPress is installed, so I wanted to redirect people from places like ‘My Profile’ on the unbranded WP backend to the pretty BuddyPress front end. And yes, I think all ‘user interface’ plugins should have a front-end version.

I could have used something like WP Custom Admin Bar, but I knew I was going to want some pretty weird, granular level, control over the layout and the submenus. In order to make this look how I wanted, I had to remove menus I didn’t want (or need) and add in new ones. I did it all in a file called adminbar.php, which I tossed in the mu-plugins folder (so on a multisite it can never be turned off):

function ipstenu_admin_bar_remove() {
        global $wp_admin_bar;

        /* Remove their stuff */
        $wp_admin_bar->remove_menu('my-blogs');
        $wp_admin_bar->remove_menu('my-account-with-avatar');
        $wp_admin_bar->remove_menu('appearance');
}

add_action('wp_before_admin_bar_render', 'ipstenu_admin_bar_remove', 0);

The values like my-blogs and so on are the IDs of the menus you want to yank:

• my-account-with-avatar / my-account: Links to your account. The ID depends upon if you have avatars enabled or not.
• my-blogs: My Sites menu. For networks (aka MultiSite) only
• edit: Post/Page edit link
• new-content: Add New Content menu
• comments: Comments link
• appearance: Appearance menu
• updates: Updates link
• get-shortlink: Shortlink to a page

While some of these menus only show up for the admins, I figured I may as well remove the ones I don’t need right there anyway. I’m also of the (unproven) opinion that the fewer calls I make in that admin menu, the faster my site will be. The only reason I yanked my-account-with-avatar was because I wanted to remove some of the submenus and add in my own. I found it was easier to recreate it on my own, so I did this:

function ipstenu_admin_bar_add() {
        global $wp_admin_bar, $user_identity;
        $user_id = get_current_user_id();

        /* Add my stuff */
        if ( 0 != $user_id ) {
                $avatar = get_avatar( get_current_user_id(), 16 );
                $id = ( ! empty( $avatar ) ) ? 'ipstenu-account-with-avatar' : 'ipstenu-account';
                $wp_admin_bar->add_menu( array( 'id' => $id, 'title' => $avatar . $user_identity,  'href' => 'https://ipstenu.org/members/'. $user_identity .'/profile/' ) );
                $wp_admin_bar->add_menu( array( 'parent' => $id, 'title' => __( 'Edit My Profile' ), 'href' => 'https://ipstenu.org/members/'. $user_identity .'/profile/edit/' ) );
                if ( current_user_can('manage_options') ) {
                        $wp_admin_bar->add_menu( array( 'parent' => $id, 'title' => __( 'Dashboard' ), 'href' => 'https://ipstenu.org/wp-admin/' ) );
                        $wp_admin_bar->add_menu( array( 'parent' => $id, 'title' => __( 'Network Admin' ), 'href' => 'https://ipstenu.org/wp-admin/network' ) );
                }
                $wp_admin_bar->add_menu( array( 'parent' => $id, 'title' => __( '<strong>Log Out</strong>' ), 'href' => wp_logout_url() ) );
        }
}

add_action( 'admin_bar_menu', 'ipstenu_admin_bar_add', 10 );

But wait! If you just tried that, you found out the CSS looks like a monkey puked on your site. The avatar icon’s goobered, that pretty sprite that shows the arrow is missing. Well, that’s easily fixed with some CSS.

In the same adminbar.php file, I put this:

function link_to_stylesheet() {
if ( is_user_logged_in() ) {
?>

wp_head you still get the fugly on the admin side. That’s easilly fixed with a second action call: add_action('admin_head', 'link_to_stylesheet');

Now you can make your admin bar have the menus (or submenus) you want to your heart’s content too!

While you can take my work for your starting point, here are the links I found helpful when I was kicking all this around:

• SumTips: Customize WordPress Admin Bar by Adding/Removing Links
• WP Engineer: Add Menus to the Admin Bar of WordPress
• Digging Into WordPress: Admin Bar Tricks

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>
<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>
</div>

My Notifications

• <a href="http://jorjafox.net/comment-subscriptions/">Edit Comment Subscriptions</a>
• <a href="http://jorjafox.net/wp-admin/users.php?page=s2_users">Edit Daily Update Emails</a>
• <a href="http://jorjafox.net/csiwatch/">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 
} ?>

Activity

<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>
</ul>
</div>

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!