Sample WordPress Settings Page Examples. With and Without Tabs Both!

default-values.php

<?php
/**
 * This file contains common functions required in both implementations.
 */

/**
 * Provides default values for the Social Options.
 */
function sandbox_settings_default_social_options() {

	$defaults = array(
		'twitter'       => '',
		'facebook'      => '',
		'googleplus'    => '',
	);

	return apply_filters( 'sandbox_settings_default_social_options', $defaults );

} // end sandbox_settings_default_social_options


/**
 * Provides default values for the Input Options.
 */
function sandbox_settings_default_input_options() {

	$defaults = array(
		'input_example'     => '',
		'textarea_example'  => '',
		'checkbox_example'  => '',
		'radio_example'     => '',
		'time_options'      => 'default',
	);

	return apply_filters( 'sandbox_settings_default_input_options', $defaults );

} // end sandbox_settings_default_input_options

sample-settings-page-with-tabs.php

<?php
/**
 * Plugin Name: Settings Page Example
 *
 */

include_once 'default-values.php';
include_once 'sample-settings-page-without-tabs.php';


add_action( 'admin_menu', 'sandbox_example_settings_menu' );
/**
 * This function introduces the settings into the 'Appearance' menu and into a top-level
 * 'Sandbox Settings' menu.
 */
function sandbox_example_settings_menu() {

	add_menu_page(
		'Sandbox Settings',                 // The value used to populate the browser's title bar when the menu page is active
		'Sandbox Settings',                 // The text of the menu in the administrator's sidebar
		'administrator',                    // What roles are able to access the menu
		'sandbox_settings_menu',                // The ID used to bind submenu items to this menu
		'sandbox_settings_display'              // The callback function used to render this menu
	);

	add_submenu_page(
		'sandbox_settings_menu',            // The ID of the top-level menu page to which this submenu item belongs
		__( 'Social Options', 'sandbox' ),  // The value used to populate the browser's title bar when the menu page is active
		__( 'Social Options', 'sandbox' ),  // The label of this submenu item displayed in the menu
		'administrator',                    // What roles are able to access this submenu item
		'sandbox_settings_social_options_page', // The ID used to represent this submenu item
		'sandbox_settings_display'   // The callback function used to render the options for this submenu item
	);

	add_submenu_page(
		'sandbox_settings_menu',        // The ID of the top-level menu page to which this submenu item belongs
		__( 'Input Examples', 'sandbox' ),  // The value used to populate the browser's title bar when the menu page is active
		__( 'Input Examples', 'sandbox' ),  // The label of this submenu item displayed in the menu
		'administrator',                    // What roles are able to access this submenu item
		'sandbox_settings_input_examples_page',  // The ID used to represent this submenu item
		create_function( null, 'sandbox_settings_display( "input_examples" );' )    // The callback function used to render the options for this submenu item
	);

} // end sandbox_example_settings_menu

/**
 * Renders a simple page to display for the menu defined above.
 */
function sandbox_settings_display( $active_tab = '' ) {
	?>
	<!-- Create a header in the default WordPress 'wrap' container -->
	<div class="wrap">
	
		<div id="icon-themes" class="icon32"></div>
		<h2><?php _e( 'Sandbox Settings Options', 'sandbox' ); ?></h2>
		<?php settings_errors(); ?>
		
		<?php
		if ( $active_tab == 'input_examples' ) {
			$active_tab = 'input_examples';
		} else {
			$active_tab = 'social_options';
		} // end if/else
		?>
		
		<h2 class="nav-tab-wrapper">
			<a href="?page=sandbox_settings_social_options_page" class="nav-tab <?php echo $active_tab == 'social_options' ? 'nav-tab-active' : ''; ?>"><?php _e( 'Social Options', 'sandbox' ); ?></a>
			<a href="?page=sandbox_settings_input_examples_page" class="nav-tab <?php echo $active_tab == 'input_examples' ? 'nav-tab-active' : ''; ?>"><?php _e( 'Input Examples', 'sandbox' ); ?></a>
		</h2>
		
		<form method="post" action="options.php">
			<?php

			if ( $active_tab == 'social_options' ) {

				// NOTE: For one screen, there can be only 1 settings_fields and do_settings_sections call.

				settings_fields( 'sandbox_settings_social_options_group' ); // Output nonce, action, and option_page fields for a settings page. Parameter passed to it is, options group. This value is similar to the first parameter passed to register_setting function.
				do_settings_sections( 'sandbox_settings_social_options_page' ); // Print all settings of passed page slug. Check all add_settings_section and add_settings_field to which this value is passed.

			} else {

				settings_fields( 'sandbox_settings_input_examples_group' );
				do_settings_sections( 'sandbox_settings_input_examples_page' );

			} // end if/else

				submit_button();

			?>
		</form>
		
	</div><!-- /.wrap -->
	<?php
} // end sandbox_settings_display

