Skip to:
Content
Pages
Categories
Search
Top
Bottom

Re: How to create submenu containing BuddyPress tabs (editing header.php)?

I leveraged the existing drop down method in BuddyPress and created the following code. Three files in my child theme. Modify for your needs.

  • header.php
  • _inc/css/custom.css
  • _inc/scripts/nav.js

header.php

<div id="wp-nav-bar">
<ul id="nav" class="main-nav">
<!-- Community Drop Down -->
<li <?php if (
bp_is_page( BP_ACTIVITY_SLUG ) ||
bp_is_page( BP_MEMBERS_SLUG ) || bp_is_member() ||
bp_is_page( BP_GROUPS_SLUG ) || bp_is_group() ||
bp_is_page( BP_FORUMS_SLUG ) ||
bp_is_page( BP_BLOGS_SLUG ) ) : ?> class="selected"<?php endif; ?>>
<a href="<?php echo site_url() ?>/<?php echo BP_ACTIVITY_SLUG ?>/" title="<?php _e( 'Community', 'buddypress' ) ?>"><?php _e( 'Community', 'buddypress' ) ?></a>
<ul>

<?php if ( 'activity' != bp_dtheme_page_on_front() && bp_is_active( 'activity' ) ) : ?>
<li<?php if ( bp_is_page( BP_ACTIVITY_SLUG ) ) : ?> class="selected"<?php endif; ?>>
<a href="<?php echo site_url() ?>/<?php echo BP_ACTIVITY_SLUG ?>/" title="<?php _e( 'Activity', 'buddypress' ) ?>"><?php _e( 'Activity', 'buddypress' ) ?></a>
</li>
<?php endif; ?>

<li<?php if ( bp_is_page( BP_MEMBERS_SLUG ) || bp_is_member() ) : ?> class="selected"<?php endif; ?>>
<a href="<?php echo site_url() ?>/<?php echo BP_MEMBERS_SLUG ?>/" title="<?php _e( 'Members', 'buddypress' ) ?>"><?php _e( 'Members', 'buddypress' ) ?></a>
</li>

<?php if ( bp_is_active( 'groups' ) ) : ?>
<li<?php if ( bp_is_page( BP_GROUPS_SLUG ) || bp_is_group() ) : ?> class="selected"<?php endif; ?>>
<a href="<?php echo site_url() ?>/<?php echo BP_GROUPS_SLUG ?>/" title="<?php _e( 'Groups', 'buddypress' ) ?>"><?php _e( 'Groups', 'buddypress' ) ?></a>
</li>

<?php if ( bp_is_active( 'forums' ) && bp_is_active( 'groups' ) && ( function_exists( 'bp_forums_is_installed_correctly' ) && !(int) get_site_option( 'bp-disable-forum-directory' ) ) && bp_forums_is_installed_correctly() ) : ?>
<li<?php if ( bp_is_page( BP_FORUMS_SLUG ) ) : ?> class="selected"<?php endif; ?>>
<a href="<?php echo site_url() ?>/<?php echo BP_FORUMS_SLUG ?>/" title="<?php _e( 'Forums', 'buddypress' ) ?>"><?php _e( 'Forums', 'buddypress' ) ?></a>
</li>
<?php endif; ?>
<?php endif; ?>

<?php if ( bp_is_active( 'blogs' ) && bp_core_is_multisite() ) : ?>
<li<?php if ( bp_is_page( BP_BLOGS_SLUG ) ) : ?> class="selected"<?php endif; ?>>
<a href="<?php echo site_url() ?>/<?php echo BP_BLOGS_SLUG ?>/" title="<?php _e( 'Blogs', 'buddypress' ) ?>"><?php _e( 'Blogs', 'buddypress' ) ?></a>
</li>
<?php endif; ?>

</ul>
</li>
<?php do_action( 'bp_nav_items' ); ?>
</ul>
</div>

custom.css

/* Subnav */
ul#nav li ul {width: 30.7%;}
ul#nav li ul li {float: none; width: 100%;}
ul#nav li ul li a {background: none !important; padding: 5px 15px;}
#wp-nav-bar ul li ul {position: absolute; left: -999em; z-index: 1;}
#wp-nav-bar ul li ul li a span {display: none;}
#wp-nav-bar ul li:hover ul,
#wp-nav-bar ul li li:hover ul,
#wp-nav-bar ul li.sfhover ul,
#wp-nav-bar ul li ul li.sfhover ul {left: auto;}

nav.js

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" sfhover";
}
node.onmouseout=function() {
this.className=this.className.replace(" sfhover", "");
}
}
}
}
}
window.onload=startList;

j(document).ready( function() {
/* Admin Bar Javascript */
j("#wp-nav-bar ul.main-nav li").mouseover( function() {
j(this).addClass('sfhover');
});

j("#wp-nav-bar ul.main-nav li").mouseout( function() {
j(this).removeClass('sfhover');
});
});

Skip to toolbar