Wordpress Admin Options


Lets add some admin options that we need to add posts and pages like post thumbnails, comment form, search form, etc. Create another page to add these options to the admin dashboard rather than stuffing everything in a single page and use require() function to include it in your functions.php file.

<?php
$options = get_option('post_formats');
$formats = array('aside','gallery','link','image','quote','status','video','audio','chat');

$output = array();
foreach ($formats as $format){
	$output[] = (@$options[$format] == 1 ? $format : '');
}
if(!empty($options)){
	add_theme_support('post-formats', $output);
}	
$header = get_option( 'custom_header' );
if( @$header == 1 ){
	add_theme_support( 'custom-header' );
}
$background = get_option('custom_background');
if( @$background == 1 ){
	add_theme_support('custom-background');
}
function theme_primary_menu(){
	register_nav_menu('primary','Header Navigation Menu');
}
add_action('after_setup_theme','theme_primary_menu');

function theme_secondary_menu(){
	register_nav_menu('secondary','Footer menu');
}

add_action('after_setup_theme','theme_secondary_menu');

add_theme_support('post-thumbnails');

add_theme_support( 'html5', array(
	'search-form', 'comment-form', 'comment-list', 'gallery', 'caption',
	) 
);

add_theme_support('post-formats') function will add post formats options in the page and post forms which will make it easier to display those contents on the basis of their contents.

You can add options to customize the header and background of your themes simply by adding those options in add_theme_support() hook as well.

You can also register multiple navigation locations to make it easy to display such navigations in your page.

add_theme_support('post-thumbnails') will allow you to add featured image to your posts and pages.

Adding html5 contents will let you add search form, comment form, comment list, gallery and captions.

None of these will be available by default on wordpress installation. You can even add a settings menu in order to enable or disable these options via wordpress admin dashboard. In that case, you'll need to register theme sttings using wordpress hook and it's better to create another page for these functions and include it via functions.php. Lets have a look into it.

<?php 
function custom_admin_page(){
	add_menu_page('Custom Theme Options','Theme Options','manage_options','customize','admin_options_callback','dashicons-universal-access',100);	
	add_submenu_page('customize','Custom Theme Options', 'Theme Settings', 'manage_options', 'customize','admin_options_callback');
	
	add_action('admin_init','theme_custom_settings');
}
// trigger function
add_action('admin_menu','custom_admin_page');

function admin_options_callback(){
	require_once(get_template_directory().'/custom-admin-options.php');
}	

A function is created named custom_admin_page() where wordpress hook add_menu_page() is added. The parameters for this function areas follows.

  • page title - The string to be added in the <title> tag inside the <head> element of the settings page.
  • menu title - The string to be displayed in the side menu of wordpress dashboard.
  • usertype - The user type who can access this menu option.
  • slug - The slug that's passed to the urlwhile this settings page is queried.
  • call back function - The call back function that'll be initialized while this page is queried that'll define further sequence of actions.
  • icon - The name of the icon that's going to be displayed before the menu title string in side menu.
  • sequence number - The serial number that defines the position of this menu title in the side menu. Serial number below 99 places it in between the regular menu titles in the side menu we see in wordpress dashboard while the same higher than 99 places it below the regular ones.

add_submenu_page() allows you to add more settings pages under the same menu title but here the same link is added to give a regular look of wordpress. You might have noticed that under each menu title, the first submenu is for the same function that the main menu title is added for in wordpress. You can add more such submenus using the same hook but different page title, slug and callback function. The parameters for the wordpress hook add_submenu_page() are:

  • parent slug - The slug of the parent menu title under which the submenu is going to be placed.
  • page title - The string to be added in the <title> tag inside the <head> element of the settings page.
  • usertype - The user type who can access this menu option.
  • slug - The slug that's passed to the urlwhile this settings page is queried.
  • call back function - The call back function that'll be initialized while this page is queried that'll define further sequence of actions.

add_action('admin_init') will initialize another function that'll define the options you allow the user to enable or disable while add_action('admin_menu') will add those menu options in the dashboard sidemenu. Another page is added using the callback function that'll display all the form fields we register and create using this settings function. Lets have a look at the setings function then.

function theme_custom_settings(){
	register_setting('themes_support','post_formats');
	add_settings_section('theme-options','Theme Settings','theme_options','customize');
	add_settings_field('post-formats','Post Formats','theme_post_formats','customize','theme-options');

	register_setting('themes_support','custom_header');
	add_settings_field('custom-header','Custom Header','custom_header','customize','theme-options');
	
	register_setting('themes_support','custom_background');
	add_settings_field('custom-background','Custom Background','custom_background','customize','theme-options');	
}

function theme_options(){
	echo 'Activate and Deactive post format options';
}

function theme_post_formats(){
	$options = get_option('post_formats');
	$formats = array('aside','gallery','link','image','quote','status','video','audio','chat');
	$output = '';
	foreach ($formats as $format){
		$checked = (@$options[$format] == 1 ? 'checked' : '');
		$output.= '<label><input type="checkbox" id="'.$format.'" name="post_formats['.$format.']" value="1" '.$checked.' /> '.$format.'</label><br />';
	}
	echo $output;
}

function custom_header(){
	$options = get_option('custom_header');
	$checked = (@$options == 1 ? 'checked' : '');
	echo 
	'<label>
	<input type="checkbox" id="custom_header" name="custom_header" value="1" '.$checked.' /> 
	Activate Custom Header 
	</label>';
}

function custom_background(){
	$options = get_option('custom_background');
	$checked = (@$options == 1 ? 'checked' : '');
	echo 
	'<label>
	<input type="checkbox" id="custom_background" name="custom_background" value="1" '.$checked.' /> 
	Activate Custom Background 
	</label>';
}	
  • register_settings() hook will register a settings group where you can add multiple settings options. First parameter defines the settings group while the other defines the name of the setting.
  • add_settings_section() will add a settings section where the parameters are section id, title to be displayed on the page, callback function for the section and the page where they are being displayed. You can leave the callback function for the section empty as well.
  • add_settings_field() will add the settings options to the page where the parameters are the form field id, title of the form fields, call back function for the fields, page where they are being displayed and the section where they are being added.

You can add multiple settings options using the same hook in the same pageas shown above in the example where options for enabling header and background customization are also added.

You can display messages regarding the settings section using the callback function for add_settings_field() as we added a message there.

You can add settings fields using the callback functions for settings field. It's totally upto you how you want those fields be displayed and how you want to pass values to those fields. Here, we added checkboxes for enabling all of those options with value assigned 1 to all checked boxes and 0 to others and displayed that as they are using ternary operators.

Now, all the settings functions are done, we can add the forms to the page we included for the function admin_options_callback(). The only thing you add here are the wordpress hooks that'll render the contents added via admin hooks so far.

<?php settings_errors() ?>
<form method="post" action="options.php">
	<?php settings_fields('themes_support'); ?>
	<?php do_settings_sections('customize'); ?>
	<?php submit_button(); ?>
</form>	

Here, the first thing you'll need to add is a function settings_errors(), that'll display the success or failure message on each change on this page.

The processing of form contents is done in options.php file by default in wordpress so you'll point the form to that page. settings_field() requires the parameter namely the group of settings you want to display the form fields for.

do_settings_sections() requires the page name as parameter where these contents are targeted to be displayed.

Finally, submit_button() will add a submit button for the form to process the codes on click.

In this way, you can register and create as many dashboard menus, submenus and pages as you need for the theme you're developing.