Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

share|improve this question

1 Answer 1

up vote 1 down vote accepted

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() )
        return;
    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 ) )
        return;

    $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>
                </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($) {
            $('#wpse-admin-bar-menu').click(function() 
            {
               $('#wpse-notes-panel').toggle();
            });
        });
    </script>   
    <?php
}
share|improve this answer
    
Thanks @brasofilo this covers exactly what I need. –  Calle Nov 15 '12 at 7:08

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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