WordPress :: Add Settings Page with All Fields

add-wordpress-settings-page.php

// Specify Hooks/Filters
//register_activation_hook( __FILE__, 'add_defaults_fn' ); // adds nothing to the DB using this
add_action( 'admin_init', 'add_defaults_fn' ); // works in place of the above line - temporary fix
add_action( 'admin_init', 'sampleoptions_init_fn' );
add_action( 'admin_menu', 'sampleoptions_add_page_fn' );

// Define the plugin prefix for easy changing throughout this file
define( 'PLUGIN_PREFIX', 'plugin_' ); // for prefixes with underscores
define( 'PLUGIN_PREFIX_DASH', 'plugin-' ); // for prefixes with dashes
// Define the plugin title - for samereasons as above
define( 'PLUGIN_TITLE', 'BigBang ' ); // don't forget to leave the space at the end!

// Define default option settings
function add_defaults_fn() {
  $tmp = get_option( PLUGIN_PREFIX . 'options' );
  if( !$tmp ) {
    $arr = array( 'text_string'   => 'Some sample text',
                  'text_pass'     => '123456',
                  'text_area'     => 'Space to put a lot of information here!',
                  'chk1'          => null,
                  'option_set1'   => 'Triangle',
                  'textarea_one'  => 'textarea one stuff',
                  'textarea_two'  => 'textarea two content',
		  'dropdown1'     => 'Orange',
                  'chk2'          => 'on'
                );
  	update_option( PLUGIN_PREFIX . 'options', $arr );
  }
}

// Register our settings. Add the settings section, and settings fields
function sampleoptions_init_fn() {
  // the 3rd item in register_setting has been turned into an array after version 4.7 (I believe)
  // so using the 3rd item as the sanitize callback is outdated.
	register_setting( PLUGIN_PREFIX . 'options', // setting group name, corresponds to option key name
                    PLUGIN_PREFIX . 'options', // name of option/option key to sanitize and save
                    array( //'type'              => 'string', // do not need this line if show_in_rest is false.
                           'description'       => '', // description of data attachedto this setting
                           'sanitize_callback' => 'plugin_options_validate', // callback function that sanitizes the data
                           'show_in_rest'      => false, // include in REST API?
                           'default'           => null // default value when calling get_option
                         )
                  );

	add_settings_section( 'main_section', // slug to identify the section, used in ID attribute of tags
                        'Main Settings', // displayed title/heading of section
                        'section_text_fn', // callback function of what this section displays
                        __FILE__ ); // url of page this section shows up on

	add_settings_field( PLUGIN_PREFIX . 'text_string', // slug to identify the field, used in ID attribute of tags
                      'Text Input', // field title. Shows as labels for inputs.
                      'setting_string_fn', // callback function of what this section displays
                      __FILE__, // url of page this section shows up on
                      'main_section' // slug name of section this shows up in
                    );

	add_settings_field( PLUGIN_PREFIX . 'text_pass',
                      'Password Text Input',
                      'setting_pass_fn',
                      __FILE__,
                      'main_section'
                    );

	add_settings_field( PLUGIN_PREFIX . 'text_area',
                      'Large Textbox!',
                      'setting_textarea_fn',
                      __FILE__,
                      'main_section'
                    );

  add_settings_field( PLUGIN_PREFIX . 'chk1',
                      'A Checkbox',
                      'setting_chk1_fn',
                      __FILE__,
                      'main_section');

  add_settings_field( PLUGIN_PREFIX . 'option_set1',
                      'Select Shape',
                      'setting_radio_fn',
                      __FILE__,
                      'main_section'
                    );

  add_settings_field( PLUGIN_PREFIX . 'textarea_one',
                      'Home Page Boxes',
                      'setting_visual_fn',
                      __FILE__,
                      'main_section'
                    );

  add_settings_field( PLUGIN_PREFIX . 'drop_down1',
                      'Select Color',
                      'setting_dropdown_fn',
                      __FILE__,
                      'main_section'
                    );

  add_settings_field( PLUGIN_PREFIX . 'chk2',
                      'Restore Defaults Upon Reactivation?',
                      'setting_chk2_fn',
                      __FILE__,
                      'main_section'
                    );
}

// Add sub page to the Settings Menu
function sampleoptions_add_page_fn() {
  // add optiont to main settings panel
  add_options_page( PLUGIN_TITLE . 'Extra Settings', // text for title tags
                    PLUGIN_TITLE . 'Settings', // text for menu item
                    'manage_options', // capability
                    plugin_dir_path( __FILE__ ), // slug for the page - this will use the main plugin folder name
                    'options_page_fn', // callback function to output the page content
                    null // position the menu item will appear. MUST be an integer. Use NULL if you want it at the bottom of the list, 0 for the top.
                  );

}

// ************************************************************************************************************

// Callback functions
// Init plugin options to white list our options
// Section HTML, displayed before the first option
function section_text_fn() {
	echo '<p>Below are some examples of different option controls.</p>';
}

