WordPress Settings API: Multiple Sections On Same Page

This tutorial will show you how to add multiple sections on the same page using the Settings API.

NOTE: if what you need is multiple forms on the same page, then read my other article Multiple forms on the same settings page

We will add a sub menu page to the Settings menu using add_options_page but this will also work for other kind of menus.

I will not go through each function of the Settings API, as there are enough tutorials out there about this already. Instead, I’ll go straight to the point to add multiple sections on the same page.

Let’s start by adding a single section on our settings page. The plugin will be called “Test Plugin”, and we will create a setting called “Some Setting” that the user will be able to configure. Below is the code and a print screen of the settings page with single section.

class Test_Options {

	function __construct() {
		add_action( 'admin_menu', array( $this, 'add_plugin_settings_menu' ) );
		add_action( 'admin_init', array( $this, 'register_settings' ) );
	}

	function add_plugin_settings_menu() {
		// add_options_page( $page_title, $menu_title, $capability, $menu_slug, $function )
		add_options_page( 'Test Plugin', 'Test', 'manage_options', 'test-plugin', array($this, 'create_plugin_settings_page') );
	}

	function create_plugin_settings_page() {
	?>
<div class="wrap">
	<?php screen_icon(); ?>
    <h2>Settings</h2>

    <form method="post" action="options.php">
    <?php
		// This prints out all hidden setting fields
		// settings_fields( $option_group )
		settings_fields( 'settings-group' );
		// do_settings_sections( $page )
		do_settings_sections( 'test-plugin' );
    ?>
    <?php submit_button('Save Changes'); ?>
    </form>
</div>
	<?php
	}

	function register_settings() {

		// add_settings_section( $id, $title, $callback, $page )
		add_settings_section(
			'main-settings-section',
			'Main Settings',
			array($this, 'print_main_settings_section_info'),
			'test-plugin'
		);

		// add_settings_field( $id, $title, $callback, $page, $section, $args )
		add_settings_field(
			'some-setting', 
			'Some Setting', 
			array($this, 'create_input_some_setting'), 
			'test-plugin', 
			'main-settings-section'
		);

		// register_setting( $option_group, $option_name, $sanitize_callback )
		register_setting( 'settings-group', 'test_plugin_main_settings_arraykey', array($this, 'plugin_main_settings_validate') );
	}

	function print_main_settings_section_info() {
		echo '<p>Main Settings Description.</p>';
	}

	function create_input_some_setting() {
		$options = get_option('test_plugin_main_settings_arraykey');
        ?><input type="text" name="test_plugin_main_settings_arraykey[some-setting]" value="<?php echo $options['some-setting']; ?>" /><?php
	}

	function plugin_main_settings_validate($arr_input) {
		$options = get_option('test_plugin_main_settings_arraykey');
		$options['some-setting'] = trim( $arr_input['some-setting'] );
		return $options;
	}

}

Your settings page should now look like this:

Settings API single section
Settings page with single section

test-plugin is the slug of the settings page which we specified in add_options_page() function.

Slug of the settings page
Slug of the settings page

Adding Multiple Sections

Let’s now figure out how we can add multiple sections on the same page. In addition to our section called “Main Settings”, let’s add a second section called “Additional Settings” containing a field called “Another Setting” that the user will be able to configure.

Basically all we have to do, is adding a new section, a new field and register a new option name in the same option group.

Below is the modified register_settings() function:

function register_settings() {

	// add_settings_section( $id, $title, $callback, $page )
	add_settings_section(
		'main-settings-section',
		'Main Settings',
		array($this, 'print_main_settings_section_info'),
		'test-plugin'
	);

	// add_settings_field( $id, $title, $callback, $page, $section, $args )
	add_settings_field(
		'some-setting', 
		'Some Setting', 
		array($this, 'create_input_some_setting'), 
		'test-plugin', 
		'main-settings-section'
	);

	// register_setting( $option_group, $option_name, $sanitize_callback )
	register_setting( 'settings-group', 'test_plugin_main_settings_arraykey', array($this, 'plugin_main_settings_validate') );

	// add_settings_section( $id, $title, $callback, $page )
	add_settings_section(
		'additional-settings-section',
		'Additional Settings',
		array($this, 'print_additional_settings_section_info'),
		'test-plugin'
	);

	// add_settings_field( $id, $title, $callback, $page, $section, $args )
	add_settings_field(
		'another-setting', 
		'Another Setting', 
		array($this, 'create_input_another_setting'), 
		'test-plugin', 
		'additional-settings-section'
	);

	// register_setting( $option_group, $option_name, $sanitize_callback )
	register_setting( 'settings-group', 'test_plugin_additonal_settings_arraykey', array($this, 'plugin_additional_settings_validate') );
}

