Tutorial: Add Settings Page Tabs • Piklist

Piklist makes adding Tabs your settings pages super simple. There are essentially two steps:

Set the default tab.
Assign settings sections to the other tabs.

Here we go:

First build a settings page using our tutorial.

Now let’s go back to where we registered our Settings Page and add the tab functionality. We are going to to add the default_tab variable to the array, and name our default tab “Basic”. It’s been added to the last line in the array in this code snippet:

add_action('piklist_admin_pages', 'piklist_theme_setting_pages');
function piklist_theme_setting_pages($pages)
{
  $pages[] = array(
    'page_title' => 'Theme Settings' // Title of page
    ,'menu_title' => 'Theme Settings' // Title of menu link
    ,'sub_menu' => 'themes.php' // Show this page under the THEMES menu
    ,'capability' => 'manage_options' // Minimum capability to see this page
    ,'menu_slug' => 'piklist-theme-fields' // Menu slug
    ,'setting' => 'piklist-theme' // The settings name
    ,'icon' => 'options-general' // Menu/Page Icon
    ,'default_tab'=> 'Basic' // Set a default tab
  );
    return $pages;
}

The default_tab variable tells Piklist that you want Tabs. Since you’ve only assigned one tab, “Basic”, Piklist will not build the tabs… yet.

Now let’s create a Settings Section for our second tab, which we will call “Advanced”. In your /piklist/parts/settings/ folder create a file, we’ll call it advanced-settings.php and add this code:
```
<?php
/*
Title: Theme Settings Section
Setting: piklist-theme
Tab: Advanced
*/

piklist('field', array(
'type' => 'datepicker'
,'scope' => 'post_meta'
,'field' => 'field_name'
,'label' => 'Example Field'
,'description' => 'Click in box'
,'attributes' => array(
'class' => 'text'
)
,'options' => array(
'dateFormat' => 'M d, y'
)
,'value' => date('M d, y', time() + 604800)
,'position' => 'wrap'
));
?>
```
Bam! You now have two tabs, “Basic” and “Advanced”. The TAB variable in the comment block told Piklist you wanted a second tab. Now that you have defined two tabs: one when you registered the Settings Page (Basic), and one in a Settings Section file (Advanced), Piklist will create them for you.
Creating a third tab is as simple as adding another Settings Section file, and in the comment block at the top, add a TAB attribute, (ie Tab: Custom).

Building Tabbed Settings pages couldn’t be easier!