New to the community? Start here

WP Admin Bar Customisation

Hi folks,

I wish to combine the WP admin bar, Buddy bar and my site’s navigation into the WP-admin bar at the top of the page. I have managed to do some of this myself as you will see below but I really could use some help from you wonderful boffins on how to further edit the bar…

Here is a picture demonstrating the current look and how I would like it to end up.

http://i40.tinypic.com/1415qiu.png (OR see attached file)

1) I’m running this on a multi site install. How do I get the WP-admin bar to appear the same on every site?

2) How to I make the bar deeper?

3) How to I change the colour of the bar?

4) How do I line up the links with the content of the page rather than using far left and far right?

5) Once the links are lined up how would I have a static picture logo to the left of this?

6) How do I make the “My Sites” button visible only to admins?

Thank you in advance for any help you can offer! I’m just starting to learn the more indepth coding side of things.

Dave

Fri, 17 Feb 2012 10:33:13
  • Kimberly
    • Champion of Loops

    Dave,

    Hey there! Welcome to the forums and thanks for being a member of WPMU!

    Trying to get everything set up “just so” is a daunting task when building your network, but WPMU has some great tools to help!

    What you’re asking would require a fair bit of coding and CSS customization. Instead of going that route (cause I’m a “the simpler the better kind of gal”:wink: I would suggest the following:

    WPMU Custom Admin Bar Plugin https://wpmudev.com/project/custom-admin-bar

    and WPMU Custom Admin Text Plugin https://wpmudev.com/project/site-wide-text-change

    These should give you the tools to change everything you need!

    If you need anything else don’t hesitate to ask. I’ll go ahead and mark this as resolved, if you find you need more assistance then just come back here and check the box below the thread to re-open!

    Best,

    Kimberly

  • davejmason
    • Site Builder, Child of Zeus

    Hi Kimberly,

    Thanks, I’m pretty excited to be a premium member now, I’ve been drooling at the plugins here for months! Can’t wait to dig in and get creating my network. I’ve already downloaded a theme to replace the current one for my small business.

    Anyway, back to the matter at hand.

    I’ve tried the custom admin bar plugin and it’s not really suitable for specifically what I’m after as I can add links and menus using hard code eliminating the need for a plugin. However if anybody else wanted to use the plugin it would be nice to add multiple dropdowns, not just one. A little suggestion, albeit not so much for my gain :slight_smile:

    The Custom Text plugin seems pretty nifty also but I’m afraid again it’s not really going to help me with my problem.

    My theme has a lot of white space designed to draw the eye to the content and it is also centered meaning that having the links in the admin bar to the far left and far right of the screen looks a little odd and means the use has to look for them. What I’m looking to do is to actually make a feature of the admin bar.

    Google searching and the WordPress Codex haven’t given me much coding regarding these specific problems so really I’m just wondering if a super-boffin such as yourselves could point me in the right direction :slight_smile:

    Thanks,

    Dave

  • aecnu
    • WP Unicorn

    Greetings Dave,

    Just checking if this issue was eventually resolved in another thread? Or by yourself separately to us? Or by us over email with you? Or using our live support?

    If so, no need to reply, that’s great news.

    If not, or you have any more questions related to this thread, please feel free to post them below including any new symptoms or errors and tick the ‘Mark as Not Resolved (re-open)’ box below the post area (or else we’ll miss it!)

    Otherwise, happy days, glad you got it sorted :slight_smile:

    Thank you for being a WPMU Dev member!

    Cheers, Joe :slight_smile:

  • Patrick Cohen
    • Technical Docs Wrangler

    Hi Dave,

    I wrote a plugin last year to do pretty much what you want, but haven’t updated it in a long time. You could download it from the WP plugin repo and take a look at the inner workings.

    Several modifications would be required to get the network-wide functionality you’re after, but it could give you some direction;

    http://wordpress.org/extend/plugins/add-all-nav-links-to-bp-adminbar/

    Hope this helps! :slight_smile:

  • Saunt Valerian
    • The Bug Hunter

    I actually have a full, working solution for you, but I’m at my day job right now and can’t get to the code you can use for this.

    However, the nature of the solution involves manually creating a new mu-plugin, which in turn calls a style sheet that is also saved in the mu-plugins folder.

    I use the BuddyBar (but am working on an eventual transition to the WP Bar) and have got this to work. I haven’t don’t anything fancy, but I have the infrastructure in place to give my CSS control of the BuddyBar on every site on the network without having to hack the core files. Everything you want to do (except the dynamic appearance of the My Sites) menu can be handled by CSS, which makes it easy. You just need a way to load your stylesheet across the network. Once I get access to my server tomorrow, I’ll pull out the code for you.

    If you feel savvy, only one or two lines of code can handle the dynamic display of the My Sites menu. You won’t be able to use both bars, you have to pick one. I’ve chosen the buddybar for now, and my code is specific for the buddybar. I don’t know what triggers the WP Bar, but if it is triggered by the footer the way the Buddybar is, then the code I’ll be able to give you will work for the WP bar with only a minor modification.

    Anyhow, I’ve favorited this thread and will get back to you over the weekend.

  • davejmason
    • Site Builder, Child of Zeus

    Brilliant! Thanks pcwriter, I’ll have a nose around in those files tomorrow and see what I can find. Much appreciated.

    [EDIT] I’ve just seen your reply also Saunt Valerian, thank you very much, that would be such a massive help! I’ll look forward to your reply.

    Dave

  • Saunt Valerian
    • The Bug Hunter

    Okay, the buddybar is called when wp_footer is called (I think the WP bar is called the same way, so it look like this will work for that too).

    Step one you need to create a new mu-plugin in your mu-plugins folder. Call it whatever you want, but I call mine admin-bar-mods.php.

    Then, put this code into the plugin (see below for an explanation of what it does):

    <?php
    
/*
    
Plugin Name: admin bar mods
    
Description: Modify the Buddybar. Styles need global-main-bar.css
    
Author: You
    
Version: 1.0
    
Author URI:
    
*/
    

    
//add the primary links in a drop down to the admin bar by creating a function and adding the links
    
function extra_main_menu() { global $bp;
    

    
?>
    
<div id="extra_main_menu">
    
<li> <a href="http://yoursite.com">Your Site</a>
    

    
<ul>
    
<li> <a href="http://yoursite.com/forum">Forum</a> </li>
    
<li> <a href="http://yoursite.com/store">Store</a> </li>
    
</ul>
    
</li>
    
</div>
    
<?php
    
}
    

    
add_action('bp_adminbar_menus', 'extra_main_menu', 999);
    

    
// Style the buddybar on the front of sites
    
function global_main_bar() {
    
if (!is_main_site() ) {
    
echo '<link rel="stylesheet" type="text/css" href="/wp-content/mu-plugins/global-main-bar.css">';
    
}
    
}
    

    
add_action('wp_footer', 'global_main_bar', 1);
    

    
// style the buddybar bar in the admin area
    
function wp_admin_main_bar() {
    
echo '<link rel="stylesheet" type="text/css" href="' .plugins_url('global-main-bar.css', __FILE__). '">';
    
}
    

    
// Call the function above
    
add_action('admin_head', 'wp_admin_main_bar', 1);
    

    
?>

    This code does three things:

    1. Adds a main menu drop down to the buddybar. This will appear to the extreme left of all existing items. Edit the links or remove that section as needed.

    2. Styles the buddybar on the front of all the subsites. It use different styles on my mainsite, but if you want to have it the same, just remove the line is_main_site line and the relevant brackets. (line 35 and line 38 above)

    3. Styles the buddybar in the admin area of the entire network (including the main site)

    Step Two This is easy. looking at the code above, you can see in two places it calls the file global-main-bar.css. This is a CSS file that you need to create and also place into your mu-plugins folder. The plugin calls the same file to ensure that the styles are the same on the front and backend (the bar itself is called by admin_head in the dashboard and wp_footer on the front of sites – so it require two functions to cover each).

    Once you’ve added the plugin and the css file, then everything is place for you to style your buddybar however you want. Just start adding css rules to the file and you’ll get what you want. One thing that I found out about styling the buddybar though, is that because of how it is all loaded, you have to use the !important tag alot in the styles. It just has to do with the loading order of the stylesheets, it’s not a problem, just know that if you add a rule to your created sheet, the core sheet may override it so you should try it with the !important tag.

  • davejmason
    • Site Builder, Child of Zeus

    Wow, that’s great! I guess I’ll get right to work reading up on CSS; it’s about time I learned about it properly rather than just editing pre-written files.

    Just a quick note, isn’t the Buddybar being disposed of and combined with the admin bar in a future update?

  • Saunt Valerian
    • The Bug Hunter

    I’m worried about that too, (buddybar disappearing). I like it and prefer what I can do with it in terms of control. It is simpler in function and purpose than the WPbar, and using a plugin/styling method like this really brings out the shine in the buddybar.

    The last I read was that they are not immediately removing, but keeping it as an option in BP 1.6. It’ll still be there, but by default, BP will display the WPbar.

    In order to turn off the wpbar you need this in your wp-config file

    define( 'BP_USE_WP_ADMIN_BAR', false );

    and the buddybar is controlled by

    define('BP_DISABLE_ADMIN_BAR', true);

    I actually have both of them in my config file so that I can turn them on or off easily as I see fit. They used to not work so well, but now they do exactly as they read (one is a positive statement and the other negative). Just change the true/false statements to get what you want. During the last update, I had to check them because it turned out that my Buddybar was being hidden behind the wpbar (yes, they can both be active at the same time!).

  • aecnu
    • WP Unicorn

    Greetings davejmason,

    It appears that is ticket was resolved with custom coding and awesome help from Saunt Valerian and therefore i am going to close it ….. but not before sending Saunt Valerian some rep points for this awesome effort.

    Cheers, Joe :slight_smile:

  • davejmason
    • Site Builder, Child of Zeus

    I’d just like to say thanks for the help Saunt Valerian. I haven’t yet managed to get around to this due to a number of other server errors that have cropped up. But as soon as I do I’ll keep you updated and let you know if I encounter any other problems. I’ll send you some rep points also, thanks again for the help!

    D