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', ... );
}