Creating an Options Form

Now that you have your options in place, you need to build the form that will let users edit them. Figure 7-7 shows the form for Simplex Flex. The code to create this form is shown in Listing 7-30.

Figure 7-7. The Simplex Flex options screen

Listing 7-30. The theme options form function simplex_options_page() { ?> <div class="wrap"> <h2>Simplex Flex Options</h2> form method="post" action="options.php">

<?php settings_fields('simplex_options'); ?> <?php $options = get_option('simplex_options'); ?> <table class="form-table"> <tr valign="top"> <th scope="row">Width</th>

<td><label><input type="radio" name="simplex_options[width]" <?php checked('fixed', $options['width']); ?> value="fixed" /> Fixed</label>

<label><input type="radio" name="simplex_options[width]" <?php checked('flex', $options['width']); ?> value="flex" /> Flex</label> </td>

</tr> <tr valign="top"> <th scope="row">Columns</th>

<td><label><input type="radio" name="simplex_options[cols]" <?php checked('left2', $options['cols']); ?> value="left2" /> 2 columns, sidebar left</label>

<label><input $options['cols']); ?> <label><input $options['cols']); ?> </td>

<tr valign="top"> <th scope="row">Header text and image</th>

<td><label><input type="checkbox" name="simplex_options[sitename]" <?php checked('yes', $options['sitename']); ?> value="yes" />

Display site name and description superimposed over the header image?</label>

<tr valign="top"> <th scope="row">Custom styles</th> <td><label>Enter your CSS:</label><br />

<textarea name="simplex_options[css]"><?php echo $options['css']; ?></textarea>

<p class="submit">

<input type="submit" class="button-primary" value="Save Changes" />

// the ?> should be at the end of the functions.php file

First, you wrap your form in a <div> tag with the wrap class. This is standard for all the options pages in WordPress, and you'll see it again when you create plugin option pages. Next, you open the <form> tag. The ID is optional, but the action must be options.php so your registered settings will be processed and saved to the database.

Inside the form, the first item should be the title of your options page. Then you call the settings_fields() function to make sure your options are handled correctly and to set up the necessary security checks. Also, you need to get the stored options using get_option() so you can populate the fields with any values that have already been saved.

The markup of the form fields is up to you. The table shown here matches the built-in WordPress settings screens. Be sure to follow accessibility practices with your form fields; use labels appropriately.

The checkedO and selectedO Functions

You'll see the checked() function again in Chapter 9. It can be used to print the appropriate checked attribute for checkboxes and radio buttons. Its first argument is the value you want to match; the second argument is the variable containing your stored option. For dropdown boxes, you could use the similar selected() function.

Listing 7-31 shows one instance of the checked() function used in the Simplex Flex theme options, then shows the longer version of the same code that would be needed if you were to use an if() statement instead.

type="radio" name="simplex_options[cols]" <?php checked('right2', value="right2" /> 2 columns, sidebar right</label> type="radio" name="simplex_options[cols]" <?php checked('col3', value="col3" /> 3 columns, sidebars on either side</label>

Listing 7-31. Using checked() vs if

<label><input type="radio" name="simplex_options[cols]" <?php checked('left2', $options['cols']); ?> value="left2" /> 2 columns, sidebar left</label>

<label><input type="radio" name="simplex_options[cols]" <?php if ($options['cols'] == 'left2') { ?> value="left2" <?php } ?> /> 2 columns, sidebar left</label>

As you can see, the second version is somewhat harder to read.

Saving Form Input into a Single Variable

You could use a separate name for each field, but by using the name of the single registered option and putting the individual field names in brackets, you've taken advantage of a handy PHP shortcut: all those fields will be saved as an array called $simplex_options—exactly the thing you want to store in the database. You don't have to do any processing at all, since the form's handler, options.php, will automatically save those fields to the array and update the database option.

To take advantage of this shortcut, always use a common name for your form fields and put their unique identifiers in brackets, as shown in Listing 7-32.

Listing 7-32. Using common form field names to store values in an array

<label><input type="checkbox" name="simplex_options[sitename]" <?php checked('yes', $options['sitename']); ?> value="yes" />

Display site name and description superimposed over the header image?</label>

<label>Enter your CSS:</label><br />

<textarea name="simplex_options[css]"><?php echo $options['css']; ?></textarea>

0 0

Post a comment