/* ------------------------------------------------------------------------ *
 * Setting Registration
 * ------------------------------------------------------------------------ */
add_action( 'admin_init', 'sandbox_settings_initialize_social_options' );
/**
 * Initializes the social options by registering the Sections,
 * Fields, and Settings.
 *
 * This function is registered with the 'admin_init' hook.
 */
function sandbox_settings_initialize_social_options() {
	// If the settings don't exist, create them.
	if ( false == get_option( 'sandbox_settings_social_options' ) ) {
		add_option( 'sandbox_settings_social_options', apply_filters( 'sandbox_settings_default_social_options', sandbox_settings_default_social_options() ) );
	} // end if

	// First, we register a section. This is necessary since all future options must belong to a
	add_settings_section(
		'social_settings_section',          // ID used to identify this section and with which to register options
		__( 'Social Options', 'sandbox' ),      // Title to be displayed on the administration page
		'sandbox_social_options_callback',  // Callback used to render the description of the section
		'sandbox_settings_social_options_page'       // Page on which to add this section of options
	);

	add_settings_field(
		'twitter',                      // This is required param here but useless. Not used anywhere else. Changing this will not have any impact
		'Twitter',                      // Formatted title of the field. Shown as the label for the field during output.
		'sandbox_twitter_callback',     //Callback to display this particular settings
		'sandbox_settings_social_options_page', // Page on which to show this setting
		'social_settings_section',      // Section this setting belongs to.
		array(                          // The array of arguments to pass to the callback. In this case, just a description.
			__( 'Parameter passed to `sandbox_twitter_callback` function from  `add_settings_field` ', 'sandbox' ),
		)
	);

	add_settings_field(
		'facebook',
		'Facebook',
		'sandbox_facebook_callback',
		'sandbox_settings_social_options_page',
		'social_settings_section'
	);

	add_settings_field(
		'googleplus',
		'Google+',
		'sandbox_googleplus_callback',
		'sandbox_settings_social_options_page',
		'social_settings_section'
	);

	// Finally, we register the fields with WordPress
	register_setting(
		'sandbox_settings_social_options_group',
		'sandbox_settings_social_options',  // Option Name under which settings of this particular group will be registered.
		'sandbox_settings_sanitize_social_options'
	);

} // end sandbox_settings_initialize_social_options


add_action( 'admin_init', 'sandbox_settings_initialize_input_examples' );
/**
 * Initializes the input example by registering the Sections,
 * Fields, and Settings. This particular group of options is used to demonstration
 * validation and sanitization.
 *
 * This function is registered with the 'admin_init' hook.
 */
