How To Add Tabs To Wordpress Admin Page

Seb Toombs

Oct 21 2019 ()

2 min read

How To Add Tabs To Your Wordpress Plugin Admin Page

Ever wanted to add tabs to your Wordpress plugin's admin page without rolling your own? Well you can very easily it turns out.

Tabs are baked into the Wordpress core, so you don't need to do anything particularly difficult to add them.

You might have seen various plugins such as Woocommerce using the tabs to add many settings areas to one plugin page.

Adding tabs to Wordpress plugin admin

1. Add your admin page

If you haven't already got an admin page, add one with the following code;

If you already have, skip to step 2.

<?php

//Add admin page to the menu
add_action( 'admin_menu', 'add_admin_page');
function add_admin_page() {
  // add top level menu page
  add_menu_page(
    'My Plugin Settings', //Page Title
    'My Plugin', //Menu Title
    'manage_options', //Capability
    'my-plugin', //Page slug
    'admin_page_html' //Callback to print html
  );
}

This code hooks in to the admin_menu Wordpress hook and registers a new admin menu item. We're adding a top level item, but it's also possible to add a submenu item.

You can change these settings to suit your needs. I'd usually recommend leaving the capability ('manage_options') as is. The 'admin_page_html' is the name of the function to call to generate the html for your admin page.

Note: if you're using this inside a class, change the callback to be array($this, 'admin_page_html').

2. Generate admin page HTML - with tabs!

Ok, now you can add the tabs to your markup;

<?php 

//Admin page html callback
//Print out html for admin page
function admin_page_html() {
  // check user capabilities
  if ( ! current_user_can( 'manage_options' ) ) {
    return;
  }

  //Get the active tab from the $_GET param
  $default_tab = null;
  $tab = isset($_GET['tab']) ? $_GET['tab'] : $default_tab;

  ?>
  <!-- Our admin page content should all be inside .wrap -->
  <div class="wrap">
    <!-- Print the page title -->
    <h1><?php echo esc_html( get_admin_page_title() ); ?></h1>
    <!-- Here are our tabs -->
    <nav class="nav-tab-wrapper">
      <a href="?page=my-plugin" class="nav-tab <?php if($tab===null):?>nav-tab-active<?php endif; ?>">Default Tab</a>
      <a href="?page=my-plugin&tab=settings" class="nav-tab <?php if($tab==='settings'):?>nav-tab-active<?php endif; ?>">Settings</a>
      <a href="?page=my-plugin&tab=tools" class="nav-tab <?php if($tab==='tools'):?>nav-tab-active<?php endif; ?>">Tools</a>
    </nav>

    <div class="tab-content">
    <?php switch($tab) :
      case 'settings':
        echo 'Settings'; //Put your HTML here
        break;
      case 'tools':
        echo 'Tools';
        break;
      default:
        echo 'Default tab';
        break;
    endswitch; ?>
    </div>
  </div>
  <?php
}

The important part of the markup is the nav-tab-wrapper and it's contents. This is all you need to add tabs to your admin panel, and the styling is provided by Wordpress!

How it works

First, we add the required markup for the tabs. This is a <nav> element with the classname "nav-tab-wrapper", and child elements with the "nav-tab" class.

<nav class="nav-tab-wrapper">
  <a href="?page=my-plugin" class="nav-tab nav-tab-active">Default Tab</a>
  <a href="?page=my-plugin&tab=settings" class="nav-tab">Settings</a>
</nav>

The child elements (anchor links) have a query string variable tab which allows us to know which tab is active.

We use this variable like so;

<?php

//Get the active tab from the $_GET param
$default_tab = null;
$tab = isset($_GET['tab']) ? $_GET['tab'] : $default_tab;

We can then query the $tab variable to add the nav-tab-active class, and render the html for the correct tab content.

Easy!