WordPress custom settings section

With the settings api it’s relatively easy to add custom settings to a theme or plugin in WordPress. Just add the snippet below to your functions.php or plugin file and replace the text in the first lines to reflect your custom settings.

  • You can set a short description on line 9
  • The settings section where it will show up (general, reading etc.) on line 14
  • The settings section title can be set on line 15
  • From line 18 you can add individual settings by adding a setting array with id, name, type and optional description. Just add other types to the switch in the custom_settings_callback_function() when you need them.
<?php

// ------------------------------------------------------------------
// Add custom settings to WordPress Settings page
// ------------------------------------------------------------------

// Custom settings section callback
function custom_settings_section_callback_function() {
	echo '<p>Intro text for custom settings section</p>'; // HTML (e.g. short intro/description) above the section settings
}

function custom_settings_api_init() {
	// Define the settings section and individual fields
	$section = 'general'; // Settings section to be appended to (general, writing, reading etc.)
	$sectiontitle = 'Custom settings section title'; // Title above your custom settings
	$settingsfields = array ( 
		// id, verbose name, type(text/textarea/checkbox), [explanation] 
		array('option_1', 'Option 1', 'text', 'Optional explanation'), 
		array('option_2', 'Option 2', 'textarea'),
		array('option_3', 'Option 3', 'checkbox', 'Checkbox explanation'),
	);

					
	add_settings_section(
		'custom_settings_section',
		$sectiontitle,
		'custom_settings_section_callback_function',
		$section
	);

	// Loop through and set the settings fields
	foreach ($settingsfields as $settings_field) {	
		add_settings_field(
			$settings_field[0],
			$settings_field[1],
			'custom_settings_callback_function',
			$section,
			'custom_settings_section',
			array(
				// The $args; id, type and optional explanation
				$settings_field[0],
				$settings_field[2],
				$settings_field[3]
			)
		);
		register_setting($section, $settings_field[0], 'esc_attr');
	}

}

add_action( 'admin_init', 'custom_settings_api_init' );


// Generic callback function for custom settings
function custom_settings_callback_function( $args ) {
	$explanation = !empty($args[2]) ? $args[2] : '';
	switch ($args[1]) {
		case 'checkbox':
			echo '<input name="'.$args[0].'" id="'.$args[0].'" type="checkbox" value="1" ' . checked( 1, get_option( $args[0] ), false ) . ' /> '.$explanation;
			break;
		case 'text':
			echo '<input name="'.$args[0].'" id="'.$args[0].'" type="text" value="'.get_option($args[0]).'"/> '.$explanation;
			break;
		case 'textarea':
			echo '<textarea name="'.$args[0].'" id="'.$args[0].'" />'.get_option($args[0]).'</textarea> '.$explanation;
			break;
	}
}

 

 

WordPress General Settings screenshot
Our custom settings will show up at the bottom of the General section, just as we told WordPress to.

Leave a Reply