[resolved] Add a div to the admin bar (3 posts)

  1. Kevin
    Posted 1 year 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.

  2. bcworkz
    Posted 1 year 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.

  3. Kevin
    Posted 1 year 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.

Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.