function sandbox_settings_initialize_input_examples() {

	if ( false == get_option( 'sandbox_settings_input_examples' ) ) {
		add_option( 'sandbox_settings_input_examples', apply_filters( 'sandbox_settings_default_input_options', sandbox_settings_default_input_options() ) );
	} // end if

	add_settings_section(
		'input_examples_section',
		__( 'Input Examples', 'sandbox' ),
		'sandbox_input_examples_callback',
		'sandbox_settings_input_examples_page'
	);

	add_settings_field(
		'Input Element',
		__( 'Input Element', 'sandbox' ),
		'sandbox_input_element_callback',
		'sandbox_settings_input_examples_page',
		'input_examples_section'
	);

	add_settings_field(
		'Textarea Element',
		__( 'Textarea Element', 'sandbox' ),
		'sandbox_textarea_element_callback',
		'sandbox_settings_input_examples_page',
		'input_examples_section'
	);

	add_settings_field(
		'Checkbox Element',
		__( 'Checkbox Element', 'sandbox' ),
		'sandbox_checkbox_element_callback',
		'sandbox_settings_input_examples_page',
		'input_examples_section'
	);

	add_settings_field(
		'Radio Button Elements',
		__( 'Radio Button Elements', 'sandbox' ),
		'sandbox_radio_element_callback',
		'sandbox_settings_input_examples_page',
		'input_examples_section'
	);

	add_settings_field(
		'Select Element',
		__( 'Select Element', 'sandbox' ),
		'sandbox_select_element_callback',
		'sandbox_settings_input_examples_page',
		'input_examples_section'
	);

	register_setting(
		'sandbox_settings_input_examples_group',
		'sandbox_settings_input_examples',
		'sandbox_settings_validate_input_examples'
	);

} // end sandbox_settings_initialize_input_examples


/* ------------------------------------------------------------------------ *
 * Section Callbacks
 * ------------------------------------------------------------------------ */

/**
 * This function provides a simple description for the Social Options page.
 *
 * It's called from the 'sandbox_settings_initialize_social_options' function by being passed as a parameter
 * in the add_settings_section function.
 */
function sandbox_social_options_callback() {
	echo '<p>' . __( 'Provide the URL to the social networks you\'d like to display.', 'sandbox' ) . '</p>';
} // end sandbox_general_options_callback

/**
 * This function provides a simple description for the Input Examples page.
 *
 * It's called from the 'sandbox_settings_initialize_input_examples_options' function by being passed as a parameter
 * in the add_settings_section function.
 */
function sandbox_input_examples_callback() {
	echo '<p>' . __( 'Provides examples of the five basic element types.', 'sandbox' ) . '</p>';
} // end sandbox_general_options_callback

/* ------------------------------------------------------------------------ *
 * Field Callbacks
 * ------------------------------------------------------------------------ */

function sandbox_twitter_callback( $args ) {

	// First, we read the social options collection
	$options = get_option( 'sandbox_settings_social_options' );

	// Next, we need to make sure the element is defined in the options. If not, we'll set an empty string.
	$url = '';
	if ( isset( $options['twitter'] ) ) {
		$url = esc_url( $options['twitter'] );
	} // end if

	// Render the output
	echo '<input type="text" id="twitter" name="sandbox_settings_social_options[twitter]" value="' . $url . '" />';
	echo '<label for="show_content">&nbsp;' . $args[0] . '</label>';

} // end sandbox_twitter_callback

function sandbox_facebook_callback() {

	$options = get_option( 'sandbox_settings_social_options' );

	$url = '';
	if ( isset( $options['facebook'] ) ) {
		$url = esc_url( $options['facebook'] );
	} // end if

	// Render the output
	echo '<input type="text" id="facebook" name="sandbox_settings_social_options[facebook]" value="' . $url . '" />';

} // end sandbox_facebook_callback

function sandbox_googleplus_callback() {

	$options = get_option( 'sandbox_settings_social_options' );

	$url = '';
	if ( isset( $options['googleplus'] ) ) {
		$url = esc_url( $options['googleplus'] );
	} // end if

	// Render the output
	echo '<input type="text" id="googleplus" name="sandbox_settings_social_options[googleplus]" value="' . $url . '" />';

} // end sandbox_googleplus_callback

