Add on the fly tabs to plugin options

2 Views

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?

Post Views: 2

Related posts

Leave a Reply

3 comments

  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>

    WP Tabs

    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:
    full plugin snapshot wordpress-admin-style

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

  3. I’ve updated Michael’s solution so that it can be used as a tab within a single page. By calling main_function(), you will output the tabs which will link and output the files outlined in the $my_plugin_tabs section.

    For instance, by clicking on Settings you will have the tab load settings.php and have the tabs showing. I thought it might help to have this uploaded as well:

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

function main_function() {
    $my_plugin_tabs = array(
        'bundles'  => 'Bundles',
        'settings' => 'Settings',
    );
    $my_plugin_page = 'bundles';
    echo admin_tabs( $my_plugin_page, $my_plugin_tabs );
}