The Options Form

The last piece of the theme options puzzle is a form that will allow your users to select or enter the options they want. The code below is a general-purpose form builder, which I'll call the options form toolkit. It will loop over your $childoptions array and construct an appropriate form element for each one, pre-filling it with either the saved value if it exists, or the default value provided in $childoptions if it doesn't.

It's a big function, but there's nothing terribly complicated going on here. Because it can be used essentially without modification, I'll skip going over what every line does:

chapter_07/v1/wicked/library/options.php (excerpt)

function childtheme_admin() {

global $childthemename, $childshortname, $childoptions;

// Saved or Updated message if ( $_REQUEST['saved'] ) echo '<div id="message" class="updated fade"> ^•<p><strong>'.$childthemename.' settings saved.</strong></p></div>';

if ( $_REQUEST['reset'] ) echo '<div id="message" class="updated fade"> ^•<p><strong>'.$childthemename.' settings reset.</strong></p></div>';

<div class="wrap">

<h2><?php echo $childthemename; ?> Options</h2> <form method="post">

<?php wp_nonce_field('childtheme-save'); ?> <table class="form-table">

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

// Output the appropriate form element switch ( $value['type'] ) {

<th scope="row"><?php echo $value['name']; ?>:</th> <td>

<input name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="text"

value="<?php echo stripslashes(get_option( $value['id'],

<?php echo $value['desc']; ?> </td> </tr> <?php break;

<th scope="row"><?php echo $value['name']; ?></th> <td>

<select name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>"> <option value="">--</option>

<?php foreach ($value['options'] as $key=>$option) { if ($key == get_option($value['id'], $value['std']) ) {

$selected = "selected=\"selected\""; } else {

<option value="<?php echo $key ?>" <?php echo $selected ?>> ^<?php echo $option; ?></option> <?php } ?> </select>

<?php echo $value['desc']; ?> </td> </tr> <?php break;

case 'textarea':

<th scope="row"><?php echo $value['name']; ?>:</th> <td>

<?php echo $value['desc']; ?> <textarea name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" cols="<?php echo $ta_options['cols']; ?>" rows="<?php echo $ta_options['rows']; ?>"><?php echo stripslashes(get_option($value['id'], $value['std'])); ?></textarea> </td> </tr> <?php break;

<th scope="row"><?php echo $value['name']; ?>:</th> <td>

<?php foreach ($value['options'] as $key=>$option) { if ($key == get_option($value['id'], $value['std']) ) {

$checked = "checked=\"checked\""; } else { $checked = "";

<input type="radio"

name="<?php echo $value['id']; ?>" value="<?php echo $key; ?>" <?php echo $checked; ?> /><?php echo $option; ?> <br /> <?php } ?>

<?php echo $value['desc']; ?> </td> </tr> <?php break;

<th scope="row"><?php echo $value['name']; ?></th> <td> <?php if(get_option($value['id'])){

$checked = "checked=\"checked\""; } else {

<input type="checkbox"

name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" value="true" <?php echo $checked; ?>

<?php echo $value['desc']; ?> </td> </tr> <?php break;

default: break;

<p class="submit">

<input name="save" type="submit" value="Save changes" ^class="button-primary" />

<input type="hidden" name="action" value="save" /> </p>

<form method="post">

<?php wp_nonce_field('childtheme-reset'); ?> <p class="submit">

<input name="reset" type="submit" value="Reset" />

<input type="hidden" name="action" value="reset" /> </p> </form>

<p><?php _e('For more information ... ', 'thematic'); ?></p>

Near the bottom of the snippet, there's a paragraph that you can edit to add some information about your theme, including links to your documentation pages.

With this code in place, our theme options page will now load without error; we'll see a form with all the options specified in our $childoptions array, as shown in Figure 7.2.

Show Header Image D Show an image in the header. Replace the header.jpg file found in the /wickedVimages/ folder with the desired image.

For more information about this theme, check out Build Your Own Wicked WordPress Themes, If you have any questions, visit the SilePoint Forums,

Figure 7.2. The final theme options page

Thanks to the toolkit, the only step required to add a new option to your theme is to add it to the $childoptions array. The construction of the form and all the communication with the WordPress database will be handled transparently. Go ahead: give it a try. Add a new option to your $childoptions array and watch it appear in the form, complete with save and reset functionality.

This options form toolkit also plugs into the default WordPress styling, so our options page blends in nicely with the rest of the WordPress dashboard.

Was this article helpful?

0 0

Post a comment