function sandbox_input_element_callback() {

	$options = get_option( 'sandbox_settings_input_examples' );

	// Render the output
	echo '<input type="text" id="input_example" name="sandbox_settings_input_examples[input_example]" value="' . $options['input_example'] . '" />';

} // end sandbox_input_element_callback

function sandbox_textarea_element_callback() {

	$options = get_option( 'sandbox_settings_input_examples' );

	// Render the output
	echo '<textarea id="textarea_example" name="sandbox_settings_input_examples[textarea_example]" rows="5" cols="50">' . $options['textarea_example'] . '</textarea>';

} // end sandbox_textarea_element_callback

function sandbox_checkbox_element_callback() {

	$options = get_option( 'sandbox_settings_input_examples' );

	$html = '<input type="checkbox" id="checkbox_example" name="sandbox_settings_input_examples[checkbox_example]" value="1"' . checked( 1, $options['checkbox_example'], false ) . '/>';
	$html .= '&nbsp;';
	$html .= '<label for="checkbox_example">This is an example of a checkbox</label>';

	echo $html;

} // end sandbox_checkbox_element_callback

function sandbox_radio_element_callback() {

	$options = get_option( 'sandbox_settings_input_examples' );

	$html = '<input type="radio" id="radio_example_one" name="sandbox_settings_input_examples[radio_example]" value="1"' . checked( 1, $options['radio_example'], false ) . '/>';
	$html .= '&nbsp;';
	$html .= '<label for="radio_example_one">Option One</label>';
	$html .= '&nbsp;';
	$html .= '<input type="radio" id="radio_example_two" name="sandbox_settings_input_examples[radio_example]" value="2"' . checked( 2, $options['radio_example'], false ) . '/>';
	$html .= '&nbsp;';
	$html .= '<label for="radio_example_two">Option Two</label>';

	echo $html;

} // end sandbox_radio_element_callback

function sandbox_select_element_callback() {

	$options = get_option( 'sandbox_settings_input_examples' );

	$html = '<select id="time_options" name="sandbox_settings_input_examples[time_options]">';
		$html .= '<option value="default">' . __( 'Select a time option...', 'sandbox' ) . '</option>';
		$html .= '<option value="never"' . selected( $options['time_options'], 'never', false ) . '>' . __( 'Never', 'sandbox' ) . '</option>';
		$html .= '<option value="sometimes"' . selected( $options['time_options'], 'sometimes', false ) . '>' . __( 'Sometimes', 'sandbox' ) . '</option>';
		$html .= '<option value="always"' . selected( $options['time_options'], 'always', false ) . '>' . __( 'Always', 'sandbox' ) . '</option>';
	$html .= '</select>';

	echo $html;

} // end sandbox_radio_element_callback

/* ------------------------------------------------------------------------ *
 * Setting Callbacks
 * ------------------------------------------------------------------------ */

/**
 * Sanitization callback for the social options. Since each of the social options are text inputs,
 * this function loops through the incoming option and strips all tags and slashes from the value
 * before serializing it.
 *
 * @params  $input  The unsanitized collection of options.
 *
 * @returns         The collection of sanitized values.
 */
function sandbox_settings_sanitize_social_options( $input ) {

	// Define the array for the updated options
	$output = array();

	// Loop through each of the options sanitizing the data
	foreach ( $input as $key => $val ) {

		if ( isset( $input[ $key ] ) ) {
			$output[ $key ] = esc_url_raw( strip_tags( stripslashes( $input[ $key ] ) ) );
		} // end if
	} // end foreach

	// Return the new collection
	return apply_filters( 'sandbox_settings_sanitize_social_options', $output, $input );

} // end sandbox_settings_sanitize_social_options

