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