The ‘Help’ tabs can be found all over in the WordPress dashboard. They can be helpful in providing information to customers on how to use a feature in your plugin. I recently started adding information to the ‘Help’ section for my own plugins and customers have found it very useful to find the additional information / links at hand, but out of direct sight.

Example of how WooCommerce makes full use of the help tabs
Example of how WooCommerce makes full use of the Help tabs

Creating the ‘Help’ drop section with the tabs is quite easy once you know how to do it. In this blog post I’ll be showing some examples and samples of how this is added to your own plugin/code.

Adding Help Tabs

The code snippet below shows how a help tab can be added in its most simple form. This will add the help tab to any page where the section is available (in Gutenberg/customizer help tabs are not available).

This snippet is very good to see the most basic code that adds the help tab, but generally speaking I’d say that there’s very little uses for adding tabs on all pages.

A first sample help tab - the most simple code, showing on all pages

Adding Help Tabs on Your Settings Page(s) Only

The ‘admin_head’ hook is the best to add the tabs within, this is just after the $pagenow global variable is declared, which can be used to identify which page is currently being viewed. When adding your own options page to WordPress the code would look something like this;

function hello_world_add_admin_menu(){
	add_options_page( 'Hello World', 'Hello World', 'manage_options', 'hello_world', 'hello_world_options_page' );
}

In here 'hello_world' is the slug of the options page, this is what is used to add the help tab to only this options page. WordPress has a dynamic hook admin_head-{$pagenow} which can be used to add the function that adds the help tabs. Here’s an example that’ll add the help tab only on my options page.

This also includes a output buffer that makes it a bit easier (in my opinion) to create the desired content.

Showing a more extensive help tab

Adding Multiple Help Tabs

Multiple tabs can be added within the same function. This is mostly duplicating the existing code within the function. The 'id' does need to be unique for each tab. The 'priority‘ parameter determines the order of the tabs.

This will result in two separate tabs within the ‘Help’ section.

Two tabs added within the 'Help' section.

If paying close attention you’ll also notice the content of the second tab is setup differently from the first. This uses a callback function to set the tab content. These are two different ways of setting the content, both these work just fine and there’s no real downside to using either one over the other. If there’s a lot of content the second option can help split the code up making it more clear.

Adding a Fixed Sidebar

WordPress also offers the ability to set a fixed sidebar on the right side of the help tabs. This will be the same while being able to navigate through the different tabs with each their own content. This is ideal for adding links to support/documentation or short information that is relevant to all the content of the different tabs.

Fixed content sidebar on the right side of the help tabs.

Content to Add in Help Tabs

Although the tab can expand to any size, in reality the type of content to add there should be clear and concise. The type of content I consider best fitting are a ‘Quick start’ guide, short elaborations of what a page / setting(s) are used for or what shortcodes / attributes are available to use. Links to additional documentation and where to find further assistance/support are also perfectly fitting.

Related codex:
WP_Screen:add_help_tab()

Jeroen Sormani

I'm a professional WordPress plugin developer on a mission to create the best plugins for my clients. I'm specialised in developing general WordPress, WooCommerce and Easy Digital Downloads plugins.

Interested in talking about a WordPress project? Get in touch!

Follow me on Twitter

Leave a Reply