function sandbox_settings_validate_input_examples( $input ) {

	// Create our array for storing the validated options
	$output = array();

	// Loop through each of the incoming options
	foreach ( $input as $key => $value ) {

		// Check to see if the current option has a value. If so, process it.
		if ( isset( $input[ $key ] ) ) {

			// Strip all HTML and PHP tags and properly handle quoted strings
			$output[ $key ] = strip_tags( stripslashes( $input[ $key ] ) );

		} // end if
	} // end foreach

	// Return the array processing any additional functions filtered by this action
	return apply_filters( 'sandbox_settings_validate_input_examples', $output, $input );

} // end sandbox_settings_validate_input_examples

?>

sample-settings-page-without-tabs.php

<?php
add_action( 'admin_menu', 'sandbox_example_wot_settings_menu' );

/**
 * This function introduces the settings into the 'Appearance' menu and into a top-level
 * 'Sandbox Settings' menu.
 */
function sandbox_example_wot_settings_menu() {

	add_menu_page(
		'Sandbox Settings W/O tabs',                 // The value used to populate the browser's title bar when the menu page is active
		'Sandbox Settings W/O tab',                 // The text of the menu in the administrator's sidebar
		'administrator',                    // What roles are able to access the menu
		'sandbox_wot_settings_page',                // The ID used to bind submenu items to this menu. AKA page-slug or menu-slug
		'sandbox_wot_settings_page_display'              // The callback function used to render this menu
	);

} // end sandbox_example_settings_menu

/**
 * Renders a simple page to display for the menu defined above.
 */
function sandbox_wot_settings_page_display() {
	?>
	<!-- Create a header in the default WordPress 'wrap' container -->
	<div class="wrap">
	
		<div id="icon-themes" class="icon32"></div>
		<h2><?php _e( 'Sandbox Settings Options', 'sandbox' ); ?></h2>
		<?php settings_errors(); ?>

		
		<form method="post" action="options.php">
			<?php
				// NOTE: For one screen, there can be only 1 settings_fields and do_settings_sections call. That means first parameter passed to all register_setting callbacks has to be same & that same value has to be passed to settings_fields as well.

				settings_fields( 'sandbox_wot_settings_group' ); // Output nonce, action, and option_page fields for a settings page. Parameter passed to it is, options group. This value is similar to the first parameter passed to register_setting function.
				do_settings_sections( 'sandbox_wot_settings_page' ); // Print all settings of passed page slug. Check all add_settings_section and add_settings_field to which this value is passed.

				submit_button();

			?>
		</form>
		
	</div><!-- /.wrap -->
	<?php
} // end sandbox_settings_display

/* ------------------------------------------------------------------------ *
 * Setting Registration
 * ------------------------------------------------------------------------ */
add_action( 'admin_init', 'sandbox_wot_settings_initialize_social_options' );
/**
 * Initializes the social options by registering the Sections,
 * Fields, and Settings.
 *
 * This function is registered with the 'admin_init' hook.
 */
function sandbox_wot_settings_initialize_social_options() {
	// If the settings don't exist, create them.
	if ( false == get_option( 'sandbox_settings_social_options' ) ) {
		add_option( 'sandbox_settings_social_options', apply_filters( 'sandbox_settings_default_social_options', sandbox_settings_default_social_options() ) );
	} // end if

	// First, we register a section. This is necessary since all future options must belong to a
	add_settings_section(
		'social_settings_section',          // ID used to identify this section and with which to register options
		__( 'Social Options', 'sandbox' ),      // Title to be displayed on the administration page
		'sandbox_social_options_callback',  // Callback used to render the description of the section
		'sandbox_wot_settings_page'       // Page on which to add this section of options
	);

	add_settings_field(
		'twitter',                      // This is required param here but useless. Not used anywhere else. Changing this will not have any impact
		'Twitter',                      // Formatted title of the field. Shown as the label for the field during output.
		'sandbox_twitter_callback',     //Callback to display this particular settings
		'sandbox_wot_settings_page', // Page on which to show this setting
		'social_settings_section',      // Section this setting belongs to.
		array(                          // The array of arguments to pass to the callback. In this case, just a description.
			__( 'Parameter passed to `sandbox_twitter_callback` function from  `add_settings_field` ', 'sandbox' ),
		)
	);

	add_settings_field(
		'facebook',
		'Facebook',
		'sandbox_facebook_callback',
		'sandbox_wot_settings_page',
		'social_settings_section'
	);

	add_settings_field(
		'googleplus',
		'Google+',
		'sandbox_googleplus_callback',
		'sandbox_wot_settings_page',
		'social_settings_section'
	);

	// Finally, we register the fields with WordPress
	register_setting(
		'sandbox_wot_settings_group', // This has to be kept same.
		'sandbox_settings_social_options',  // Option Name under which settings will be saved in the database (db).
		'sandbox_settings_sanitize_social_options'
	);

} // end sandbox_settings_initialize_social_options