This is how our page with multiple sections will look like:

Settings API multiple sections
Settings page with multiple sections

And here is the full code of the settings page:

class Test_Options {

	function __construct() {
		add_action( 'admin_menu', array( $this, 'add_plugin_settings_menu' ) );
		add_action( 'admin_init', array( $this, 'register_settings' ) );
	}

	function add_plugin_settings_menu() {
		// add_options_page( $page_title, $menu_title, $capability, $menu_slug, $function )
		add_options_page( 'Test Plugin', 'Test', 'manage_options', 'test-plugin', array($this, 'create_plugin_settings_page') );
	}

	function create_plugin_settings_page() {
	?>
<div class="wrap">
	<?php screen_icon(); ?>
    <h2>Settings</h2>

    <form method="post" action="options.php">
    <?php
		// This prints out all hidden setting fields
		// settings_fields( $option_group )
		settings_fields( 'settings-group' );
		// do_settings_sections( $page )
		do_settings_sections( 'test-plugin' );
    ?>
    <?php submit_button('Save Changes'); ?>
    </form>
</div>
	<?php
	}

	function register_settings() {

		// add_settings_section( $id, $title, $callback, $page )
		add_settings_section(
			'main-settings-section',
			'Main Settings',
			array($this, 'print_main_settings_section_info'),
			'test-plugin'
		);

		// add_settings_field( $id, $title, $callback, $page, $section, $args )
		add_settings_field(
			'some-setting', 
			'Some Setting', 
			array($this, 'create_input_some_setting'), 
			'test-plugin', 
			'main-settings-section'
		);

		// register_setting( $option_group, $option_name, $sanitize_callback )
		register_setting( 'settings-group', 'test_plugin_main_settings_arraykey', array($this, 'plugin_main_settings_validate') );

		// add_settings_section( $id, $title, $callback, $page )
		add_settings_section(
			'additional-settings-section',
			'Additional Settings',
			array($this, 'print_additional_settings_section_info'),
			'test-plugin'
		);

		// add_settings_field( $id, $title, $callback, $page, $section, $args )
		add_settings_field(
			'another-setting', 
			'Another Setting', 
			array($this, 'create_input_another_setting'), 
			'test-plugin', 
			'additional-settings-section'
		);

		// register_setting( $option_group, $option_name, $sanitize_callback )
		register_setting( 'settings-group', 'test_plugin_additonal_settings_arraykey', array($this, 'plugin_additional_settings_validate') );
	}

	function print_main_settings_section_info() {
		echo '<p>Main Settings Description.</p>';
	}

	function create_input_some_setting() {
		$options = get_option('test_plugin_main_settings_arraykey');
        ?><input type="text" name="test_plugin_main_settings_arraykey[some-setting]" value="<?php echo $options['some-setting']; ?>" /><?php
	}

	function plugin_main_settings_validate($arr_input) {
		$options = get_option('test_plugin_main_settings_arraykey');
		$options['some-setting'] = trim( $arr_input['some-setting'] );
		return $options;
	}

	function print_additional_settings_section_info() {
		echo '<p>Additional Settings Description.</p>';
	}

	function create_input_another_setting() {
		$options = get_option('test_plugin_additonal_settings_arraykey');
        ?><input type="text" name="test_plugin_additonal_settings_arraykey[another-setting]" value="<?php echo $options['another-setting']; ?>" /><?php
	}

	function plugin_additional_settings_validate($arr_input) {
		$options = get_option('test_plugin_additonal_settings_arraykey');
		$options['another-setting'] = trim( $arr_input['another-setting'] );
		return $options;
	}

}

Below you will find a RAR file containing three plugins that you can paste to your plugins directory, demonstrating a settings page containing:

  1. a single section
  2. multiple sections
  3. multiple forms

Activate the plugins and have a look under the Settings menu.

mendoweb-demo-wp-plugins-options-page

Post a Comment