Skip to:
Content
Pages
Categories
Search
Top
Bottom

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

  • Avatar of raynerlim36
    raynerlim36
    Participant

    @raynerlim36

    Hi :D

    The details are as follows:

    • WordPress Version: MultiUser 2.9.2
    • BuddyPress Version: 1.2.2.1
    • Theme: Avenue K9, Michael Kuhlmann’s B2 Theme Pack (Theme works fine)
    • I have used WordPress for a few months only.
    • I am a BuddyPress newbie.
    • I know some HTML.
    • I do not know PHP at all.

    Hi again :D

    I really need urgent help in editing /wp-content/plugins/buddypress/bp-themes/bp-default/header.php as I am in a hurry to meet the deadline.

    I want to move the Activity, Members, Groups and all the other BuddyPress links into a list item called “Community”.

    If that is possible, please let me know how to do it (my code is shown below, which doesn’t work), if not, please recommend a theme that I can acheive this functionality with, be it a Buddymatic theme or not.

    To give you a better understanding, my sitemap is shown below:

    • Home
    • Community

      • Activity
      • Members
      • Groups
      • Forums
      • Blogs

    • Expositions

      • Secondary 1
      • Secondary 2
      • Secondary 3
      • Secondary 4
      • Secondary 5

    • Creative Expressions

      • Secondary 1
      • Secondary 2
      • Secondary 3
      • Secondary 4
      • Secondary 5

    • Situational Writing

      • Secondary 1
      • Secondary 2
      • Secondary 3
      • Secondary 4
      • Secondary 5

    • Useful Links
    • Contact Us

    My code (which of course does not work since I’m a newbie) loooks like this:

    <div id="header">
    <h1 id="logo"><a href="<?php echo site_url() ?>" title="<?php _e( 'Home', 'buddypress' ) ?>"><?php bp_site_name() ?></a></h1>
    <ul id="nav">
    <li <?php echo site_url() ?>" title="<?php _e( 'Community', 'buddypress' ) ?>">
    <ul title="Community">
    <li<?php if ( bp_is_front_page() ) : ?> class="selected"<?php endif; ?>>
    <a href="<?php echo site_url() ?>" title="<?php _e( 'Home', 'buddypress' ) ?>"><?php _e( 'Home', 'buddypress' ) ?></a>
    </li>
    <?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' ) && ( function_exists( 'bp_forums_is_installed_correctly' ) && !(int) bp_get_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 wp_list_pages( 'title_li=&depth=1&exclude=' . bp_dtheme_page_on_front() ); ?>
    <?php do_action( 'bp_nav_items' ); ?>
    </ul><!-- #nav -->
    <div id="search-bar">
    <div class="padder">
    <form action="<?php echo bp_search_form_action() ?>" method="post" id="search-form">
    <input type="text" id="search-terms" name="search-terms" value="" />
    <?php echo bp_search_form_type_select() ?>
    <input type="submit" name="search-submit" id="search-submit" value="<?php _e( 'Search', 'buddypress' ) ?>" />
    <?php wp_nonce_field( 'bp_search_form' ) ?>
    </form><!-- #search-form -->
    <?php do_action( 'bp_search_login_bar' ) ?>
    <div><!-- .padder -->
    </div><!-- #search-bar -->
    <?php do_action( 'bp_header' ) ?>
    </div><!-- #header -->

    Can someone please help me to acheive this (by showing the code please)?

    Thank you very much for everyone’s help!

    Rayner