add_action( 'admin_init', 'sandbox_wot_settings_initialize_input_examples' );
/**
 * Initializes the input example by registering the Sections,
 * Fields, and Settings. This particular group of options is used to demonstration
 * validation and sanitization.
 *
 * This function is registered with the 'admin_init' hook.
 */
function sandbox_wot_settings_initialize_input_examples() {

	if ( false == get_option( 'sandbox_settings_input_examples' ) ) {
		add_option( 'sandbox_settings_input_examples', apply_filters( 'sandbox_settings_default_input_options', sandbox_settings_default_input_options() ) );
	} // end if

	add_settings_section(
		'input_examples_section',
		__( 'Input Examples', 'sandbox' ),
		'sandbox_input_examples_callback',
		'sandbox_wot_settings_page'
	);

	add_settings_field(
		'Input Element',
		__( 'Input Element', 'sandbox' ),
		'sandbox_input_element_callback',
		'sandbox_wot_settings_page',
		'input_examples_section'
	);

	add_settings_field(
		'Textarea Element',
		__( 'Textarea Element', 'sandbox' ),
		'sandbox_textarea_element_callback',
		'sandbox_wot_settings_page',
		'input_examples_section'
	);

	add_settings_field(
		'Checkbox Element',
		__( 'Checkbox Element', 'sandbox' ),
		'sandbox_checkbox_element_callback',
		'sandbox_wot_settings_page',
		'input_examples_section'
	);

	add_settings_field(
		'Radio Button Elements',
		__( 'Radio Button Elements', 'sandbox' ),
		'sandbox_radio_element_callback',
		'sandbox_wot_settings_page',
		'input_examples_section'
	);

	add_settings_field(
		'Select Element',
		__( 'Select Element', 'sandbox' ),
		'sandbox_select_element_callback',
		'sandbox_wot_settings_page',
		'input_examples_section'
	);

	register_setting(
		'sandbox_wot_settings_group',
		'sandbox_settings_input_examples',
		'sandbox_settings_validate_input_examples'
	);

} // end sandbox_settings_initialize_input_examples


/* ------------------------------------------------------------------------ *
 * Section Callbacks
 * ------------------------------------------------------------------------ */

/**
 * This function provides a simple description for the Social Options page.
 *
 * It's called from the 'sandbox_settings_initialize_social_options' function by being passed as a parameter
 * in the add_settings_section function.
 */
if ( ! function_exists( 'sandbox_social_options_callback' ) ) {
	function sandbox_social_options_callback() {
		echo '<p>' . __( 'Provide the URL to the social networks you\'d like to display.', 'sandbox' ) . '</p>';
	} // end sandbox_general_options_callback
}


/**
 * This function provides a simple description for the Input Examples page.
 *
 * It's called from the 'sandbox_settings_initialize_input_examples_options' function by being passed as a parameter
 * in the add_settings_section function.
 */
if ( ! function_exists( 'sandbox_input_examples_callback' ) ) {
	function sandbox_input_examples_callback() {
		echo '<p>' . __( 'Provides examples of the five basic element types.', 'sandbox' ) . '</p>';
	} // end sandbox_general_options_callback
}

/* ------------------------------------------------------------------------ *
 * Field Callbacks
 * ------------------------------------------------------------------------ */
