Create An Advanced Theme Options Page in WordPress: Day 3

Day three of Creating an Advanced Theme Options Page in WordPress is here! Today we’ll be taking the options we made yesterday, styling them and creating the actual page that displays them in the WordPress backend.

Creating the options page

The first thing we’re going to do today is create the actual page that shows the options, which we can do with the following code, pasted straight after where we left off yesterday, in the functions.php file:

	);

function mytheme_add_admin() {

    global $themename, $shortname, $options;

    if ( $_GET['page'] == basename(__FILE__) ) {

        if ( 'save' == $_REQUEST['action'] ) {

                foreach ($options as $value) {
                    update_option( $value['id'], $_REQUEST[ $value['id'] ] ); }

                foreach ($options as $value) {
                    if( isset( $_REQUEST[ $value['id'] ] ) ) { update_option( $value['id'], $_REQUEST[ $value['id'] ]  ); } else { delete_option( $value['id'] ); } }

                header("Location: themes.php?page=theme-options.php&saved=true");
                die;

        } else if( 'reset' == $_REQUEST['action'] ) {

            foreach ($options as $value) {
                delete_option( $value['id'] ); }

            header("Location: themes.php?page=theme-options.php&reset=true");
            die;

        } else if ( 'reset_widgets' == $_REQUEST['action'] ) {
            $null = null;
            update_option('sidebars_widgets',$null);
            header("Location: themes.php?page=theme-options.php&reset=true");
            die;
        }
    }

    add_theme_page($themename." Options", "Bibliteca Options", 'edit_themes', basename(__FILE__), 'mytheme_admin');

}

function mytheme_admin() {

    global $themename, $shortname, $options;

    if ( $_REQUEST['saved'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' '.__('settings saved.','thematic').'</strong></p></div>';
    if ( $_REQUEST['reset'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' '.__('settings reset.','thematic').'</strong></p></div>';
    if ( $_REQUEST['reset_widgets'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' '.__('widgets reset.','thematic').'</strong></p></div>';

?>

Styling the elements

The options page is actually just a table, with each element a new row, split into columns, so first, we need to start the table:

<div="wrap">

<?php if ( function_exists('screen_icon') ) screen_icon(); ?>

<h2><?php echo $themename; ?> Options</h2>

<form method="post" action="">

<table class="form-table">

<?php foreach ($options as $value) {

Next, we’re going to style each element, one by one. As I explained yesterday, we can do this once and the PHP will apply the styling multiple times.

Styling the small text area

This code must go underneath the code above, otherwise you’ll get lots of errors! As you can see, it’s just a table, echoing the values we entered yesterday:

switch ( $value['type'] ) {
		case 'text':
		?>
		<tr valign="top">
			<th scope="row"><label for="<?php echo $value['id']; ?>"><?php echo __($value['name'],'thematic'); ?></label></th>
			<td>
				<input name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" value="<?php if ( get_option( $value['id'] ) != "") { echo get_option( $value['id'] ); } else { echo $value['std']; } ?>" />
				<?php echo __($value['desc'],'thematic'); ?>

			</td>
		</tr>

Styling the large text area

This too goes underneath the code above, and is much the same idea as before.

<?php
		break;

		case 'textarea':
		$ta_options = $value['options'];
		?>
		<tr valign="top">
			<th scope="row"><label for="<?php echo $value['id']; ?>"><?php echo __($value['name'],'thematic'); ?></label></th>
			<td><textarea name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" cols="<?php echo $ta_options['cols']; ?>" rows="<?php echo $ta_options['rows']; ?>"><?php
				if( get_option($value['id']) != "") {
						echo __(stripslashes(get_option($value['id'])),'thematic');
					}else{
						echo __($value['std'],'thematic');
				}?></textarea><br /><?php echo __($value['desc'],'thematic'); ?></td>
		</tr>

Styling the title

The title is breaking from the norm here by ending the table, displaying the title’s description and then restarting the table so the rest of the elements display fine:

<?php
		break;

		case 'nothing':
		$ta_options = $value['options'];
		?>
		</table>
			<?php echo __($value['desc'],'thematic'); ?>
		<table class="form-table">

Styling the checkbox

<?php
		break;

		case 'radio':
		?>
		<tr valign="top">
			<th scope="row"><?php echo __($value['name'],'thematic'); ?></th>
			<td>
				<?php foreach ($value['options'] as $key=>$option) {
				$radio_setting = get_option($value['id']);
				if($radio_setting != ''){
					if ($key == get_option($value['id']) ) {
						$checked = "checked=\"checked\"";
						} else {
							$checked = "";
						}
				}else{
					if($key == $value['std']){
						$checked = "checked=\"checked\"";
					}else{
						$checked = "";
					}
				}?>
				<input type="radio" name="<?php echo $value['id']; ?>" id="<?php echo $value['id'] . $key; ?>" value="<?php echo $key; ?>" <?php echo $checked; ?> /><label for="<?php echo $value['id'] . $key; ?>"><?php echo $option; ?></label><br />
				<?php } ?>
			</td>
		</tr>
		<?php
		break;

		case 'checkbox':
		?>
		<tr valign="top">
			<th scope="row"><?php echo __($value['name'],'thematic'); ?></th>
			<td>
				<?php
					if(get_option($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; ?> />
				<label for="<?php echo $value['id']; ?>"><?php echo __($value['desc'],'thematic'); ?></label>
			</td>
		</tr>

Ending the options page

<?php
		break;

		default:

		break;
	}
}
?>

	</table>

	<p class="submit">
		<input name="save" type="submit" value="<?php _e('Save changes','thematic'); ?>" />
		<input type="hidden" name="action" value="save" />
	</p>
</form>
<form method="post" action="">
	<p class="submit">
		<input name="reset" type="submit" value="<?php _e('Reset','thematic'); ?>" />
		<input type="hidden" name="action" value="reset" />
	</p>
</form>

<p>Biblioteca theme.</p>
</div>
<?php
}

add_action('admin_menu' , 'mytheme_add_admin'); 

?>

With all the code above in our functions.php file, we can end the table, add save and reset buttons and close up all the loose ends. With that, we’re done creating the options page itself. All that is left to do is merge the functions-options.php and functions.php file. Make sure you first create a backup of the original functions.php file before merging the two files. With the two files merged, refresh the WordPress backend and you should see your new options page! If you’re getting any errors, make sure you’ve put the code outside closing

?>

and wrapped your own code in

<?php and ?>

. If that doesn’t fix it, restore the original file and leave a comment with your problem, with as much detail as possible.

Wrapping up

If you haven’t already noticed, the download that includes all of the code used in today’s tutorial is available at the top of the page, to save you copying and pasting it. Tomorrow we’ve got the exciting job of implementing all of the options we’ve created, and until then, why not [f], leave a comment and subscribe by RSS!

You should follow me on Twitter