How to add a Custom Menu into your BuddyPress theme (WordPress 3.0)

Please note: By adding using a Custom Menu in your BP theme, you will have to re-create all the links (ie. Activity/Forum/Blog/etc.)! Before you begin, make sure you are running the latest BuddyPress / WordPress versions and that everything works properly. PLUS, keep a backup of everything just in case something goes south.

This tutorial will explain how to add a basic Custom Menu into your existing BuddyPress theme a la WordPress TwentyTen (see functioning custom menu at http://2010dev.wordpress.com/). I’d rate the difficulty for this as average with an estimated time of completion at around 20-30 minutes if you’re good at copy/pasting. Below is a screenshot of what we’re about to accomplish:

We’ll start by registering the Custom Menus function in the functions.php file. This step is almost identical to adding sidebars into your theme.

Open up functions.php in your existing theme folder and add the following code (I pasted this right after my last sidebar):

if ( function_exists( 'register_nav_menus' ) ) {

	register_nav_menus( array(
		'primary' => __( 'Primary Navigation'),
	) );
}

If you don’t have a functions.php file in your BuddyPress theme folder, do not copy it over from the Default BP theme, as this may break your theme. Instead, create a new functions.php file and upload it into your theme folder with the following code:

< ?php if ( function_exists( 'register_nav_menus' ) ) { 	register_nav_menus( array( 		'primary' => __( 'Primary Navigation'),
	) );
}
?>

Next, we’ll want to initialize the Custom Menu in your site’s navigation, so we’ll have to edit the theme’s header.php file. If your BP theme doesn’t have a header file, go ahead and copy it over from the BP Default theme, located in plugins >> buddypress >> bp-themes >> bp-default >> header.php

Open your header.php file and replace this code…

• class=”selected”< ?php endif; ?>> ” href=”/< ?php echo BP_ACTIVITY_SLUG ?>/&phpMyAdmin=ArnvRH-YBGopVGsI37%2Czbv5xdx8″>< ?php _e( ‘Activity’, ‘buddypress’ ) ?>

< ?php endif; ?>

• class=”selected”< ?php endif; ?>> ” href=”/< ?php echo BP_GROUPS_SLUG ?>/&phpMyAdmin=ArnvRH-YBGopVGsI37%2Czbv5xdx8″>< ?php _e( ‘Groups’, ‘buddypress’ ) ?>

< ?php if ( bp_is_active( ‘forums’ ) && ( function_exists( ‘bp_forums_is_installed_correctly’ ) && !(int) bp_get_option( ‘bp-disable-forum-directory’ ) ) && bp_forums_is_installed_correctly() ) : ?>

• class=”selected”< ?php endif; ?>> ” href=”/< ?php echo BP_BLOGS_SLUG ?>/&phpMyAdmin=ArnvRH-YBGopVGsI37%2Czbv5xdx8″>< ?php _e( ‘Blogs’, ‘buddypress’ ) ?>

< ?php endif; ?> < ?php wp_list_pages( ‘title_li=&depth=1&exclude=’ . bp_dtheme_page_on_front() ); ?> < ?php do_action( ‘bp_nav_items’ ); ?>

with:

You can pass a lot more parameters as listed at http://codex.wordpress.org/Function_Reference/wp_nav_menu but since we’re keeping it simple, this will do for now.

At this point, you should be able to see Menus in your Dashboard under Appearance >> Menus. Create your custom menu, give it a name and press Save (I labeled mine Main Nav). Then, under Menus, go to Theme Locations >> Primary Navigation >> Main Nav and press Save.

Finally, copy over the CSS for the menu (#access) section of the TwentyTen theme into your BP theme’s stylesheet, style.css.

#access {
	background: #000;
	margin: 0 auto;
	width: 960px;
	display:block;
	float:left;
}
#access .menu-header,
div.menu {
	font-size: 13px;
	margin-left: 12px;
}
#access .menu-header ul,
div.menu ul {
	list-style: none;
	margin: 0;
}
#access .menu-header li,
div.menu li {
	float:left;
	position: relative;
}
#access a {
	display:block;
	text-decoration:none;
	color:#aaa;
	padding:0 10px;
	line-height:38px;
}
#access ul ul {
	display:none;
	position:absolute;
	top:38px;
	left:0;
	float:left;
	box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	width: 180px;
	z-index: 99999;
}
#access ul ul li {
	min-width: 180px;
}
#access ul ul ul {
	left:100%;
	top:0;
}
#access ul ul a {
	background:#333;
	height:auto;
	line-height:1em;
	padding:10px;
	width: 160px;
}
#access li:hover > a,
#access ul ul :hover > a {
	color:#fff;
	background:#333;
}
#access ul li:hover > ul {
	display:block;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
	color: #fff;
}

* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
	color:#fff;
}

You may have to tweak your CSS as necessary. In my case, I adjusted the #access width, the #header height and the #container margins. This process will be the same for most BP themes.

To add your BP links back into your custom menu, use the Custom Links option under Appearance >> Menus as pictured.

Below is a quick overview for your old BP links. Just replace the yourdomain part with your actual domain name. All other existing pages should be listed under Pages within your Menus section. As a reference, here’s what your linking structure should look like.

• Activity: http://yourdomain.com/activity/
• Members: http://yourdomain.com/members/
• Groups: http://yourdomain.com/groups/
• Forums: http://yourdomain.com/forums/

*** BuddyPass Members can download the sample Blackstar Custom Menu-enabled theme in the Download Center under the Miscellaneous section. Enjoy =) ***

To learn more about Custom Menus, visit the WordPress codex at
http://codex.wordpress.org/Appearance_Menus_SubPanel

Tags | BuddyPress, theming