// TEXT FIELD - Name: PLUGIN_PREFIX.options[text_string]
function setting_string_fn() {
	$options = get_option( PLUGIN_PREFIX . 'options' );
	echo '<input id="' . PLUGIN_PREFIX . 'text_string" name=' . PLUGIN_PREFIX . 'options[text_string]" size="40" type="text" value="' . $options['text_string'] . '" />';
}

// PASSWORD-TEXTBOX - Name: PLUGIN_PREFIX.options[text_pass]
function setting_pass_fn() {
	$options = get_option( PLUGIN_PREFIX . 'options' );
	echo '<input id="' . PLUGIN_PREFIX . 'text_pass" name="' . PLUGIN_PREFIX . 'options[text_pass]" size="40" type="password" value="' . $options['text_pass'] . '" />';
}

// TEXTAREA - Name: PLUGIN_PREFIX.options[text_area]
function setting_textarea_fn() {
	$options = get_option( PLUGIN_PREFIX . 'options' );
	echo '<textarea id="' . PLUGIN_PREFIX . 'text_area" name="' . PLUGIN_PREFIX . 'options[text_area]" rows="7" cols="50" type="textarea">' . $options['text_area'] . '</textarea>';
}

// CHECKBOX - Name: PLUGIN_PREFIX.options[chk1]
function setting_chk1_fn() {
	$options = get_option( PLUGIN_PREFIX . 'options' );
	if( isset( $options['chk1'] ) ? $checked = ' checked="checked" ' : $checked = '' );
	echo '<input ' . $checked . ' id="' . PLUGIN_PREFIX . 'chk1" name="' . PLUGIN_PREFIX . 'options[chk1]" type="checkbox" />';
}

// RADIO-BUTTON - Name: PLUGIN_PREFIX.options[option_set1]
function setting_radio_fn() {
	$options = get_option( PLUGIN_PREFIX . 'options' );
	$items = array( 'Square', 'Triangle', 'Circle');
	foreach( $items as $item ) {
		$checked = ( $options['option_set1'] == $item ) ? ' checked="checked"' : '';
		echo '<label><input' . $checked . ' value="' . $item . '" name="' . PLUGIN_PREFIX . 'options[option_set1]" type="radio" />' . $item . '</label><br />';
	}
}

// WYSIWYG Visual Editor - Name: PLUGIN_PREFIX.options[textarea_one]
function setting_visual_fn() {
	$options = get_option( PLUGIN_PREFIX . 'options' );
	$args = array( 'textarea_name' => PLUGIN_PREFIX . 'options[textarea_one]');
	wp_editor( $options['textarea_one'], 'textarea_one', $args );

  // Add another text box - Name: PLUGIN_PREFIX.options[textarea_two]
  $args = array( 'textarea_name' => PLUGIN_PREFIX . 'options[textarea_two]');
  wp_editor( $options['textarea_two'], 'textarea_two', $args );
}

// DROP-DOWN-BOX - Name: PLUGIN_PREFIX.options[dropdown1]
function setting_dropdown_fn() {
	$options = get_option( PLUGIN_PREFIX . 'options' );
	$items = array( 'Red', 'Green', 'Blue', 'Orange', 'White', 'Violet', 'Yellow' );
	echo '<select id="drop_down1" name="' . PLUGIN_PREFIX . 'options[dropdown1]">';
	foreach( $items as $item ) {
		$selected = ( $options['dropdown1'] == $item ) ? ' selected="selected"' : '';
		echo '<option value="' . $item . '"' . $selected . '>' . $item . '</option>';
	}
	echo '</select>';
}

// CHECKBOX - Name: PLUGIN_PREFIX.options[chk2]
function setting_chk2_fn() {
	$options = get_option( PLUGIN_PREFIX . 'options' );
	if( isset( $options['chk2'] ) ? $checked = ' checked="checked"' : $checked = '' );
	echo '<input' . $checked . ' id="' . PLUGIN_PREFIX . 'chk2" name="' . PLUGIN_PREFIX . 'options[chk2]" type="checkbox" />';
}

// Display the admin options page
function options_page_fn() {
?>
	<div class="wrap">
		<h2>My Example Options Page</h2>
		Some optional text here explaining the overall purpose of the options and what they relate to etc.
		<form action="options.php" method="post">
					<?php
if ( function_exists( 'wp_nonce_field' ) )
	wp_nonce_field( -1, PLUGIN_PREFIX_DASH . 'name-nonciness' );
  settings_fields( PLUGIN_PREFIX . 'options' );
  do_settings_sections( __FILE__ ); ?>
		<p class="submit">
			<input name="Submit" type="submit" class="button-primary" value="<?php esc_attr_e( 'Save Changes' ); ?>" />
		</p>
		</form>
	</div>
<?php
}

// Validate user data for some/all of your input fields. Accepts an array, return a sanitized array.
function plugin_options_validate( $input ) {
	// Check our fields contain no HTML tags - if so strip them out
	$input['text_string']  = sanitize_text_field( $input['text_string'] );
  $input['textarea_one'] = wp_filter_nohtml_kses( $input['textarea_one'] );
	$input['textarea_two'] = wp_filter_nohtml_kses( $input['textarea_two'] );
	return $input; // return validated input
}