WordPress: Add theme options in a twenty eleven child theme

For this blog, I’ve created a child theme for twenty eleven. There are a few changes I’ve made but might want to revert some day. So I wanted to add a few options to the twenty eleven “Theme Options” page. Since until now all changes I’ve made are related to how posts are displayed, I also wanted them to be grouped in a “Posts” section.

First in order to be able to add options, you need to have one of your functions triggered before any other hook when a user accesses the admin area, by adding the following to functions.php in the child theme:

add_action( 'admin_init', 'benohead_theme_options_init',10000);

The 10000 is just there to make sure that we are called after twentyeleven has added the general section to theme options i.e. so that our section doesn’t come first.

Now we need to define the function benohead_theme_options_init. We’ll add a section to the theme options, add a setting to this section and define a few callback functions:

function benohead_theme_options_init() {
	// Register our settings field group
	add_settings_section(
		'benohead-posts', // Unique identifier for the settings section
		'Posts', // Section title (we don't want one)
		'__return_false', // Section callback (we don't want anything)
		'theme_options' // Menu slug, used to uniquely identify the page; see twentyeleven_theme_options_add_page()
	);

	// Register our individual settings fields
	add_settings_field(
		'benohead_posts_hideauthor', // id
		'Hide author', // setting title
		'benohead_posts_hideauthor_setting', // display callback
		'theme_options', // settings page
		'benohead-posts' // settings section
	);

	add_filter('twentyeleven_theme_options_validate', 'benohead_theme_options_validate', 10, 3);
	add_filter('twentyeleven_default_theme_options', 'benohead_default_theme_options');
}

In the first add filter, the parameters 10 and 3 mean: Priority 10 and it accepts 3 parameters (otherwise the two last parameters in the call are null).

Now we’ll first define the function displaying our new setting:

function benohead_posts_hideauthor_setting() {
	$options = get_option('twentyeleven_theme_options');
	$checked = '';
	if ($options[benohead_posts_hideauthor] == 'yes') {
		$checked = ' CHECKED';	
	}
	echo '<input type="checkbox" name="twentyeleven_theme_options[benohead_posts_hideauthor]" value="yes"' . $checked . ' />';	
}

This will display a checkbox linked to the theme option benohead_posts_hideauthor which is part of twentyeleven_theme_options.

Now we need to define the callback function twentyeleven_theme_options_validate which is called when the user saves the theme options:

function benohead_theme_options_validate( $output, $input, $defaults ) {
	if ( isset( $input['benohead_posts_hideauthor'] ) ) 
		$output['benohead_posts_hideauthor'] = $input['benohead_posts_hideauthor'];
	return $output;
}

It basically copies our setting from the input to the output without additional validation.

Our last step is to define a default value for our setting in the following callback function:

function benohead_default_theme_options($default_theme_options) {
	$default_theme_options['benohead_posts_hideauthor'] = '';
	return $default_theme_options;
}

Now you can use the new option in your code:

		$options = get_option('twentyeleven_theme_options');
		if ($options[benohead_posts_hideauthor] == 'yes') {
				...
		}

3 thoughts on “WordPress: Add theme options in a twenty eleven child theme

  1. Thanks for this post, I tried it and it works. I’ve been trying to add a custom CSS area to my child theme, it works fine, but I’ve been unable to get it to display on the theme options page like you have, best I can do is to display it’s own link.

    Could you take a look and let me know what I need to change? http://pastebin.com/zVDvm1hE

    Thanks for any help

    1. Hi Scott,

      In order to have it displayed in the theme options, you need to use add_settings_section and add_settings_field. If you use add_menu_page, it will add a separate menu item.
      Please also keep in mind that the theme options are theme specific. Here I assume the twentyeleven theme (or a child theme) is used. If I switch to a different theme, my options will not be visible anymore.
      So if what you’re doing is writing a plugin which is independent of the theme, the way with the additional menu point is probably the best solution.

Leave a Reply

Your email address will not be published.