Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

How To Create Tabs On WordPress Settings Pages

Using tabs in a user interface can help you better organize content, so it’s only natural that WordPress themes that have a lot of options would benefit from tabs on their settings page. In this tutorial, you will learn how to create a tabbed settings page, and you’ll get to download a WordPress theme that implements the code.

tabbed-theme-settings-wordpress1

Overview Link

To get a quick grasp of the tabs we’ll be creating, go to Appearance/Themes in the WordPress admin area. You will find two tabs there: “Manage Themes” and “Install Themes.” When you click on one, the content changes and the tab’s title is highlighted.

The process is actually fairly simple: we set and send a tab variable when a tab is clicked. By querying this tab variable later, in $_GET['tab'], we will know which tab was selected so that we can highlight the corresponding title and display the corresponding tab.

In our approach, there are three times when we will need to know which tab the user is currently on:

  1. When we initially display the tabs and the form fields for the settings (in order to display the correct set of fields);
  2. When the user saves their settings (in order to save the correct fields);
  3. When redirecting the user after they have saved their settings (in order to redirect the user to the correct tab).

For the sake of brevity, we won’t explain all of the code, only the snippets that are relevant to this approach. You can, however, find all of the code in the accompanying theme.

Creating The Tabs Link

The first snippet we will inspect is the code that produces the tabs:

function ilc_admin_tabs( $current = 'homepage' ) {
    $tabs = array( 'homepage' => 'Home Settings', 'general' => 'General', 'footer' => 'Footer' );
    echo '<div id="icon-themes" class="icon32"><br></div>';
    echo '<h2 class="nav-tab-wrapper">';
    foreach( $tabs as $tab => $name ){
        $class = ( $tab == $current ) ? ' nav-tab-active' : '';
        echo "<a class='nav-tab$class' href='?page=theme-settings&tab=$tab'>$name</a>";

    }
    echo '</h2>';
}

This function will be called later in the content for the settings page. We first define an array that contains all of our tabs. The first tab, which is displayed first by default, is homepage, where we can set up some option for the appearance of the home page. Then we have general, which could be a page containing options used throughout the website, and, finally, footer, to include a tracking code in the footer.

2

We then set up the URL links for each tab and output them. Notice that if the tab is open, an additional class, nav-tab-active, is added.

Displaying The Tabbed Content Link

The content for the settings page is displayed in the callback function for add_theme_page (which is an abstraction of add_submenu_page3, with the parent slug set to themes.php), which in our theme will be named ilc_settings_page. This is where you will call the function that we just went over.

