1

I'm using the Settings API on an admin page and it's marvelously simple and all that.

public function on_show_page(){

?>
    <div id="admin-bar-button-page" class="wrap admin-bar-button">

        <h2><?php _e('Admin Bar Button Settings', 'djg-admin-bar-button'); ?></h2>

        <form action="options.php" method="post">

            <?php settings_fields('admin_bar_button_group'); ?>
            <?php do_settings_sections('djg_admin_bar_button'); ?>
            <p>
                <?php submit_button('Save Changes', 'primary', 'submit', false); ?>
                <?php submit_button('Restore Defaults', 'delete', 'delete', false); ?>
            </p>

        </form>
    </div>
<?php
}

However, as far as I can tell there is no way to display my four different sections as tabs (using jQuery UI Tabs), rather than one under the other.

Does anybody know of an out of the box way to do this? Thanks.

3

So because I couldn't find an out of the box way, I created this. Don't forget to enqueue the jquery-ui-tabs script -

/** Replace the call to 'do_settings_sections()' with a call to this function */
function do_settings_sections_tabs($page){

    global $wp_settings_sections, $wp_settings_fields;

    if(!isset($wp_settings_sections[$page])) :
        return;
    endif;

    echo '<div id="abb-tabs">';
    echo '<ul>';

    foreach((array)$wp_settings_sections[$page] as $section) :

        if(!isset($section['title']))
            continue;

        printf('<li><a href="#%1$s">%2$s</a></li>',
            $section['id'],     /** %1$s - The ID of the tab */
            $section['title']   /** %2$s - The Title of the section */
        );

    endforeach;

    echo '</ul>';

    foreach((array)$wp_settings_sections[$page] as $section) :

        printf('<div id="%1$s">',
            $section['id']      /** %1$s - The ID of the tab */
        );

        if(!isset($section['title']))
            continue;

        if($section['callback'])
            call_user_func($section['callback'], $section);

        if(!isset($wp_settings_fields) || !isset($wp_settings_fields[$page]) || !isset($wp_settings_fields[$page][$section['id']]))
            continue;

        echo '<table class="form-table">';
        do_settings_fields($page, $section['id']);
        echo '</table>';

        echo '</div>';

    endforeach;

    echo '</div>';

}

Here is the CSS for it. You could download and enqueue a style from the jQuery UI website if you wish, but none suited me, so I made this -

.ui-tabs ul.ui-tabs-nav{
    border-bottom: 2px solid #E2E2E2;
    line-height: 31px;
}
.ui-tabs ul.ui-tabs-nav li{
    border-top: 1px solid transparent;
    border-right: 1px solid transparent;
    border-left: 1px solid transparent;
    border-bottom: none;
    display: inline;
    padding: 8px 20px;
}
.ui-tabs ul.ui-tabs-nav li.ui-state-active{
    background-color: #F1F1F1;
    border-top: 1px solid #E2E2E2;
    border-right: 1px solid #E2E2E2;
    border-left: 1px solid #E2E2E2;
    border-bottom: none;
}
.ui-tabs ul.ui-tabs-nav li a{
    color: #6BACD9;
    font-size: 1.3em;
    font-weight: bold;
    text-decoration: none;
}
.ui-tabs ul.ui-tabs-nav li a:hover{
    color: #4A89BF;
}
.ui-tabs ul.ui-tabs-nav li.ui-state-active a{
    color: #222222;
    cursor: default;
}

And one simple jQuery function -

$(function(){
    $('#abb-tabs').tabs();
});
3
  • Why did you use jQuery UI Tabs when Tabs are already present in the admin UI styles?
    – kaiser
    Oct 19 '14 at 22:00
  • First off, what a great little plugin - I'll defiantly find that handy in the future. Secondly, I was aware of WP tabs, but I don't know what JS needs to be included to make it function. Sadly the plugin you pointed me towards also doesn't seem to help with that, it only shows how to make the tabs themselves, not switch content. Thanks.
    – David Gard
    Oct 19 '14 at 22:15
  • 1
    If you don't know what to enqueue to make WP tabs function, you can always ask =) It would make for a nice question
    – Tom J Nowell
    Oct 20 '14 at 0:27
1

The MarkUp to produce tabs in the admin UI is the following:

<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 #3</a>
</h2>

Now, when you are requesting an admin page, you can use any query args:

http://example.com/wp-admin/tabshow?tab=1

If you register your admin menu page, you simply add a query arg of ?tab=1 directly to the nav menu link. In your UI callback, you then use admin_url() (escaped):

$link = esc_url( admin_url( 'tabshow' ) );

You could as well use $_SERVER['REQUEST_URI'] to simply refer to the same page. On top of that, you just add the query args for tab=1, tab=2, tab=n. You get the point.

Then just switch through the different contents

switch ( $_GET['tab'] )
{
    default :
    case '1' :
        // contents of page 1
        break;
    case '2' :
        // contents of page 2
        break;
    case 'n' :
        // contents of page 'n'
        break;
}
2
  • Thanks for this, I did actually manage to implement it, but then I realised I required a JS driven function so that changes to settings within the tabs were not lost when I switched Tab (i.e. the page is not reloaded). An AJAX solution to save settings is on my list, so once that is done this method would work well. Thanks.
    – David Gard
    Oct 19 '14 at 22:36
  • Well, you could even add a input type="submit" or a button to the tabs itself, but I get your point :)
    – kaiser
    Oct 19 '14 at 22:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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