Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question
3  
What have you tried already? Show us your research efforts. –  toscho Jul 12 '12 at 23:57

3 Answers 3

up vote 12 down vote accepted
+25

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

share|improve this answer
1  
Hi Frank, I hope my edit translated your message with the best possible fidelity. Prost! ;) –  brasofilo Jul 18 '12 at 2:00
    
Thanks for your help, my english is gruesome. –  bueltge Jul 18 '12 at 7:07
    
Yah, yah, grauen Englisch, als mein Deutsch, jejeje, but of course, IMO, you're like the Goethë of coding!. . . . . If you check the Edit Summary, you'll see "Translated from Bueltgian to English." :))) –  brasofilo Jul 18 '12 at 13:48
    
Yes, I had read your comment to my Bueltgian; thanks for creating this word. But, your german example here is also cruesome. ;) BUT - THANKS for the praise via Goethe; nice comparison. An better coder in WP is @toscho, an admin here in WPSE and I learn much often from him. –  bueltge Jul 18 '12 at 15:53

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);
?>
share|improve this answer
2  
Michael, I think the OP is asking for Repeatable tabs of plugin options (repeatable fields but saved as plugin options). . . . . Although he says "I know is possible with the Settings API", he doesn't shows how (-1 mine), and it contrasts with Frank's answer, a deeply knowledgeable fellow. . . . Anyway, too much research to code and give an answer for my taste :) –  brasofilo Jul 18 '12 at 3:28
    
Michael, thanks for this! Even if it's not what OP wanted it's exactly what I was looking for. –  Cleanshooter Sep 8 at 20:35

I've updated Michaels solution so that it can be used as a tab within a single page. Bt 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);
            }
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.