Tabbed Options Page

We were searching for code to create a tabbed admin page for our WordPress to facebook Plugin, and we found a very nice website with the code we needed, the website is recommended as one to visit.

It took a while to get a handle on the code as there was no downloadable example, so we have combined two of the One Design posts from the website to create a working example.

One Design

One design is a website we found in our search and we combined the post from One Design on how to create an admin options page with the post on tabbed options pages, we then downloaded the sample theme from the One Design website and split the options page code over three tabs, to give a working example.

tabbed 

The theme code in the sample we downloaded is very current, clean and up to date, we are not going to discuss the code here, we just used the themes code and split it into three sections, to understand the code visit Daniel’s website and read the posts, compare the downloaded file theme-options.php, while you are reading the code on the One Design website you might want to bookmark it, as we are sure there that it is a website you would want to visit again.

however for our part you can download the merged theme from here, Download Tabbed Theme: Tabbed Options Page (1611)

Many thanks to Daniel for the Tutorials!

Here is the plugin admin, we can see why we were looking for a tabbed admin panel for our plugin!

Notices

We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

12 thoughts on “Tabbed Options Page

  1. I’m using the original article and your post to try to implement this but I’m having issues with the first tab always being highlighted as the current tab. Did you have this issue? If not, I’m basically using your example and code as is, so do you have any ideas what is wrong? I’m sure it has to do with the $current being defined as the first page, but I’m unable to get it corrected with any changes I’ve tried.

    • Not sure from the question what the issue is, I just change the tab order to suit the pages, the current should add an active class, but I did not really test this?

      You could change the Order of the tabs here:

      $tabs = array( ‘general’ => ‘General’, ‘layout’ => ‘Layout’, ‘advanced’ => ‘Advanced’ );

      $tabs = array( ‘layout’ => ‘Layout’, ‘advanced’ => ‘Advanced’ ,’general’ => ‘General’);

      The reason I posted this was because the original download did not show the full work flow, of using the options once set, there are many bits of code out there are frustrating because they stop just short of being very useful.

      David

      • Sorry, I wasn’t very clear. I have it set up and the links to each tab works (changing the page when clicked), but no matter which page is displayed to edit, the first tab is always highlighted. What I wanted is for the tab of the current page to be highlighted. The code in your file and the original from Daniel’s site neither do this. Since you have it working in your plugin, I thought I would ask you.

        Thanks for the effort put into making a visual example, btw.

        • Got it!
          mytheme_admin_tabs(); is being called without any argument so we need to pass it $tab

          in the function ‘function sa_theme_home_page()’ move the function call

          if ( $pagenow == ‘themes.php’ && $_GET[‘page’] == ‘theme_options’ ) :
          if ( isset ( $_GET[‘tab’] ) ) :
          $tab = $_GET[‘tab’];
          else:
          $tab = ‘general';
          endif;

          mytheme_admin_tabs($tab);

          So we have:
          // Function to generate options page
          function sa_theme_home_page() {
          global $pagenow;

          if ( $pagenow == ‘themes.php’ && $_GET[‘page’] == ‘theme_options’ ) :
          if ( isset ( $_GET[‘tab’] ) ) :
          $tab = $_GET[‘tab’];
          else:
          $tab = ‘general';
          endif;

          mytheme_admin_tabs($tab);

          switch ( $tab ) :
          case ‘general’ :
          theme_general_options();
          break;
          case ‘layout’ :
          theme_layout_options();
          break;
          case ‘advanced’ :
          theme_advanced_options();
          break;
          endswitch;
          endif;
          }

          Cheers

          David

        • Got it!
          mytheme_admin_tabs(); is being called without any argument so we need to pass it $tab

          in the function ‘function sa_theme_home_page()’ move the function call

          if ( $pagenow == ‘themes.php’ && $_GET[‘page’] == ‘theme_options’ ) :
          if ( isset ( $_GET[‘tab’] ) ) :
          $tab = $_GET[‘tab’];
          else:
          $tab = ‘general';
          endif;

          mytheme_admin_tabs($tab);

          So we have:
          // Function to generate options page
          function sa_theme_home_page() {
          global $pagenow;

          if ( $pagenow == ‘themes.php’ && $_GET[‘page’] == ‘theme_options’ ) :
          if ( isset ( $_GET[‘tab’] ) ) :
          $tab = $_GET[‘tab’];
          else:
          $tab = ‘general';
          endif;

          mytheme_admin_tabs($tab);

          switch ( $tab ) :
          case ‘general’ :
          theme_general_options();
          break;
          case ‘layout’ :
          theme_layout_options();
          break;
          case ‘advanced’ :
          theme_advanced_options();
          break;
          endswitch;
          endif;
          }

          Cheers

          David

    • Did you get an answer for adding a “reset” button along with the save button? – I tried this code submit_button( “Reset Defaults”, ‘secondary’, ‘reset’ ); but did not work for me.

      Other question I have is: what is the best way to link separate tabs with their own pages. Is it good idea to simply add include or require at the bottom of “function sa_theme_home_page() {” – or Is there a better method?. Thank you.
      ………..
      ……….
      break;
      case ‘advanced’ :
      theme_advanced_options();
      break;
      endswitch;
      endif;
      }

      // include tab files
      require( get_template_directory() . ‘/tabs/general-tab.php’ );
      require( get_template_directory() . ‘/tabs/layout-tab.php’ );
      require( get_template_directory() . ‘/tabs/advanced-tab.php’ );

  2. Thanks for the working example, it help me alot.

    Do you know how to add the options panel to show in menu instead of theme page?

    I’m tryin to use this add_menu_page in function “function sa_theme_options” but it only shows blank page inside “Theme Options”. By changing add_theme_page to add_menu_page did work ok in the without tabs version.

  3. Brillant of you to share – really helped me understand what was going on.
    Can you update your zip download with your solution to Serlorian active tab query?
    Thanks!

Leave a Reply

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Themes

heatmap-thumb

We have been having a play while waiting for WordPress 3.1 to be a full release, one of the things we have been looking at is Google AdSense and how to use this in a theme. There were a number … Continue reading

Read More

Posted in Tips

colorizer-1_thumb.png

We thought we would use the WordPress Twenty Eleven theme and the the Farbtastic color picker to colorize our theme from the website front page instead of the admin area. We have been looking at the $_SESSION variable, so we thought … Continue reading

Read More

Posted in Twenty Ten

asc3.png

It is strange that there is no option to reverse the display order of the posts on the category page, when we select a category the list is the same as a blog, in descending order newest to oldest. That … Continue reading

Read More