Adding A Help Tab To WordPress

If you are new to WordPress then you might be used to visiting the help tab in the top right corner of the page. This is a tab that can be customised on any page in the admin area and should give your users enough information to use the page correctly.

Here is a picture of the help tab on the post page, it will explain exactly what the default fields are on the post screen. It explains what the title textbox will do and how to use the post editor.

If you are a WordPress developer, you might create a setting panel for your WordPress plugin or your theme. If you have a number of different options for your page it might be confusing for the user on how they are suppose to use it. You can give them some help on how to exactly use the settings page by giving them more information in the help tab.

To add a new help tab to a page you first need to assign an action on the load event of a page.

In WordPress you have access to a number of different Global variables, one of these variables is called {pagenow} and will display the current page you are on. This is the value that is used inside the action on the load event of the page.

add_action( "load-{$GLOBALS['pagenow']}", array( $this, 'add_help_tab' ), 20 );

Using the above code will add the help tab to every page of the WordPress admin area. But you don't want to add the help tab to every page of the admin area as the help directions won't make sense, so you need to find out what page you want the help tab to appear and get the $GLOBALS['pagenow'] value for this page to use in the add_action() function.

If you want to use the help tab for different pages use the following code.

// Add dashboard help tab
add_action( "load-index.php", 'add_dashboard_help_tab' , 20 );
// Add post help tab
add_action( "load-post.php", 'add_post_help_tab' , 20 );
// Add new post help tab
add_action( "load-post-new.php", 'add_post_new_help_tab' , 20 );
// Add category help tab
add_action( "load-edit-tags.php", 'add_category_help_tab' , 20 );
// Add pages help tab
add_action( "load-edit.php", 'add_pages_help_tab' , 20 );
// Add media help tab
add_action( "load-upload.php", 'add_media_help_tab' , 20 );
// Add comment help tab
add_action( "load-edit-comments.php", 'add_comment_help_tab' , 20 );
// Add theme help tab
add_action( "load-themes.php", 'add_themes_help_tab' , 20 );
// Add plugin help tab
add_action( "load-plugins.php", 'add_plugins_help_tab' , 20 );
// Add settings help tab
add_action( "load-options-general.php", 'add_settings_help_tab' , 20 );

The first parameter is the load page event we are assigning the help tab to, and the second parameter is the callback function we are using to display the extra tab. When you define the callback function you need to get the current screen object in WordPress by using the function get_current_screen(). On this object is a method add_help_tab() which is what we are going to use to setup our new help tab.

Add the following code to add a new help tab to the settings page.

function add_settings_help_tab()
{
	get_current_screen()->add_help_tab( array(
			 'id'       => 'settings_help'
			,'title'    => __( 'Extra Tab', 'text_domain' )
			,'content'  => '
__('Some stuff that stays above every help text', text_domain)
'
		) );
}

You can use this on any of the default pages in WordPress, but the problem comes when you create your own settings screen for your plugin or theme settings.

Add Help Tab To Plugin Page

When you add a new settings page for your plugin you will most likely use the the function add_options_page() which will add a new page under the settings menu. This function comes with a return value of the page created which we can use to add the action on the load event.

$test_help_page = add_options_page(__('Test Help Tab Page', 'text_domain'), __('Test Help Tab Page', 'text_domain'), 'manage_options', 'text_domain', 'test_help_admin_page');
add_action('load-'.$my_admin_page, 'admin_add_help_tab');

On the load event of our plugin page it will run the function admin_add_help_tab(), this is the function we can use to add the help tab to the page.

function admin_add_help_tab() {
    get_current_screen()->add_help_tab( array(
        'id'	=> 'test_help_tab',
        'title'	=> __('Test Help Tab'),
        'content'	=> '
' . __( 'Use this field to describe to the user what text you want on the help tab.' ) . '
',
    ) );
}

Complete Code To Add Help Tab

Here is the complete code to be able to add a help tab to your plugin page.

add_action('admin_menu', 'test_admin_help_tab');
function test_admin_help_tab() {
    $test_help_page = add_options_page(__('Test Help Tab Page', 'text_domain'), __('Test Help Tab Page', 'text_domain'), 'manage_options', 'text_domain', 'test_help_admin_page');
	add_action('load-'.$test_help_page, 'admin_add_help_tab');
}
function admin_add_help_tab () {
    global $test_help_page;
    $screen = get_current_screen();
    // Add my_help_tab if current screen is My Admin Page
    $screen->add_help_tab( array(
        'id'	=> 'test_help_tab',
        'title'	=> __('Test Help Tab'),
        'content'	=> '
' . __( 'Use this field to describe to the user what text you want on the help tab.' ) . '
',
    ) );
}
function test_help_admin_page(){}