Styling Custom Wordpress Menu and Buddypress Navigation Part II

Hi Tammie,

I saw that our previous thread for this has been closed, but I had a few questions/issues that have come up since yesterday.

1. I'm wondering how to customize the Buddypress Navigation (Activity, Members, Groups, etc.). How do you change the color of THOSE tabs? Or at least the display names (e.g. "members" to "people":wink: And... how would I add additional, custom fields to that Buddypress Navigation area.

2. Instead of customizing that menu, I thought about creating another custom Wordpress menu. I've been able to add an additional instance of the Wordpress custom menu bar, but it's exactly the same as the other one that I already have. How would I make it an additional menu that I can customize?

3. How can I move the search bar out of the breadcrumb navigation and into another part of the navigation area?

4. How can I add social media icons (like the ones attached) into the navigation area? I have the code and the style elements, but I'm not sure where to put them.

5. How can I remove the information bar, the featured tabs, and/or the breadcrumbs navigation bar?

I know that I'm full of questions, but I really appreciate your help.

Thanks!

  • Tammie

    @S Silver: Sorry thought that topic was done my apologies.

    1. Not easy, they have no unique class. You could try some core BuddyPress hacking but I'd strongly advise against this myself - up to you.

    2. You'd have to make a new instance here is the codex page for menus:

    http://codex.wordpress.org/Function_Reference/wp_nav_menu

    3. You'd have to edit code but create a new section for it or float in a navigation - that will require some adjustment of code. You are looking to move in header.php:

    <div id="search-bar">
    <?php locate_template( array( '/library/components/searchform.php' ), true ); ?>
    <?php if($bp_existed == 'true') : ?>
    <?php //do_action( 'bp_search_login_bar' ) ?>
    <?php endif ?>
    </div><!-- #search-bar -->

    4. Where you put them is really up to you the navigation has a lot of sections. Sorry for not being more specific but it could be where the search box is, where the navigation elements are... it's quite a few places.

    5. Again look in header.php:

    <?php if( $bp_existed == 'true' ) { //check if bp existed ?>
    <?php locate_template( array( '/library/components/buddypress/buddypress-navigation.php' ), true ); ?>
    <?php } else { // if not bp detected..let go normal ?>
    <?php locate_template( array( '/library/components/navigation.php' ), true ); ?>
    <?php } ?>
    <div id="breadcrumb-navigation">
    <div id="search-bar">
    <?php locate_template( array( '/library/components/searchform.php' ), true ); ?>
    <?php if($bp_existed == 'true') : ?>
    <?php //do_action( 'bp_search_login_bar' ) ?>
    <?php endif ?>
    </div><!-- #search-bar -->
    <?php locate_template( array( '/library/components/breadcrumbs.php' ), true ); ?>
    <div class="clear"></div>
    </div>
    <?php locate_template( array( '/library/components/information-bar.php' ), true ); ?>

    You can remove the entire link and then it will go (you may have to change styling of course). For instance remove breadcrumbs:


    <?php locate_template( array( '/library/components/breadcrumbs.php' ), true ); ?>

  • S Silver

    Awesome. Thank you so much. I've gotten quite a bit of this done per your guidance.

    I'm having a hard time with the search bar though. For some reason, I'm only able to get it to appear above or below the navigation area, but not embedded within the bar.

    Re question #4 about the social media icons: I'm thinking that I'd like to put this in the top navigation area. I just don't know where to put the code in order to get it there -- that's what I meant. Sorry, I should have been more specific.

    Thanks so much for all of your help!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.