if ( ! function_exists( 'sandbox_twitter_callback' ) ) {
	function sandbox_twitter_callback( $args ) {

		// First, we read the social options collection
		$options = get_option( 'sandbox_settings_social_options' );

		// Next, we need to make sure the element is defined in the options. If not, we'll set an empty string.
		$url = '';
		if ( isset( $options['twitter'] ) ) {
			$url = esc_url( $options['twitter'] );
		} // end if

		// Render the output
		echo '<input type="text" id="twitter" name="sandbox_settings_social_options[twitter]" value="' . $url . '" />';
		echo '<label for="show_content">&nbsp;' . $args[0] . '</label>';

	} // end sandbox_twitter_callback
}

if ( ! function_exists( 'sandbox_facebook_callback' ) ) {
	function sandbox_facebook_callback() {

		$options = get_option( 'sandbox_settings_social_options' );

		$url = '';
		if ( isset( $options['facebook'] ) ) {
			$url = esc_url( $options['facebook'] );
		} // end if

		// Render the output
		echo '<input type="text" id="facebook" name="sandbox_settings_social_options[facebook]" value="' . $url . '" />';

	} // end sandbox_facebook_callback
}

if ( ! function_exists( 'sandbox_googleplus_callback' ) ) {
	function sandbox_googleplus_callback() {

		$options = get_option( 'sandbox_settings_social_options' );

		$url = '';
		if ( isset( $options['googleplus'] ) ) {
			$url = esc_url( $options['googleplus'] );
		} // end if

		// Render the output
		echo '<input type="text" id="googleplus" name="sandbox_settings_social_options[googleplus]" value="' . $url . '" />';

	} // end sandbox_googleplus_callback
}

if ( ! function_exists( 'sandbox_input_element_callback' ) ) {
	function sandbox_input_element_callback() {

		$options = get_option( 'sandbox_settings_input_examples' );

		// Render the output
		echo '<input type="text" id="input_example" name="sandbox_settings_input_examples[input_example]" value="' . $options['input_example'] . '" />';

	} // end sandbox_input_element_callback
}

if ( ! function_exists( 'sandbox_textarea_element_callback' ) ) {
	function sandbox_textarea_element_callback() {

		$options = get_option( 'sandbox_settings_input_examples' );

		// Render the output
		echo '<textarea id="textarea_example" name="sandbox_settings_input_examples[textarea_example]" rows="5" cols="50">' . $options['textarea_example'] . '</textarea>';

	} // end sandbox_textarea_element_callback
}

if ( ! function_exists( 'sandbox_checkbox_element_callback' ) ) {
	function sandbox_checkbox_element_callback() {

		$options = get_option( 'sandbox_settings_input_examples' );

		$html = '<input type="checkbox" id="checkbox_example" name="sandbox_settings_input_examples[checkbox_example]" value="1"' . checked( 1, $options['checkbox_example'], false ) . '/>';
		$html .= '&nbsp;';
		$html .= '<label for="checkbox_example">This is an example of a checkbox</label>';

		echo $html;

	} // end sandbox_checkbox_element_callback
}

if ( ! function_exists( 'sandbox_radio_element_callback' ) ) {
	function sandbox_radio_element_callback() {

		$options = get_option( 'sandbox_settings_input_examples' );

		$html = '<input type="radio" id="radio_example_one" name="sandbox_settings_input_examples[radio_example]" value="1"' . checked( 1, $options['radio_example'], false ) . '/>';
		$html .= '&nbsp;';
		$html .= '<label for="radio_example_one">Option One</label>';
		$html .= '&nbsp;';
		$html .= '<input type="radio" id="radio_example_two" name="sandbox_settings_input_examples[radio_example]" value="2"' . checked( 2, $options['radio_example'], false ) . '/>';
		$html .= '&nbsp;';
		$html .= '<label for="radio_example_two">Option Two</label>';

		echo $html;

	} // end sandbox_radio_element_callback
}

