How to Add Tabs for WordPress Plugin Settings Page? - wordpress

Question

I have created a settings page for my wordpress plugin as described in codex (https://codex.wordpress.org/Creating_Options_Pages) #Example 2. My question is how to add tabbed options (tab interface) for WordPress Plugin Settings page for #Example 2 on WP codex?

Answer 1

I have created a Setting page for my plugin with 'Composer Autoload'
but for now, I am sharing just simple class to show how
my plugin has the setting page two tabs
'PDF Setting Tab'
'Email Setting Tab'
if ( ! class_exists( 'Plugin_Name_Settings_Page' ) ) {
class Plugin_Name_Settings_Page {
/* Admin Parent Menu item - properties */
private $page_title;
private $menu_title;
private $capability;
private $menu_slug;
private $function;
private $icon_url;
private $position;
public $page_menu;
public function __construct() {
$this->page_title = 'Plugin_Name Settings';
$this->menu_title = 'Plugin_Name Settings';
$this->capability = 'manage_options'; //'edit_pages';
$this->menu_slug = 'Plugin_Name-settings-page'; //'Plugin_Name-admin-dashboard';
$this->function = array( $this, 'page' );
$this->icon_url = 'dashicons-cart';
$this->position = 24;
// Create Admin Page & Menu
add_action( 'admin_menu', array( $this, 'CreatePageMenu' ), 10 );
add_action( 'Plugin_Name_settings_page_created', array( $this, 'Plugin_Name_pdf_settings_init' ), 10 );
}
public function CreatePageMenu() {
$this->page_menu = add_menu_page(
$this->page_title,
$this->menu_title,
$this->capability,
$this->menu_slug,
$this->function,
$this->icon_url,
$this->position,
);
do_action( 'Plugin_Name_settings_page_created' );
}
public function page() {
?>
<div class="wrap">
<!-- Create a header in the default WordPress 'wrap' container -->
<div id="icon-themes" class="icon32"></div>
<h2>Plugin_Name Settings</h2>
<?php settings_errors(); ?>
<?php
if ( isset( $_GET ) ) {
$active_tab = $_GET['tab'];
}
?>
<h2 class="nav-tab-wrapper">
PDF Settings
Email Settings
</h2>
<form method="post" action="options.php">
<?php
if ( $active_tab == 'pdf_settings' ) {
// settings options group name passed
settings_fields( 'Plugin_Name_pdf_settings_options_group' );
// settings options name passed
do_settings_sections( 'Plugin_Name_pdf_settings_options' );
submit_button();
} elseif ( $active_tab == 'email_settings' ) {
// settings options group name passed
settings_fields( 'Plugin_Name_email_settings_options_group' );
// settings options name passed
do_settings_sections( 'Plugin_Name_email_settings_options' );
submit_button();
}
?>
</form>
</div><!-- /.wrap -->
<?php
}
/***** Start - Tab 01 - PDF Settings Script ***/
public function plugin_name_pdf_settings_init() {
register_setting(
'plugin_name_pdf_settings_options_group', // option_group
'plugin_name_pdf_settings_options', // option_name
array( $this, 'plugin_name_pdf_settings_options_sanitize' ), // sanitize_callback
);
add_settings_section(
'plugin_name_pdf_settings_options_section', // id
'plugin_name PDF Settings', // title
array( $this, 'plugin_name_pdf_settings_options_section_info' ), // callback
//'plugin_name-admin-dashboard', //$_GET['page'], // page
'plugin_name_pdf_settings_options'
);
add_settings_field(
'plugin_name_enrollment_agent_name_option', // id
'Enrollment Agent Name', // title
array( $this, 'plugin_name_enrollment_agent_name_option_callback' ), // callback
'plugin_name_pdf_settings_options', // page
'plugin_name_pdf_settings_options_section' // section
);
add_settings_field(
'plugin_name_enrollment_agent_cert_option', // id
'Enrollment Agent Cert #', // title
array( $this, 'plugin_name_enrollment_agent_cert_option_callback' ), // callback
'plugin_name_pdf_settings_options', // page
'plugin_name_pdf_settings_options_section' // section
);
add_settings_field(
'plugin_name_enrollment_accepted_by_option', // id
'Enrollment Accepted By', // title
array( $this, 'plugin_name_enrollment_accepted_by_option_callback' ), // callback
'plugin_name_pdf_settings_options', // page
'plugin_name_pdf_settings_options_section' // section
);
}
public function plugin_name_pdf_settings_options_section_info() {
echo 'plugin_name PDF Settings, admin can set fix daat for PDF.';
}
public function plugin_name_pdf_settings_options_sanitize( $input ) {
$sanitary_values = array();
if ( isset( $input['plugin_name_enrollment_agent_name_option'] ) ) {
$sanitary_values['plugin_name_enrollment_agent_name_option'] = $input['plugin_name_enrollment_agent_name_option'];
}
if ( isset( $input['plugin_name_enrollment_agent_cert_option'] ) ) {
$sanitary_values['plugin_name_enrollment_agent_cert_option'] = $input['plugin_name_enrollment_agent_cert_option'];
}
if ( isset( $input['plugin_name_enrollment_accepted_by_option'] ) ) {
$sanitary_values['plugin_name_enrollment_accepted_by_option'] = $input['plugin_name_enrollment_accepted_by_option'];
}
return $sanitary_values;
}
function plugin_name_enrollment_agent_name_option_callback() {
$plugin_name_pdf_option_agent_name_value = ( isset($this->plugin_name_pdf_settings_options['plugin_name_enrollment_agent_name_option'] ) ) ? $this->plugin_name_pdf_settings_options['plugin_name_enrollment_agent_name_option']: '';
?>
<input type="text" name="plugin_name_pdf_settings_options[plugin_name_enrollment_agent_name_option]" value="<?php echo $plugin_name_pdf_option_agent_name_value; ?>">
<?php
}
function plugin_name_enrollment_agent_cert_option_callback() {
$plugin_name_pdf_option_agent_cert_value = ( isset($this->plugin_name_pdf_settings_options['plugin_name_enrollment_agent_cert_option'] ) ) ? $this->plugin_name_pdf_settings_options['plugin_name_enrollment_agent_cert_option']: '';
?>
<input type="text" name="plugin_name_pdf_settings_options[plugin_name_enrollment_agent_cert_option]" value="<?php echo $plugin_name_pdf_option_agent_cert_value; ?>">
<?php
}
function plugin_name_enrollment_accepted_by_option_callback() {
$plugin_name_pdf_option_accepted_by_value = ( isset($this->plugin_name_pdf_settings_options['plugin_name_enrollment_accepted_by_option'] ) ) ? $this->plugin_name_pdf_settings_options['plugin_name_enrollment_accepted_by_option']: '';
?>
<input type="text" name="plugin_name_pdf_settings_options[plugin_name_enrollment_accepted_by_option]" value="<?php echo $plugin_name_pdf_option_accepted_by_value; ?>">
<?php
}
/*** End - Tab 01 - PDF Settings Script ***/
/**** STart - Tab 02 - Email Settings Script ***/
public function plugin_name_email_settings_init() {
register_setting(
'plugin_name_email_settings_options_group', // option_group
'plugin_name_email_settings_options', // option_name
array( $this, 'plugin_name_email_settings_options_sanitize' ), // sanitize_callback
);
add_settings_section(
'plugin_name_email_settings_options_section', // id
'plugin_name email Settings', // title
array( $this, 'plugin_name_email_settings_options_section_info' ), // callback
//'plugin_name-admin-dashboard', //$_GET['page'], // page
'plugin_name_email_settings_options'
);
add_settings_field(
'plugin_name_teacher_name_option', // id
'Enrollment Agent Name', // title
array( $this, 'plugin_name_teacher_name_option_callback' ), // callback
'plugin_name_email_settings_options', // page
'plugin_name_email_settings_options_section' // section
);
add_settings_field(
'plugin_name_teacher_cert_option', // id
'Enrollment Agent Cert #', // title
array( $this, 'plugin_name_teacher_cert_option_callback' ), // callback
'plugin_name_email_settings_options', // page
'plugin_name_email_settings_options_section' // section
);
add_settings_field(
'plugin_name_room_number_option', // id
'Enrollment Accepted By', // title
array( $this, 'plugin_name_room_number_option_callback' ), // callback
'plugin_name_email_settings_options', // page
'plugin_name_email_settings_options_section' // section
);
}
public function plugin_name_email_settings_options_section_info() {
echo 'plugin_name email Settings, admin can set fix daat for email.';
}
public function plugin_name_email_settings_options_sanitize( $input ) {
$sanitary_values = array();
if ( isset( $input['plugin_name_teacher_name_option'] ) ) {
$sanitary_values['plugin_name_teacher_name_option'] = $input['plugin_name_teacher_name_option'];
}
if ( isset( $input['plugin_name_teacher_cert_option'] ) ) {
$sanitary_values['plugin_name_teacher_cert_option'] = $input['plugin_name_teacher_cert_option'];
}
if ( isset( $input['plugin_name_room_number_option'] ) ) {
$sanitary_values['plugin_name_room_number_option'] = $input['plugin_name_room_number_option'];
}
return $sanitary_values;
}
function plugin_name_teacher_name_option_callback() {
$plugin_name_email_option_agent_name_value = ( isset($this->plugin_name_email_settings_options['plugin_name_teacher_name_option'] ) ) ? $this->plugin_name_email_settings_options['plugin_name_teacher_name_option']: '';
?>
<input type="text" name="plugin_name_email_settings_options[plugin_name_teacher_name_option]" value="<?php echo $plugin_name_email_option_agent_name_value; ?>">
<?php
}
function plugin_name_teacher_cert_option_callback() {
$plugin_name_email_option_agent_cert_value = ( isset($this->plugin_name_email_settings_options['plugin_name_teacher_cert_option'] ) ) ? $this->plugin_name_email_settings_options['plugin_name_teacher_cert_option']: '';
?>
<input type="text" name="plugin_name_email_settings_options[plugin_name_teacher_cert_option]" value="<?php echo $plugin_name_email_option_agent_cert_value; ?>">
<?php
}
function plugin_name_room_number_option_callback() {
$plugin_name_email_option_accepted_by_value = ( isset($this->plugin_name_email_settings_options['plugin_name_room_number_option'] ) ) ? $this->plugin_name_email_settings_options['plugin_name_room_number_option']: '';
?>
<input type="text" name="plugin_name_email_settings_options[plugin_name_room_number_option]" value="<?php echo $plugin_name_email_option_accepted_by_value; ?>">
<?php
}
/**** End - Tab 02 - Email Settings Script *****/
}
// Class Instence / object call for execution on requiring this page
new Plugin_Name_Settings_Page();
}

Answer 2

I found this tutorial online. Hope this helps.
http://plugin.michael-simpson.com/?page_id=47