Add a div to the admin bar

  • Resolved Kevin

    (@truheart)


    10 years, 5 months ago

    Hey guys, I searched the forums and could not find an exact answer that I was looking for. I have a customized admin theme that adds an addition image below the admin bar using jQuery. To visualize it, basically it is adding a shadow between the admin-bar and admin-menu so it looks like the menu is nestled underneath the header even when scrolling down. Now I do this using this code in my custom.js file:

    //Add shadow to admin bar
jQuery('<img src="../wp-content/plugins/retina-press/images/admin-shadow.png" alt="" class="admin-shadow"/></div>').appendTo('#wpadminbar');

    The thing is since this is jQuery, it doesn’t load as fast or smooth as I would like. I would really like to do this using a php function, but was wondering how exactly it would be done. I’m not really sure what hook to use for this or how to add this html. Hopefully someone can help, and sorry if this is pretty basic.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    10 years, 5 months ago

    Use the ‘wp_after_admin_bar_render’ action. FYI, there’s also a ‘wp_before_admin_bar_render’ action.

    I would think a similar effect could be achieved with the CSS background property for #wpadminbar, but fussing with CSS can be aggravating, simply hooking an action certainly has appeal.

    Thread Starter Kevin

    (@truheart)

    10 years, 5 months ago

    Hey BC, thanks. I think I was trying that before but didn’t know how to insert a div instead of a node. I took your advice and got it to work using a simple echo. I don’t know why I was making it harder than it had to be. If anyone stumbles on here and wants the code, here it is:

    /** Add Shadow to Admin Bar **/
function admin_shadow() {
   global $wp_admin_bar;
   echo '<img src="../wp-content/plugins/myCMS/images/admin-shadow.png" alt="" class="admin-shadow"/>' ;
}
add_action( 'wp_before_admin_bar_render', 'admin_shadow' );

    Thanks again BC.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Add a div to the admin bar’ is closed to new replies.