if ( ! function_exists( 'sandbox_select_element_callback' ) ) {
	function sandbox_select_element_callback() {

		$options = get_option( 'sandbox_settings_input_examples' );

		$html = '<select id="time_options" name="sandbox_settings_input_examples[time_options]">';
		$html .= '<option value="default">' . __( 'Select a time option...', 'sandbox' ) . '</option>';
		$html .= '<option value="never"' . selected( $options['time_options'], 'never', false ) . '>' . __( 'Never', 'sandbox' ) . '</option>';
		$html .= '<option value="sometimes"' . selected( $options['time_options'], 'sometimes', false ) . '>' . __( 'Sometimes', 'sandbox' ) . '</option>';
		$html .= '<option value="always"' . selected( $options['time_options'], 'always', false ) . '>' . __( 'Always', 'sandbox' ) . '</option>';
		$html .= '</select>';

		echo $html;

	} // end sandbox_radio_element_callback
}
/* ------------------------------------------------------------------------ *
 * Setting Callbacks
 * ------------------------------------------------------------------------ */


if ( ! function_exists( 'sandbox_settings_sanitize_social_options' ) ) {
	/**
	 * Sanitization callback for the social options. Since each of the social options are text inputs,
	 * this function loops through the incoming option and strips all tags and slashes from the value
	 * before serializing it.
	 *
	 * @params  $input  The unsanitized collection of options.
	 *
	 * @returns         The collection of sanitized values.
	 */
	function sandbox_settings_sanitize_social_options( $input ) {

		// Define the array for the updated options
		$output = array();

		// Loop through each of the options sanitizing the data
		foreach ( $input as $key => $val ) {

			if ( isset( $input[ $key ] ) ) {
				$output[ $key ] = esc_url_raw( strip_tags( stripslashes( $input[ $key ] ) ) );
			} // end if
		} // end foreach

		// Return the new collection
		return apply_filters( 'sandbox_settings_sanitize_social_options', $output, $input );

	} // end sandbox_settings_sanitize_social_options
}

if ( ! function_exists( 'sandbox_settings_validate_input_examples' ) ) {
	function sandbox_settings_validate_input_examples( $input ) {

		// Create our array for storing the validated options
		$output = array();

		// Loop through each of the incoming options
		foreach ( $input as $key => $value ) {

			// Check to see if the current option has a value. If so, process it.
			if ( isset( $input[ $key ] ) ) {

				// Strip all HTML and PHP tags and properly handle quoted strings
				$output[ $key ] = strip_tags( stripslashes( $input[ $key ] ) );

			} // end if
		} // end foreach

		// Return the array processing any additional functions filtered by this action
		return apply_filters( 'sandbox_settings_validate_input_examples', $output, $input );

	} // end sandbox_settings_validate_input_examples
}

To create WordPress Settings Page, required actions are admin_menu and admin_init

One Screen/Page can have only one option-group and one page slug. option-group DOES NOT mean option name under which settings are saved in the database. option-group is used by functions settings_fields and register_setting. option-group is used for form security. settings_fields function use it to create nonce for the form.

One Screen/Page can call settings_fields and do_settings_sections functions only ONCE! These functions are used to print the complete settings page.

One Screen/Page can call register_setting function multiple times but option-group will always be the same in those calls.

The second parameter passed to register_setting function decides the option name under which settings will be saved in the database.

name attribute of input fields should consist of two things: option name under which the field is going to be saved AND actual key in the group of all settings.

Let's take a look at below html. Assuming it is a callback of the field passed to add_settings_field:

<input type="text" id="input_example" name="sandbox_settings_input_examples[input_example]" ..... />

The data of above field will be saved under sandbox_settings_input_examples option name in wp_options table. To retrieve value of this field, you will have to call get_option( 'sandbox_settings_input_examples' )['input_example'].

Validation of fields is done through Sanitization callback only. Call add_settings_error function inside Sanitization callback if a field does not pass validation.