Make WordPress Core

Opened 5 years ago

Closed 3 years ago

Last modified 3 years ago

#47225 closed enhancement (fixed)

Add new actions to Site Health navigation

Reported by: ramiy's profile ramiy Owned by: clorith's profile Clorith
Milestone: 5.8 Priority: normal
Severity: normal Version: 5.2
Component: Site Health Keywords: site-health has-screenshots has-patch needs-dev-note needs-docs
Focuses: administration Cc:


The attached patch adds two new actions to allow developers to add new navigation tabs to the Site Health screens.

Attachments (6)

47225.png (18.9 KB) - added by ramiy 5 years ago.
47225.patch (2.0 KB) - added by ramiy 5 years ago.
47225.2.patch (11.7 KB) - added by Clorith 3 years ago.
4-menu-items.PNG (39.2 KB) - added by Clorith 3 years ago.
5-menu-items-collapsed.PNG (40.5 KB) - added by Clorith 3 years ago.
5-menu-items-expanded.PNG (42.7 KB) - added by Clorith 3 years ago.

Download all attachments as: .zip

Change History (21)

5 years ago

5 years ago

#1 @ramiy
5 years ago

  • Component changed from Script Loader to Administration
  • Keywords site-health has-screenshots has-patch added

#2 @desrosj
5 years ago

  • Milestone changed from Awaiting Review to 5.3

#3 @ramiy
5 years ago

@desrosj Any updates?

#4 @desrosj
5 years ago

  • Component changed from Administration to Site Health

Moving Site Health tickets into their lovely new home, the Site Health component.

#5 @Clorith
5 years ago

Quick update for anyone following this. We're investigating how to solve the problem of tabs when it comes to mobile and IE11 compatibility over on the plugin side of things (so that we can test and iterate in the plugin before any core implementation takes place). The relevant GitHub issue is available at

This ticket was mentioned in Slack in #core-php by ramiy. View the logs.

5 years ago

#7 @ramiy
5 years ago

There are several approaches to allow developers to add new navigation tabs.

  1. Using Actions - With actions developers can inject custom HTML linking to their settings screens.
  1. Using Filters - We can replace the hardcoded HTML with an array. Developers can filter the array to add new tabs linking to their settings screens.

With actions:

function custom_site_health_tab() {
    <a href="<?php echo esc_url( admin_url( 'some-screen' ) ); ?>" class="health-check-tab">
      <?php _e( 'Label' ); ?>
add_action( 'site_health_after_tabs', 'custom_site_health_tab' );

With filters:

function custom_site_health_navigation_tab( $tabs ) {
  $tabs[] = array(
    'id'    => 'some-unique-id',
    'label' => __( 'Label' ),
    'url'   => admin_url( 'some-screen' )
  return $tabs;
add_filter( 'site_health_navigation_tabs', 'custom_site_health_navigation_tab' );

#8 @Clorith
5 years ago

  • Milestone changed from 5.3 to Future Release

Although I'd love to do this, we've had our focus on the grading and test filters for 5.3, I'm moving this to Future release, with the intention of tackling this for version 5.4

#9 @ramiy
4 years ago

@Clorith @desrosj Can you change the ticket Milestone to 5.4 ?

3 years ago

3 years ago

#10 @Clorith
3 years ago

  • Milestone changed from Future Release to 5.8
  • Version set to 5.2

47225.2.patch expands on the suggested approach from @ramiy.

Since this needs to account for IE 11, which does not support dynamic grid columns. The patch allows for up to 4 items being displayed at once (which has shown itself to be a good number in the Health Check plugin).

This is done by introducing a new site_health_navigation_tabs filter, taking an assocaited array of tab slugs and labels, as in the example below.

$tabs = array(
        /* translators: Tab heading for Site Health Status page. */
        ''      => _x( 'Status', 'Site Health' ),
        /* translators: Tab heading for Site Health Info page. */
        'debug' => _x( 'Info', 'Site Health' ),

This would lead to the example shown in 4-menu-items.PNG.

If more than 4 menu items are present, then 3 items, and an ellipsis toggle is shown instead, as seen in 5-menu-items-collapsed.PNG, this maintains a predictable UI for the end user, without overloading the navigation (or requiring a lot of CSS, as each new tab we allow for needs custom CSS in place). Expanding everything leaves you with 5-menu-items-expanded.PNG.

The actual content of the custom tab is then output with the new action site_health_tab_content , where the current tab is passed as the argument. This means that developers would also be able to extend each others tabs. And thanks to some quick refactoring to make sure core uses the same features for its debug information tab, also extend the debug page to their benefit if they wish to. The exception here is the initial Status tab, which does not trigger the tab action, but is extensible in other ways.

Tab content that should be output would be whatever the developer wishes to output, there is no wrapper, so the full viewport width is available to them.

#11 @Clorith
3 years ago

  • Owner set to Clorith
  • Resolution set to fixed
  • Status changed from new to closed

In 50764:

Site Health: Support custom sub-menus and pages.

Allow developers to extend the Site Health screen with their own custom navigation tabs and pages.

This implements a new filter, site_health_navigation_tabs, which takes an associated array of tab identifiers/slugs, and tab labels, allowing developers to add their own subpage to the Site Health interface as new tabs.

To output a custom page, or add to an existing page, the site_health_tab_content action is triggered whenever the tab query argument is present and not empty. This action includes the current tab as its argument, which a developer would match against to only output content when relevant.

Props ramiy for initial patch.
Fixes #47225.

#12 @ramiy
3 years ago

Thank you @Clorith.

#13 @Clorith
3 years ago

In 50765:

Site Health: Correct array key for the default tab

Use reset to get the label from the first tab entry as the default if no tab is defined.
This ensures even if the tab order is changed, or tabs are removed, no warnings will be thrown.

Follow-up to [50764].

See #47225.

#14 @audrasjb
3 years ago

  • Keywords needs-dev-note added

#15 @milana_cap
3 years ago

  • Keywords needs-docs added
Note: See TracTickets for help on using tickets.