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

by

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

Leave a Comment