Add on the fly tabs to plugin options

Question

Hi I am building a plugin options page. What I'd really like to do is implement repeatable tabs (which I know is possible with the Settings API), but with a twist I haven't seen in any options panel till now. I'd like to create new tabs on the fly, exactly like the 'Menus' section in the admin UI works.

Is there any standard way to do this?

Answer 1

WordPress Tabs are non-standard, static html markup. You can only add the markup within your functions.php theme file or inside your plugin.

<h2 class="nav-tab-wrapper">
    <a href="#" class="nav-tab">Tab #1</a>
    <a href="#" class="nav-tab nav-tab-active">Tab #2</a>
    <a href="#" class="nav-tab">Tab #2</a>
</h2>

---

In this helper plugin (WordPress Admin Style) you'll find the class references for the default markup of the admin area.
_{Full plugin snapshot. The previous snapshot is a detail located at the bottom of this one.
Click to enlarge:}

Answer 2

Create an array of tabs you would like to create on your admin page. This would most likely contain your menu pages added by your plugin. The array keys would be the page slug, and the array values would be the tab text.

Echo the function where you want the tabs to display within your plugin.

<?php
// Create WP Admin Tabs on-the-fly.
function admin_tabs($tabs, $current=NULL){
    if(is_null($current)){
        if(isset($_GET['page'])){
            $current = $_GET['page'];
        }
    }
    $content = '';
    $content .= '<h2 class="nav-tab-wrapper">';
    foreach($tabs as $location => $tabname){
        if($current == $location){
            $class = ' nav-tab-active';
        } else{
            $class = '';    
        }
        $content .= '<a class="nav-tab'.$class.'" href="?page='.$location.'">'.$tabname.'</a>';
    }
    $content .= '</h2>';
        return $content;
}

$my_plugin_tabs = array(
    'my-plugin-overview' => 'Overview',
    'my-plugin-settings' => 'Settings',
    'my-plugin-uninstall' => 'Uninstall'
);

echo admin_tabs($my_plugin_tabs);
?>