DEV Community

Seb
Seb

Posted on • Originally published at nimblewebdeveloper.com on

How To Add Tabs To Wordpress Admin Page

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  
  );  
}  

Enter fullscreen mode Exit fullscreen mode

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  
}  

Enter fullscreen mode Exit fullscreen mode

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 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>  

Enter fullscreen mode Exit fullscreen mode

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;  

Enter fullscreen mode Exit fullscreen mode

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

Easy!

Top comments (0)