WordPress theme options

Update: There is a better solution for storing options using Settings API.
Or use Options framework:

The old hard way:

Based on this article about theme settings including some improvements:

  • including bug fixes with default value for select;
  • using native wordpress styles;
  • making code more simple;
  • adding some examples;

How it looks like:

Code to insert into functions.php:

<?php
 
$themename = 'Theme name';
$shortname = 'themeoption';
 
/*"name" - This is the title for this particular option.
"desc" - A description for the option.
"id" - We will be using this to retrieve the variable value in the theme files.
"type" - This defines what type of option it is. You can have such types of input: text, checkbox, textarea,  select. 
"default" - This is the 'default' setting for the option. For example, if this was a checkbox, you could enter true or false here. True would be checked, and false would be unchecked.*/
 
$options = array (
 
array( "name" => "Text input example",
	"desc" => "Text input description example. Example: <code>example</code>",
	"id" => $shortname."_text",
	"type" => "text",
	"default" => "default"),
 
array( "name" => "Checkbox example",
	"desc" => "Checkbox description example.",
	"id" => $shortname."_checkbox",
	"type" => "checkbox",
	"default" => "true" // can be "false"
	),
 
array( "name" => "Select example",
	"desc" => "Select description example.",
	"id" => $shortname."_select",
	"type" => "select",
	"options" => array("red", "green", "blue"),
	"default" => "green"),
 
array( "name" => "Textare example",
	"desc" => "Textare description example.",
	"id" => $shortname."_textarea",
	"type" => "textarea",
	"default" => "textarea default"),
 
);
 
 
function theme_add_options() {
	global $themename, $shortname, $options;
	if ( $_GET['page'] == basename(__FILE__) ) {
		if ( 'save' == $_REQUEST['action'] ) {
			foreach ($options as $value) {
				update_option( $value['id'], trim( $_REQUEST[ $value['id'] ] ) );
			}
			foreach ($options as $value) {
				if( isset( $_REQUEST[ $value['id'] ] ) ) {
					update_option( $value['id'], trim( $_REQUEST[ $value['id'] ] ) );
				} else {
					delete_option( $value['id'] );
				}
			}
			header("Location: themes.php?page=functions.php&saved=true");
			die;
		} else if( 'reset' == $_REQUEST['action'] ) {
			foreach ($options as $value) {
				delete_option( $value['id'] );
			}
			header("Location: themes.php?page=functions.php&reset=true");
			die;
		}
	}
	add_theme_page($themename." settings", $themename." settings", 'edit_themes', basename(__FILE__), 'theme_admin');
}
 
function theme_admin() {
 
global $themename, $shortname, $options;
 
if ( $_REQUEST['saved'] ) echo '<div id="message" class="updated fade"><p><strong>Settings for '.$themename.' were saved.</strong></p></div>';
if ( $_REQUEST['reset'] ) echo '<div id="message" class="updated fade"><p><strong>Settings for '.$themename.' were cleared.</strong></p></div>';
 
?>
<div class="wrap">
<h2>Settings for <?php echo $themename; ?></h2>
 
<form method="post">
<table class="widefat">
<?php foreach ($options as $value) {
	switch ( $value['type'] ) {
 
case 'text':
?>
 
<tr>
	<td>
		<label for="<?php echo $value['id']; ?>"><strong><?php echo $value['name']; ?></strong><br />
		<small><?php echo $value['desc']; ?></small></label>
	</td>
	<td>
		<input size="50" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" value="<?php if ( get_settings( $value['id'] ) != "") { echo stripslashes(get_settings( $value['id'] )); } else { echo $value['default']; } ?>" />
	</td>
</tr>
 
 
<?php
break;
 
case 'textarea':
?>
 
<tr>
	<td>
		<label for="<?php echo $value['id']; ?>"><strong><?php echo $value['name']; ?></strong><br />
		<small><?php echo $value['desc']; ?></small></label>
	</td>
	<td>
		<textarea name="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" cols="50" rows="10"><?php if ( get_settings( $value['id'] ) != "") { echo stripslashes(get_settings( $value['id'] )); } else { echo $value['default']; } ?></textarea>
	</td>
</tr>
 
<?php
break;
 
case 'select':
?>
<tr>
	<td>
		<label for="<?php echo $value['id']; ?>"><strong><?php echo $value['name']; ?></strong><br />
		<small><?php echo $value['desc']; ?></small></label>
	</td>
	<td>
		<select name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>">
		<?php foreach ($value['options'] as $option) { ?>
			<?php if( get_settings( $value['id'] ) ) { ?>
				<option<?php if ( get_settings( $value['id'] ) == $option) { echo ' selected="selected"'; } ?>><?php echo $option; ?></option>
			<?php } else { ?>
				<option<?php if ($option == $value['default']) { echo ' selected="selected"'; } ?>><?php echo $option; ?></option>
			<?php } ?>
		<?php } ?>
		</select>
	</td>
</tr>
 
 
<?php
break;
 
case "checkbox":
?>
<tr>
	<td>
		<label for="<?php echo $value['id']; ?>"><strong><?php echo $value['name']; ?></strong><br />
		<small><?php echo $value['desc']; ?></small></label>
	</td>
	<td>
		<?php 
		if( get_settings($value['id']) ){
			$checked = 'checked="checked"';
		}else{
			$checked = '';
		}
		?>
		<input type="checkbox" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" value="true" <?php echo $checked; ?> />
	</td>
</tr>
 
<?php break;
	}
}
?>
 
<tr>
<td style="width:28%;">&nbsp;</td>
<td>
<input name="save" type="submit" class="button-primary" value="Save settings" />
<input type="hidden" name="action" value="save" />
</td>
 
</table>
</form>
 
<form method="post">
<p class="submit">
<input name="reset" type="submit" class="button" value="Reset settings" />
<input type="hidden" name="action" value="reset" />
</p>
</form>
</div>
<?php
}
 
add_action('admin_menu', 'theme_add_options');

Code to insert into header.php:

<?php
global $options;
foreach ($options as $value) {
	global $$value['id'];
    if (get_settings( $value['id'] ) === FALSE) {
		$$value['id'] = $value['default'];
	} else {
		$$value['id'] = get_settings( $value['id'] ); 
	}
}
?>

And now you can get every option anywhere in the theme like this:

<?php
echo $themeoption_text;
echo $themeoption_checkbox;
echo $themeoption_select;
echo $themeoption_textarea;
?>

You can download archived code.

Leave a Reply

Your email address will not be published. Required fields are marked *