Settings Page With Multiple Tab

We can create a custom settings page with multiple tabs. In which we can create multiple settings fields and forms.

To create the Settings Page With Multiple Tab we need to create a setting page first.

Insert below code in a function.php.

/* Settings Menu */add_action( 'admin_menu', 'settings_menu' ); 

function settings_menu() {
  $page_title = 'Custom Settings';   
  $menu_title = 'Custom Settings';   
  $capability = 'manage_options';   
  $menu_slug  = 'custom_settings';   
  $function   = 'custom_settings'; 
  $icon_url = 'dashicons-admin-generic'; 
  $position = 20;  
  add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position ); 
  do_action( 'custom_settings_page_tab_general' );
  do_action( 'custom_settings_page_tab_style' );
}

After this code execution Settings menu will be created in the WordPress admin.

Refer to the below screenshot.

Now, to create the tabs on the settings page we need to insert the settings page code in function.php.

function custom_settings() {
  settings_errors();
  ?>
  <div class="wrap">
    <h1 class="wp-heading-inline"></h1>
  </div>
  <h1><?php _e('Custom Settings'); ?></h1>
  <?php 
  
  global $active_tab;
  $active_tab = isset( $_GET[ 'tab' ] ) ? $_GET[ 'tab' ] : 'general'; 
  ?>
  
  <h2 class="nav-tab-wrapper">
    <a href="?page=custom-settings&tab=general" class="nav-tab <?php _e($active_tab == 'general' ? 'nav-tab-active' : ''); ?>"><?php _e('General'); ?></a>
    <a href="?page=custom-settings&tab=style" class="nav-tab <?php _e($active_tab == 'style' ? 'nav-tab-active' : ''); ?>"><?php _e('Style'); ?></a>
  </h2>

  <?php 
  if ( $active_tab == 'general' ) {
    settings_fields( 'settings_general_options_group' );
    do_settings_sections( 'settings_general_options' );
  } elseif ( $active_tab == 'style' ) {
    settings_fields( 'settings_style_options_group' ); 
    do_settings_sections( 'settings_style_options' );
  } 
}

/*** Start - Tab General ***/add_action( 'custom_settings_page_tab_general', 'settings_general', 10 );
function settings_general() {
  register_setting(
    'settings_general_options_group',
    '',
    array(), 
  );
  add_settings_section(
    'settings_general_section', 
    '', 
    'settings_general_section', 
    'settings_general_options'
  );
}

function settings_general_section() {
  ?>
  <div class="settings-form-wrap">
    <h1 class="wp-heading-inline">General Settings</h1>
    <form method="post" action-xhr="#" id="general_fields">
      <table>
        <tr>
          <td><strong>Country *</strong></td>
          <td><input type="text" name="general_country" class="general_country" value="" required /></td>
        </tr>
        <tr>
          <td><strong>Province</strong></td>
          <td>
            <input type="text" name="general_province" class="general_province" />
          </td>
        </tr>
        <tr>
          <td><strong>Age</strong></td>
          <td><input type="text" name="general_age" value=""></td>
        </tr>
      </table>
      <p><input type="submit" class="button-primary" name="general_btn" value="Save Changes" /></p>
    </form>
  </div>
  <?php
}
/*** End - Tab General ***/
/*** Start - Tab Style ***/add_action( 'custom_settings_page_tab_style', 'settings_style', 10 );
function settings_style() {
  register_setting(
    'settings_style_options_group',
    '',
    array(), 
  );
  add_settings_section(
    'settings_style_section', 
    '', 
    'settings_style_section', 
    'settings_style_options'
  );
}

function settings_style_section() {
  ?>
  <div class="settings-form-wrap">
    <h1 class="wp-heading-inline">Style Settings</h1>
    <form method="post" action-xhr="#" id="style_fields">
      <table>
        <tr>
          <td><strong>Color</strong></td>
          <td><input type="text" name="style_color" class="style_color" value="" required /></td>
        </tr>
        <tr>
          <td><strong>Font size</strong></td>
          <td>
            <input type="text" name="style_size" class="style_size" />
          </td>
        </tr>
      </table>
      <p><input type="submit" class="button-primary" name="style_btn" value="Save Changes" /></p>
    </form>
  </div>
  <?php
}
/*** End - Tab Style ***/

Please check the below video of the output.

Hope this article will be helpful to you.