WordPress – Fully Customize Admin Bar?

1 Views

Is there a straightforward way to fully customize the backend WP admin (top) bar? I want to replicate the frontend nav with logo/styling and a few links. I’ve googled this to no end and haven’t found any clear cut way to “create your own” admin bar (avoiding plugins).

My customers access all of their paid content on the backend of WP, so I’d like to mimic the branding/logo/style/links of the frontend. Thank you to any helpful answers/resources!

Post Views: 1

Related posts

1 comment

  1. You can use the admin_bar_menu action to customize the default admin bar by removing/modifying existing menus and adding new ones. You can also add sub-menus too.

    It would take a bit of work to completely overhaul it, but here is the basic syntax for creating and adding menus to it (place in functions.php or equivalent):

    add_action('admin_bar_menu', 'nebula_admin_bar_menus', 800);
function nebula_admin_bar_menus($wp_admin_bar){
    $wp_admin_bar->add_node(array(
        'id' => 'nebula-github',
        'title' => 'Nebula Github',
        'href' => 'https://github.com/chrisblakley/Nebula',
        'meta' => array('target' => '_blank')
    ));

    $wp_admin_bar->add_node(array(
        'parent' => 'nebula-github',
        'id' => 'nebula-github-issues',
        'title' => 'Issues',
        'href' => 'https://github.com/chrisblakley/Nebula/issues',
        'meta' => array('onclick' => 'exampleFunction(); return false;') //JavaScript function trigger just as an example.
    ));
}

    This method could be done in a loop to mimic your frontend nav. HTML can be included in this and styles can also be applied to the elements as needed. You can even run JavaScript functions on click events if you wanted to (example in snippet above).

    I hope this is in the ballpark of what you’re looking to do, or at least gets you headed in the right direction.

Comments are closed.