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…

< ?php endif; ?>

< ?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() ) : ?>

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

with:

< ?php wp_nav_menu( array( ‘menu_class’ => ‘menu-header’ ) ); ?>

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

Tagged as: ,

32 Comments

  1. Joe's Pferde July 8, 2010 at 12:29 pm #

    Thank you for this tutorial. It would also be awesome to know how one could add menu icons. :)

  2. Mike July 8, 2010 at 9:25 pm #

    Sure, I think that can be done. Will release a new BuddyPack soon, so when that’s done, I’ll tackle that tutorial, as well =)

  3. Bob Sfungaraki July 12, 2010 at 5:35 am #

    Thanks for a really useful tutorial Mike.

    But, I am having some problems with the custom menu. Everything works perfect until I add the (#access) section of the TwentyTen theme. The styling works mostly, but it kills the menu links, making the links unclickable and the dropdown doesn´t show either.

    Do you have any ideas what could be doing this?

    I am using the Bp-default (child) theme with wp 3.0 and Buddypress 1.2.5.2

  4. Mike July 12, 2010 at 7:24 am #

    Hmmm… without looking at your code, this could be several things. Maybe your functions.php file is broken due to extra white spaces or a faulty function. If you have other CSS stylesheets, they could be conflicting with the menu, or maybe your theme is already using a div called access… or the pages don’t exist/function, rendering them 404s. At any rate, if you post a link to your site, it’d be easier to troubleshoot.

  5. Bob Sfungaraki July 13, 2010 at 3:15 am #

    Thanks for the suggestions Mike!

    I figured out what the problem was. It seems that BP removes the links if you paste the code the wrong place. Placing it just before works though. :)

  6. Bob Sfungaraki July 13, 2010 at 3:23 am #
  7. Bob Sfungaraki July 13, 2010 at 3:25 am #

    Your website seems to strip out my HTML snippet.

    Pasting it inside the header DIV works was what I meant to say.

  8. Mike July 13, 2010 at 7:04 am #

    Yeah, WP comments were never really that great for pasting code — you always have to use tick marks or the [code] brackets. This site http://pastebin.com/ is really good for that if you run into any other problems. Glad you got it working though =)

  9. John August 19, 2010 at 8:37 pm #

    I followed these instructions to the letter, but like the previous poster, I’m finding that the links don’t work. I’ve checked for broken links, and am pretty sure there are no whitespace issues. Any other ideas?

  10. Michael Kuhlmann August 20, 2010 at 7:08 am #

    Hey John – I just updated the code that goes into functions.php — added two more lines. It basically says to add Custom Menu support if your theme doesn’t already have it, so I think that might fix it.

  11. John August 20, 2010 at 7:50 pm #

    Michael,
    That did not seem to make any difference. I’m just using the bp-default theme, should I be using something else?

  12. Mike August 21, 2010 at 11:33 am #

    Ohhh… I thought you were using one of my child themes. I’m actually not sure how that custom header menu code would impact the default theme’s functions.php file. I suppose you could make a very basic default child theme (http://codex.buddypress.org/how-to-guides/building-a-buddypress-child-theme/) and then including the header/functions tweaks… actually, I’d probably recommend that, because if you ever upgraded your BP plugin, it would overwrite all of your changes, anyway. If all still fails, there’s always this tutorial http://www.kriesi.at/archives/improve-your-wordpress-navigation-menu-output

  13. Tyler October 4, 2010 at 11:33 am #

    Michael, thanks for this tutorial. I’ve found it helpful for adding dropdown menus to the default Buddypress theme.

    At the moment, a menu stemming from the horizontal UL appears far to the left, below the first LI, the home page in the case of the BP theme. Any thoughts what might be causing that? I’m going through the CSS with Firebug, but any pointers would be appreciated.

  14. Michael Kuhlmann October 4, 2010 at 7:23 pm #

    Hey Tyler – Is there any chance you could provide me with a link to your BP site so that I can take a gander?

  15. Tyler October 4, 2010 at 7:54 pm #

    @Michael It’s all local at the moment, unfortunately.

    And I had to do some monkeying with selectors to get the new menu to be horizontal in the first place, so there’s the possibility I goofed things up. I’ve gone back to the beginning to do it over more carefully, but it’s going to take me some experimenting to figure out what I did in the first place to make the primary menu horizontal.

  16. Tyler October 4, 2010 at 8:18 pm #

    Yep, it was my own mistake.

    I will say that your CSS above, when applied to the default Buddypress theme, creates a vertical unordered list in the header with a black background, seemingly because it refers to the class “menu-header,” rather than “menu-header-menu-container.”

    I couldn’t guess as to whether it’s a browser issue or the theme’s selectors were changed after you wrote that CSS.

    At any rate, thanks again for writing the tutorial. It got me on my way.

    • Michael Kuhlmann October 7, 2010 at 7:33 am #

      I’m glad you got it working! That functionality is a real time saver. One thing I haven’t tested yet — maybe somebody else already has — is site migration/restoration and whether the menus all stay in tact. Will have to look into it =)

  17. Ari Kuchar November 21, 2010 at 8:42 pm #

    @Michael Thanks for this tute, very helpful. The only problem is that my menu is aligned vertically and I can’t for the life of me align it horizontally. I don’t think it has to do with the CSS as I removed the styling and it still appeared to list vertically. I am running the facelook child theme.

    @Tyler It seems as if you may have had the same problem but fixed it? Would love to know how you did it!

    Site: artmeartyou.com.au

    Many thanks!

  18. Mike November 21, 2010 at 9:11 pm #

    @Ari – Sent you an email!

  19. Ivan Pl December 13, 2010 at 3:58 pm #

    Mmmm… “Theme Locations” option doesn’t appear in WP sidebar under menus option… it doesn’t appear anywhere. I could see the links, but I couldn’t locate them anywhere I want. Maybe I misunderstood something?

  20. Ari December 20, 2010 at 2:16 pm #

    Fixed it.

    Check it out at artmeartyou.com.au

  21. John Sam Wallace January 6, 2011 at 5:52 am #

    Thanks for the great tutorial! When you use this tutorial with the BuddyPress default theme, the search-bar div covers the access div. The links are live, they are just covered so you can’t click them. The problem is fixed by adjusting #access in style.css to move the menu down. I used:

    #access {
    margin: 60px 10px;
    display:block;
    float:right
    }

    Blessings!

  22. owen February 18, 2011 at 2:41 am #

    artmeartyou.com.au don’t work at my end..

  23. david February 21, 2011 at 1:50 pm #

    I never use the default Buddypress theme, thanks for the great tutorial.

  24. kyrul March 20, 2011 at 12:31 am #

    thankz 4 sharing!

  25. george April 17, 2011 at 4:24 pm #

    artmeartyou.com.au don’t work at my end too.

  26. G. Morty Ortega April 26, 2011 at 4:10 am #

    I couldn’t get this to work until I visited: http://codex.wordpress.org/Navigation_Menus
    where it states that you need to add this:
    [code]http://codex.wordpress.org/Navigation_Menus[/code]
    to the functions file as well.

    • G. Morty Ortega April 26, 2011 at 4:13 am #

      Errr.. let’s try that again…
      `add_action( ‘init’, ‘register_my_menus’ );`

  27. G. Morty Ortega April 26, 2011 at 4:22 am #

    Also, when adding the custom menus, you can simply put /forum/ or whatever instead of the absolute url.

  28. Mike April 26, 2011 at 8:10 am #

    Ah nice! Thank you G =) I posted this tutorial a while ago. I almost thought about updating this, but BP 1.3 already ships with custom menus, so no need to fiddle around with more *custom* functions =)

  29. David August 24, 2011 at 2:41 am #

    Thanks for posting. I had copy-pasted a TwentyTen menu into a WP 2.x default theme setup, and needed to add the support for the custom menus to work in the dashboard under WP 3.2.1. All I needed to do was add the function code you listed first.

    Super.

Trackbacks/Pingbacks

  1. How to customize BuddyPress admin bar – Michael Kuhlmann - March 23, 2011

    [...] The following is not an official guide for how to customize the BuddyPress Admin Bar much like my previous how-to BuddyPress post. In fact, I scoured the BP forums on how to do exactly this, so if the php code isn’t quite [...]

Leave a Reply