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.
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 (1261)
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.
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
Worked perfectly!
Too long obsessing over the first part of the code made me miss the obvious.
Thank you!
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
Is there an easy way to add a “reset” button along with the save button?
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’ );
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.
I was able to identify the problem. Just need to change the $pagenow == ‘themes.php’ to $pagenow == ‘admin.php’
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!
Serlorian active tab query?