Add my own button next to “Screen options” and “Help” in the admin

The HTML

echo '<div id="screen-meta-links">';
echo ' <div id="contextual-help-link-wrap" class="hide-if-no-js screen-meta-toggle">';
echo '  <a href="#" id="your-own-button" class="show-settings">Text for your button</a>';
echo ' </div>';
echo '</div>';
echo '<br style="clera:both" />';

echo '<div id="your-button-content" class="your-button-hide">';
// your content goes here
echo '</div>';

And you need some custom JavaScript

jQuery(document).ready( function($){

$( '.your-button-hide' ).each(
  function(e){
    $( this ).hide();
  }
);

$( '#your-own-button' ).click(
  function( e ){
    e.preventDefault();

    $( '#your-button-content' ).toggle();

    var hasclass = $( '#your-own-button' ).hasClass( 'screen-meta-active' );
    if( hasclass ){
      $( '#your-own-button' ).removeClass( 'screen-meta-active' );
    } else {
      $( '#your-own-button' ).addClass( 'screen-meta-active' );
    }
  }
);

});

The HTML part adds the button, the JavaScript adds the functionality.

The complete code could look like this:

add_action( 'admin_menu', 'register_backendpage', 10, 0 );

function register_backendpage() {
  $pagehook = add_management_page(
    'Your backend page',
    'Your backend page',
    'manage_options',
    'a-menu-slug-of-your-choice',
    'backendpage_callback',
    false,
    'bottom'
  );

  add_action( 'load-' . $pagehook, 'enqueue_button_script', 10, 0 );
}

function backendpage_callback() {

    // output your button here, see code above

    echo '<div class="wrap">';
    /*
     * the rest of your page content
     */
}

function enqueue_button_script() {
    // the js above
    wp_enqueue_script( 'your-button-script', ... );
}

Leave a Comment