Is there an easy way to move the wp_admin_bar to my own location?

Question

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.

Answer 1

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:

Answer 2

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