Skip to content

Instantly share code, notes, and snippets.

@eteubert
Created November 5, 2011 10:01
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save eteubert/1341347 to your computer and use it in GitHub Desktop.
Save eteubert/1341347 to your computer and use it in GitHub Desktop.
WordPress: Tab Layout for Settings Pages
<?php
// initialize plugin
if ( function_exists( 'add_action' ) && function_exists( 'register_activation_hook' ) ) {
add_action( 'plugins_loaded', array( 'tabbed_plugin', 'get_object' ) );
}
class tabbed_plugin
{
// singleton class variable
static private $classobj = NULL;
// singleton method
public static function get_object() {
if ( NULL === self::$classobj ) {
self::$classobj = new self;
}
return self::$classobj;
}
private function __construct()
{
}
}
<?php
public function settings_page() {
switch ( $_REQUEST[ 'tab' ] ) {
case 'tab2':
$tab = 'tab2';
break;
case 'tab3':
$tab = 'tab3';
break;
default:
$tab = 'tab1';
break;
}
?>
<!-- ... -->
<div class="metabox-holder has-right-sidebar">
<?php
$this->settings_page_sidebar();
switch ( $tab ) {
case 'tab1':
$this->settings_page_tab1();
break;
case 'tab2':
$this->settings_page_tab2();
break;
case 'tab3':
$this->settings_page_tab3();
break;
}
?>
</div> <!-- .metabox-holder -->
<!-- ... -->
<?php
}
<?php
/*
Plugin Name: Tabbed Plugin
Plugin URI:
Description:
Version: 1.0
Author: Eric Teubert
Author URI: ericteubert@googlemail.com
License: MIT
*/
// initialize plugin
if ( function_exists( 'add_action' ) && function_exists( 'register_activation_hook' ) ) {
add_action( 'plugins_loaded', array( 'tabbed_plugin', 'get_object' ) );
}
class tabbed_plugin
{
// singleton class variable
static private $classobj = NULL;
// internationalization textdomain
public static $textdomain = 'tabbed_plugin';
private $settings_page_handle = 'tabbed_plugin_options_handle';
// singleton method
public static function get_object() {
if ( NULL === self::$classobj ) {
self::$classobj = new self;
}
return self::$classobj;
}
private function __construct()
{
add_action( 'admin_menu', array( $this, 'add_menu_entry' ) );
}
public function add_menu_entry() {
add_submenu_page( 'options-general.php', 'Tabbed Plugin', 'Tabbed Plugin', 'manage_options', $this->settings_page_handle, array( $this, 'settings_page' ) );
}
public function settings_page() {
$tab = ( $_REQUEST[ 'tab' ] == 'tab2' ) ? 'tab2' : 'tab1';
?>
<div class="wrap">
<div id="icon-options-general" class="icon32"></div>
<h2 class="nav-tab-wrapper">
<a href="<?php echo admin_url( 'options-general.php?page=' . $this->settings_page_handle ) ?>" class="nav-tab <?php echo ( $tab == 'tab1' ) ? 'nav-tab-active' : '' ?>">
<?php echo __( 'Tab1', self::$textdomain ) ?>
</a>
<a href="<?php echo admin_url( 'options-general.php?page=' . $this->settings_page_handle . '&tab=tab2' ) ?>" class="nav-tab <?php echo ( $tab == 'tab2' ) ? 'nav-tab-active' : '' ?>">
<?php echo __( 'Tab2', self::$textdomain ) ?>
</a>
</h2>
<div class="metabox-holder has-right-sidebar">
<?php
$this->settings_page_sidebar();
if ( $tab == 'tab1' ) {
$this->settings_page_tab1();
} else {
$this->settings_page_tab2();
}
?>
</div> <!-- .metabox-holder -->
</div> <!-- .wrap -->
<?php
}
private function settings_page_sidebar() {
# see http://www.satoripress.com/2011/10/wordpress/plugin-development/clean-2-column-page-layout-for-plugins-70/
?>
<div class="inner-sidebar">
<div class="postbox">
<h3><span>Sidebar Box</span></h3>
<div class="inside">
<p>Hi, I'm a persistent sidebar.<br/>Visible on all Tabs!</p>
</div>
</div>
</div> <!-- .inner-sidebar -->
<?php
}
private function settings_page_tab1() {
?>
<div id="post-body">
<div id="post-body-content">
<div class="postbox">
<h3><span>Metabox in Tab1</span></h3>
<div class="inside">
<p>Hi, I'm content visible in the first Tab!</p>
</div> <!-- .inside -->
</div>
</div> <!-- #post-body-content -->
</div> <!-- #post-body -->
<?php
}
private function settings_page_tab2() {
?>
<div id="post-body">
<div id="post-body-content">
<div class="postbox">
<h3><span>Metabox in Tab 2</span></h3>
<div class="inside">
<p>Hi, I'm content visible in the second Tab!</p>
</div> <!-- .inside -->
</div>
</div> <!-- #post-body-content -->
</div> <!-- #post-body -->
<?php
}
}
@emadelawady
Copy link

nice one keep up

@DevWael
Copy link

DevWael commented Feb 17, 2021

defining text domain as a variable self::$textdomain will make the gettext programs like PO Edit or loco translate unable to translate this keyword because these programs don't parse PHP, but they parse the code as a text

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment