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


  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.


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.

  • 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
    Commented Apr 23, 2011 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
    Commented Apr 23, 2011 at 19:44

2 Answers 2


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

  • You are the man! LOL.. solution worked perfectly, but then you knew that already.
    – shawn
    Commented Apr 29, 2011 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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