Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I want to remove the admin bar from the top of the page and actually place it into a custom location within my theme.

Question:

  1. How would I call wp_admin_bar() inside a custom div.

I would also need to remove the built in css, so that I can apply my own.

*I already have a filter to do this part.

Reasons:

My theme is being built to be ipad/iphone friendly. I want the admin bar to be 'fixed' to the top of the screen.

The problem is that mobile safari does not accept position:fixed, which requires a js workaround, which I have already solved.

My theme already has a fixed header which is ipad ready. If I can call the wp_admin_bar() and place that within this 'special' div, then the problem is solved.

*thanks to other people helping me on this forum, I have managed to place the built in wp_menu() into the admin bar, which is really cool. With that functionality added to the admin bar, I now have a really awesome nav bar by combining its built in functionality with custom menus.

share|improve this question
    
You can probably move the DOM nodes with Javascript on the client side. However, I'll try to find a solution that just outputs the HTML in another place. –  Jan Fabry Apr 23 '11 at 14:30
    
Thanks Jan. Yeah it would be really nice to just place wp_admin_bar() in the middle of the div where I want to place the bar and then apply my own styling instead of using the built in styling. –  shawn Apr 23 '11 at 19:44

2 Answers 2

up vote 1 down vote accepted

You can try to output the admin bar at a different location, but the included Javascript always moves the bar to the body element - probably to make it work when a theme has not closed all HTML elements at the end of the page.

So if you want to move it somewhere else, you must do this after the standard script moved it to the body. I did this by loading the script in the footer, after the admin bar:

function wpse15444_wp_print_scripts()
{
    if ( ! is_admin() ) {
        wp_enqueue_script( 'wpse-15444', plugins_url( 'wpse-15444.js', __FILE__ ), array( 'jquery' ), false, true );
    }
}

// wpse-15444.js
jQuery( window ).load( function() {
    jQuery( '#wpadminbar' ).appendTo( jQuery( '#wpse15444-admin-bar-container' ) );
} );

Because the bar normally has position: fixed you won't see it move, so make it position: absolute in your own stylesheet.

By adding the wpse1544-admin-bar-container in the #header of the Twenty Ten theme, I got the following result:

Admin bar in header instead of top of page

share|improve this answer
    
You are the man! LOL.. solution worked perfectly, but then you knew that already. –  shawn Apr 29 '11 at 4:07

The current admin bar uses position:fixed and is found in admin-bar.css. I removed that style because I prefer the admin bar on the bottom when debugging as it often covers up output.

It seems for the most part the #wpadminbar ID can be fully styled and over ridden using !important.

The alternative and better option is to deregister_style and register your own.

You need to find in the code where admin-bar.css is enqueued, then add a custom function that hooks into it and turn it off, for instance if the enqueue style function is called wp-pagenavi.

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );

function my_deregister_styles() {
    wp_deregister_style( 'wp-pagenavi' );
}

Then you can enqueue your own style using:

wp_enqueue_style( 'myStyleSheets');
  • after a quick look I'm not sure it is possible to de-register the admin-bar.css
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.