function ilc_settings_page() {
   global $pagenow;
   $settings = get_option( "ilc_theme_settings" );

//generic HTML and code goes here

if ( isset ( $_GET['tab'] ) ) ilc_admin_tabs($_GET['tab']); else ilc_admin_tabs('homepage');

If the tab is the default one, then $_GET['tab'] is not defined, in which case the current tab will be homepage and, thus, the highlighted one. Otherwise, the highlighted tab will be the one defined in $_GET['tab'].

Following the same function, we now need to display the right set of fields. Depending on the value of $tab, we would display the fields for the settings tab for the home page or for one of the other tabs:

<form method="post" action="<?php admin_url( 'themes.php?page=theme-settings' ); ?>">
<?php
wp_nonce_field( "ilc-settings-page" ); 

if ( $pagenow == 'themes.php' && $_GET['page'] == 'theme-settings' ){

   if ( isset ( $_GET['tab'] ) ) $tab = $_GET['tab'];
   else $tab = 'homepage';

   echo '<table class="form-table">';
   switch ( $tab ){
      case 'general' :
         ?>
         <tr>
            <th>Tags with CSS classes:</th>
            <td>
               <input id="ilc_tag_class" name="ilc_tag_class" type="checkbox" <?php if ( $settings["ilc_tag_class"] ) echo 'checked="checked"'; ?> value="true" />
               <label for="ilc_tag_class">Checking this will output each post tag with a specific CSS class based on its slug.</label>
            </td>
         </tr>
         <?php
      break;
      case 'footer' :
         ?>
         <tr>
            <th><label for="ilc_ga">Insert tracking code:</label></th>
            <td>
               Enter your Google Analytics tracking code:
               <textarea id="ilc_ga" name="ilc_ga" cols="60" rows="5"><?php echo esc_html( stripslashes( $settings["ilc_ga"] ) ); ?></textarea><br />

            </td>
         </tr>
         <?php
      break;
      case 'homepage' :
         ?>
         <tr>
            <th><label for="ilc_intro">Introduction</label></th>
            <td>
               Enter the introductory text for the home page:
               <textarea id="ilc_intro" name="ilc_intro" cols="60" rows="5" ><?php echo esc_html( stripslashes( $settings["ilc_intro"] ) ); ?></textarea>
            </td>
         </tr>
         <?php
      break;
   }
   echo '</table>';
}

?>
   <p class="submit" style="clear: both;">
      <input type="submit" name="Submit"  class="button-primary" value="Update Settings" />
      <input type="hidden" name="ilc-settings-submit" value="Y" />
   </p>
</form>

All of the settings will be stored in a single array in order to prevent several queries from being made.

Saving The Tabbed Fields Link

Now we need to know which slots of the array to save. Depending on the tab being displayed, certain options stored in the settings array will be displayed. If we just save all of the array slots, then we would overwrite some of the positions not shown in the current tab and thus not meant to be saved.

function ilc_save_theme_settings() {
   global $pagenow;
   $settings = get_option( "ilc_theme_settings" );

   if ( $pagenow == 'themes.php' && $_GET['page'] == 'theme-settings' ){
      if ( isset ( $_GET['tab'] ) )
           $tab = $_GET['tab'];
       else
           $tab = 'homepage';

       switch ( $tab ){
           case 'general' :
         $settings['ilc_tag_class'] = $_POST['ilc_tag_class'];
      break;
           case 'footer' :
         $settings['ilc_ga'] = $_POST['ilc_ga'];
      break;
      case 'homepage' :
         $settings['ilc_intro'] = $_POST['ilc_intro'];
      break;
       }
   }
   //code to filter html goes here
   $updated = update_option( "ilc_theme_settings", $settings );
}

We’ve used a switch conditional again to query the value of $tab and store the right values in the array. After that, we’ve updated the option in the WordPress database.

Redirecting The User To The Right Tab Link

Now that the contents are saved, we need WordPress to redirect the user back to the appropriate tab on the settings page.

function ilc_load_settings_page() {
  if ( $_POST["ilc-settings-submit"] == 'Y' ) {
   check_admin_referer( "ilc-settings-page" );
   ilc_save_theme_settings();

   $url_parameters = isset($_GET['tab'])? 'updated=true&tab='.$_GET['tab'] : 'updated=true';
   wp_redirect(admin_url('themes.php?page=theme-settings&'.$url_parameters));
   exit;
  }
}

Depending on whether the $_GET['tab'] variable is set, we use wp_redirect to send the user either to the default tab or to one of the other tabs.

Now our tabs are working, displaying the right set of fields, saving the right fields, and then redirecting the user to the correct tab.

Download The Theme Link

Almost any theme with a moderate number of options would benefit from tabs on the settings page. Just remember that this is one approach. Another approach would be to add several collapsable meta boxes, as seen on the page for writing posts, and to automatically collapse the boxes that are not frequently used. However, tabs enable you to better separate each set of options.

Finally, here is the theme, so that you can take a closer look:

The theme also implements the function whereby each tag is outputted with a unique CSS class5, so you can check that out, too.

(al)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2011/10/20/create-tabs-wordpress-settings-pages/
  2. 2 https://www.smashingmagazine.com/wp-content/uploads/2011/10/tabbed-theme-settings.png
  3. 3 http://codex.wordpress.org/Function_Reference/add_submenu_page
  4. 4 https://www.smashingmagazine.com/wp-content/uploads/2011/10/Sample-Theme_tabbed.zip
  5. 5 http://www.ilovecolors.com.ar/tag-class/
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

  1. 1

    very helpful! you rock Elio!

    1
  2. 2

    Greaaaaattttt article. Thanks a lot!

    I will use this soon..

    -3
  3. 3

    Useful tutorial. Thank you Elio!

    1
  4. 4

    For interest sake, a similar great post on the same subject : http://theme.fm/2011/10/how-to-create-tabs-with-the-settings-api-in-wordpress-2590/

    -2
  5. 5

    Thank you for sharing, very useful information for upcoming project.

    -1
  6. 6

    I am sure it was obvious that this question would be coming, but do you have any thoughts as to what would be the best way to add an image upload field using this method?

    2
  7. 7

    Thanks for the tutorial. I’ve been seeing a lot of themes and option frameworks take this tabbed approach lately… is it the one WordPress is pushing for?

    1
  8. 8

    hi ..
    thanks for details and focus on this section. i have one question . week ago i used jquery ui and tabs script that comes with wp. is this method faster than using inbuilt jquery UI and tabs getting custom tabs as u like? what is difference here ?

    0
    • 9

      Since these tabs are completely JavaScript agnostic they are very easy on client system resources and also fully compatible with browsers. These tabs use the same approach and styling than WordPress own tabs so by using these tabs you can get a settings page that blends nicely into the overall WP Admin look and feel, if that’s what you’re looking for.

      0
      • 10

        so if you need some customization or different design then my way is correct !
        thanks for the efforts and answer ;)

        7
  9. 11

    I’ve asked elsewhere, so might as well ask here also as this is a great tutorial.

    I’m working with the bbPress plugin which has a settings page, but no tabs. I want to have my own plugin add tabs to the bbPress settings page, so that I can store all my custom options in a central location instead of creating yet another settings page.

    How would I go about ‘extending’ an existing settings page to add tabs and my own options to it?
    -because original settings page does not use tabs, there seems to be no ‘home’ to place the original bbPress options under. Just one of the issues I am stuck with.

    Would make a unique tutorial, as so far I have yet to find anything that describes adding tabs to existing settings pages…

    -1
  10. 12

    Dhiren Suthar

    October 21, 2011 2:54 am

    Thanks for the information Friend :)

    Very useful post thanks for the sharing

    0
  11. 13
  12. 14

    Awesome tutorial! This is great for themes or plugins with a small set of options. I’m using Infinity (http://community.presscrew.com/) to create more advanced custom dashboards, where I don’t even need to write any code to add options or tabs. I love creating themes, but I pretty much suck at php, so Infinity helps me solve this.

    0
  13. 15

    Konstantin Kovshenin

    October 22, 2011 1:31 am

    Seriously, the Settings API is what you should be using and teaching and as Brad pointed out above: http://theme.fm/2011/10/how-to-create-tabs-with-the-settings-api-in-wordpress-2590/ comes with a demo plugin you can download and play around with too ;)

    ~ K

    0
  14. 16

    nice one, who did the graphic with the tabs?

    -1
  15. 17

    Its realy great tutorial.Thank you.

    -1
  16. 18

    Marcelo Vidal

    October 26, 2011 5:24 am

    Looks like the author did the graphic by himself http://dribbble.com/shots/296277-Tabs

    -1
  17. 19

    This is fantastic. Thank you!

    -1
  18. 20

    Thanks for the help on creating tabs, that’s really great now I can do it right. I appreciate the time you took of explaining it and actually showing us the code. There are many others who don’t really share this so thanks.

    -1
  19. 21

    Hi,

    first of all i am not really PHP expert.

    I am working on a blog website.

    On home page they are looking for recent post to show up.
    on archive page it should be all the collection.

    I was wondering is there any how i can make categories to get data from recent post (which is on the home page) also same content on the archive.

    Here is how i am thinking of getting post from archive and showing it on home page.

    Please give me any help will be appreciated.

    Thank you.

    -1
  20. 22

    thanks a lot man.. really helpfull :)

    -1

↑ Back to top