Viewing 25 replies - 1 through 25 (of 35 total)
  • Avatar of Boone Gorges
    Boone Gorges
    Keymaster

    @boonebgorges

    You’ve more or less got the structure correct.

    - I don’t believe “title” is a valid attribute for li and ul tags. If your goal is to display the word “Community”, you’ll have to put it outside the tag like so:

    <li>Community...

    - I assume that your purpose is to make the Community submenu (Activity, Members, etc) a dropdown menu that is invisible except when you hover over the header Community. That’s a CSS issue. I recommend you find a WordPress theme (or any website, really) that has such a feature, look at the source code and especially the CSS, and emulate the necessary rules. You could also check out a tutorial, like the “horizontal” menu bar described here: http://www.seoconsultants.com/css/menus/tutorial/.

    Good luck!

    Avatar of Bowe
    Bowe
    Participant

    @bowromir

    Here’s the code for a sub menu on the right side of the header with subnavigation:

    Header.php

    <div class="navwrap">
    <ul id="dropmenu">
    <li<?php if ( bp_is_front_page() ) : ?> class="home_active"<?php endif; ?> class="home">
    <a href="<?php echo site_url() ?>" title="<?php _e( 'Home', 'buddypress' ) ?>"><?php _e( 'Home', 'buddypress' ) ?></a>
    </li>

    <?php if ( 'activity' != bp_dtheme_page_on_front() && bp_is_active( 'activity' ) ) : ?>
    <li<?php if ( bp_is_page( BP_ACTIVITY_SLUG ) ) : ?> class="activity_active"<?php endif; ?> class="activity">
    <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="members_active"<?php endif; ?> class="members">
    <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="groups_active"<?php endif; ?> class="groups">
    <a href="<?php echo site_url() ?>/<?php echo BP_GROUPS_SLUG ?>/" title="<?php _e( 'Groups', 'buddypress' ) ?>"><?php _e( 'Groups', 'buddypress' ) ?></a>
    </li>

    <?php endif; ?>

    <?php wp_list_pages('sort_column=menu_order&title_li&='); ?>
    <li class="tricks"><?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_categories('echo=0&orderby=name&exlude=181&title_li=&depth=2')); ?></li>
    </ul>
    </div>

    CSS that goes with it:

    /* Navigation */
    .navwrap {
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    background:url(_inc/images/top_bg.png) repeat scroll left top;
    float:right;
    margin:43px 0 0;
    padding:10px 10px 3px;
    }

    #dropmenu,#dropmenu ul {
    font-size:15px;
    line-height:1.5em;
    list-style-position:outside;
    list-style-type:none;
    position:relative;
    width:100%;
    z-index:300;
    }

    #dropmenu a {
    color:#FFFFFF;
    display:block;
    font-family:nevisBold,"Trebuchet MS",Arial,Helvetica,sans-serif;
    font-size:13px;
    margin-left:2px;
    padding:0 10px 0 17px;
    text-decoration:none;
    text-transform:uppercase;
    }

    #dropmenu a:hover {
    border-bottom:4px solid #EFEFEF;
    color:#555 !important;
    text-shadow:0 1pt 1pt #FFF;
    }

    ul#dropmenu li.selected a,ul#dropmenu li.current_page_item a {
    list-style-image: url(_inc/images/home.png);
    }

    #dropmenu li {
    float:left;
    padding-right:4px;
    position:relative;
    }

    #dropmenu ul {
    display:none;
    position:absolute;
    }

    #dropmenu li ul a {
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    background:#FFF;
    border:1px solid #333;
    float:left;
    height:auto;
    margin-bottom:1px;
    margin-top:5px;
    padding:3px;
    width:150px;
    }

    #dropmenu ul ul {
    top:auto;
    }

    #dropmenu li ul ul {
    left:12em;
    margin:0 0 0 10px;
    }

    #dropmenu li:hover ul,#dropmenu li li:hover ul,#dropmenu li li li:hover ul,#dropmenu li li li li:hover ul {
    display:block;
    }

    Finally some javascript that you can put in your footer for some nice effects:

    <script type='text/javascript'>
    jQuery(document).ready(function() {
    jQuery("#dropmenu ul").css({display: "none"}); // Opera Fix
    jQuery("#dropmenu li").hover(function(){
    jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).show(268);
    },function(){
    jQuery(this).find('ul:first').css({visibility: "hidden"});
    });
    });
    </script>

    You should tweak the .css and remove some unneeded images/padding/margin etc. Good luck dude!

    Avatar of roadblock
    roadblock
    Participant

    @roadblock

    I went a different route to do the same thing.

    Installed a plugin called ‘Page Links To’

    Then I just pointed the page links to section of the page editor to the /member/, /groups/, /forums/ urls. no coding, took a few min.. just be sure to setup the pages with proper parent/child and your good to go…

    Avatar of raynerlim36
    raynerlim36
    Participant

    @raynerlim36

    Thanks a lot guys!

    Sorry for the late relyy as I am living in Singapore.

    @Boon Gorges : Yeah I tried that.. Didn’t work :(. Thanks a lot though!

    @Bowe : Thanks a lot!!! I think it’ll work but I’m busy now so I haven’t tried it yet.!

    @roadblock : Sorry, haven’t tried it out yet. Looks promising though! But can it create a three-tier menu and work with BuddyPress and my Avenue K9 theme? If it does, I’ll try it straight away! Thanks!

    Avatar of roadblock
    roadblock
    Participant

    @roadblock

    I dont know about 3 tiers.. Works with my cleanroar theme and BP with two tiers.. I guess its dependent on WP pages. if you can set a page as a child of a child (a step child lol) then prolly.. I have never needed to go that deep.

    Avatar of bpisimone
    bpisimone
    Participant

    @bpisimone

    slightly different question here:

    how can you combine the if statements for “selected”, like for example the activity and the members and the groups into one statement? I’m guessing something like else if, but I haven’t got it working so far…

    <?php if ( bp_is_page( BP_GROUPS_SLUG ) || bp_is_group() ) : ?>

    <?php if ( bp_is_page( BP_MEMBERS_SLUG ) || bp_is_member() ) : ?>

    <?php if ( bp_is_page( BP_ACTIVITY_SLUG ) ) : ?>

    Avatar of jivany
    jivany
    Participant

    @jivany

    @Bpisimone If I’m understanding your question correctly, you should be able to make one big logical check:

    <?php if (bp_is_page( BP_GROUPS_SLUG ) || bp_is_page( BP_MEMBERS_SLUG ) || bp_is_page( BP_ACTIVITY_SLUG ) || bp_is_group() || bp_is_member() ) : ?> class="selected" <?php endif; ?>

    Avatar of bpisimone
    bpisimone
    Participant

    @bpisimone

    @Jivany thanks for the suggestion, though I’m still doing something wrong. Here’s what I have:

    <li<?php if ( bp_is_page( BP_ACTIVITY_SLUG ) || bp_is_page( BP_MEMBERS_SLUG ) || bp_is_page( BP_GROUPS_SLUG ) || bp_is_page( BP_FORUMS_SLUG || bp_is_group() || bp_is_member() ) : ?> class="selected"<?php endif; ?>>

    In the php error log it says there was an unexpected :

    Avatar of jivany
    jivany
    Participant

    @jivany

    Missing a ) after BP_FORUMS_SLUG

    Avatar of bpisimone
    bpisimone
    Participant

    @bpisimone

    Yes indeed! Works as advertised!

    Avatar of raynerlim36
    raynerlim36
    Participant

    @raynerlim36

    Sorry, Bowe, but I couldn’t get yours to work.

    I think I forgot to mention that I wanted to use the original CSS to create a drop down menu.

    Here is my CSS:

    /* > Navigation
    
    */

    ul#nav {
    margin: 0;
    padding: 6px 0;
    position: absolute;
    list-style: none;
    bottom: 0;
    display: block;
    width: 100%;
    background: #232323;
    border-bottom: 1px solid #637d1b;
    }
    body.activity-permalink ul#nav { display: none; }

    ul#nav li {
    float: left;
    margin: 0;
    }
    ul#nav li a {
    color: #aaa;
    text-decoration: none;
    padding: 8px 15px;
    background: #232323;

    }
    ul#nav li.selected a {
    background: #232323 url(../images/pointer.gif) bottom center no-repeat;
    color: #fff;
    }

    I really need help doing this. I’m a novice at CSS.

    Thanks!

    Avatar of raynerlim36
    raynerlim36
    Participant

    @raynerlim36

    Someone help me please! I’m rushing!

    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');
    });
    });

    Avatar of raynerlim36
    raynerlim36
    Participant

    @raynerlim36

    Thanks David Lewis!

    Avatar of mcrustk2
    mcrustk2
    Participant

    @mcrustk2

    I have exactly the same requirement. I don’t see how the ‘Page Links To’ plugin would work for this problem.

    @raynerlim36 So that worked for you?

    Avatar of raynerlim36
    raynerlim36
    Participant

    @raynerlim36

    @David Yes! Thanks very much! Although I’m having some CSS problems because I’m a newbie, it basically worked. Just need to read up more on CSS menus. Thanks again!

    @david Thank you so very much!!! I´ve been trying for a long, long time to create dropdown-menus for buddypress default theme, with no luck. Your solution works for me too.

    Avatar of mcrustk2
    mcrustk2
    Participant

    @mcrustk2

    Hi Guys.

    I have coped daves example above and tried it on my site however it doesnt seem to work correctly. Must be something I have done but I cannot see what it is. Been through line by line. Tearing my hair out here.

    http://site.chestermc.org

    I replaced ‘Community’ with ‘Home’

    I just cant see what it is. Could any of you just have a quick glimpse to give me some pointers. Thanks to David for the solution!

    Many Thanks.

    PS – Im using BP default theme.

    Avatar of raynerlim36
    raynerlim36
    Participant

    @raynerlim36

    Hi mcrustk2

    Did you put the CSS in a file called custom.css or inside the default.css file?

    I copied David’s code into default.css below the Navigation section, copied David’s PHP, and bingo! It worked!

    If you want it in a seperate CSS file, I think you have to import it in default.css

    @import url( ../css/custom.css );

    or link to it in header.php:

    <link href="../css/custom.css" rel="stylesheet" type="text/css">

    The url depends on where your custom.css file is stored.

    Rayner

    P.S. Your website is nice. Maybe you should try the Avenue K9 theme; it fits your site well. If you use it, just let me know, I’ve got the customised CSS for the subnav items for the theme.

    @mcrustk2

    Did you put those files in your own childtheme? Did you remember the underscore in foldername _inc? You need to create that folder, and inside it a folder named scripts, if you do not have them already.

    I think I noticed that changing the width of ul#nav li ul from preset 30,7% to a number below 12% would cause the buttons to spread out horisontally instead of vertical…

    Also, if you have subpages to pages you have created yourself, and those subpages do not show, you need to change depth in header.php

    Preset in default header.php is depth=1, which means that only parent pages are shown. You need to set it to at least 2 to include childpages, or 3 if your child page also have child pages.

    Look for something like this string:

    < ?php wp_list_pages( ‘title_li=&depth=2&exclude=’ . bp_dtheme_page_on_front() ); ? >

    Avatar of raynerlim36
    raynerlim36
    Participant

    @raynerlim36

    @Karin How do I use David Lewis’ CSS to create a three-tier menu?

    Avatar of raynerlim36
    raynerlim36
    Participant

    @raynerlim36

    @David

    Can you code some plain CSS to create a three-tier menu?

    As of now, it only displays two tiers, thus it would be good to have extra tiers.

    I really need it quick too, my deadline is tomorrow.

    Avatar of raynerlim36
    raynerlim36
    Participant

    @raynerlim36

    Maybe someone will be mislead by what I said, so I’ll put the items in a list:

    • Home
    • Creative Expressions

      • 2010

        • Secondary 1

    And that is what I call a three-tier menu. Correct me if I am wrong :).

    Avatar of mcrustk2
    mcrustk2
    Participant

    @mcrustk2

    @raynerlim36 – Thanks for the info (linking custom to default.css) this was what I was missing!

    @Karin – Hey! thanks for the tip, I needed this in the end.

    I have got the menu working although my CSS seems a bit screwed up :/

    http://site.chestermc.org

    Many Thanks All!

Viewing 25 replies - 1 through 25 (of 35 total)

You must be logged in to reply to this topic.