I would like to add a button to the WP admin toolbar, similar to the Notifications feature released in Jetpack 1.9.1 (I think it was). The notifications icon is displayed beside the account button, to the right.

I am only looking to display a form in the dropdown, for clients to contact me if they have questions - using AJAX for sending. This question only concerns the toolbar and getting the button and submenu dropdown in place.

UPDATE: Here is a screenshot (as requested): I just want to replace this with a form and no additional sublevel menus Jetpack notifications


1 Answer 1


The following is extracted from Jetpack and enables an identical menu item in the admin bar.

Note that:

  • the icon in the title is being pulled from Jetpack's stylesheet
  • the scripts are being printed directly instead of using wp_enqueue_style and wp_enqueue_script.
  • Jetpack uses add_menu instead of add_node (the preferred method according to the Codex)
  • Jetpack fills the content of the meta->html attribute with an iframe
add_action( 'init', 'wpse_72564_action_init' );

function wpse_72564_action_init() 
    if ( !has_filter( 'show_admin_bar', '__return_true' ) && !is_user_logged_in() )
    add_action( 'admin_bar_menu', 'wpse_72564_admin_bar_menu', 120 );
    add_action( 'wp_head', 'wpse_72564_styles_and_scripts' );
    add_action( 'admin_head', 'wpse_72564_styles_and_scripts' );

function wpse_72564_admin_bar_menu() 
    global $wp_admin_bar, $current_blog;

    if ( !is_object( $wp_admin_bar ) )

    $classes = 'wpse-loading wpse-read';
    $wp_admin_bar->add_menu( array(
        'id'     => 'wpse_menu',
        'title'  => '<span id="wpse-admin-bar-menu" class="' . esc_attr( $classes ) . '">
                <span class="noticon noticon-notification" /></span>
        'meta'   => array(
            'html'  => '<div id="wpse-notes-panel" style="display:none"><div class="wpse-notes-panel-header"><span class="wpse-notes-header">' . __('Notifications', 'jetpack') . '</span><span class="wpse-notes-panel-link"></span></div></div>',
            'class' => 'menupop',
        'parent' => 'top-secondary',
    ) );

function wpse_72564_styles_and_scripts()
    <script language="javascript" type="text/javascript">
        jQuery(document).ready(function($) {

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.