Creating the Options Form

In Listing 9-7, you saw the basic outline of the options page. Now you need to create the individual form fields that will allow users to change the plugin settings.

First, you need to tell WordPress that this form will be using the option you registered earlier. You'll also go ahead and load the stored options into a variable so you can use them throughout the form. Listing 9-10 shows these changes to the basic form.

Listing 9-10. Setting up options for use in the form

// displays the options page content function next_page_options() { ?> <div class="wrap">

form method="post" id="next_page_form" action="options.php"> <?php settings_fields('next_page'); $options = get option('next page');

<h2>Next Page Options</h2>

<-- the form fields will go here --> <p class="submit">

<input type="submit" name="submit" class="button-primary" value="Update Options" /> </p>

} // end function next_page_options()

Now that you have your options, you can use them to print the default values for each form field. Listing 9-11 shows the form fields for the Next Page options. This should look fairly similar to the theme options form you saw in Chapter 7, except this time I've created my own form layout instead of using the standard WordPress tables. You may lay out your plugin options pages however you wish. The table method is required only if you are adding options to an existing page. Otherwise, you're free to create the layout that best serves your form, as shown in Listing 9-11.

Listing 9-11. Adding the options fields

// displays the options page content function next_page_options() { ?> <div class="wrap">

form method="post" id="next_page_form" action="options.php"> <?php settings_fields('next_page');

<h2>Next Page Options</h2> <-- the form fields go here -- >

<input type="text" name="next_page[exclude]" id="exclude"

value="<?php echo $options['exclude']; ?>" /><br /> <small>Enter page IDs separated by commas.</small></label></p>

<div id="previous-page">

<h3>Previous Page Display:</h3> <p><label>Before previous page link: "<br />

<input type="text" name="next_page[before_prev_link]" id="before_prev_link"

value="<?php echo stripslashes(htmlentities($options['before_prev_link'])); ?>" /> </label></p>

<p><label>Previous page link text: <small>Use %title% for the page title</small><br /> <input type="text" name="next_page[prev_link_text]" id="prev_link_text"

value="<?php echo stripslashes(htmlentities($options['prev_link_text'])); ?>"

<p><label>After previous page link:<br />

<input type="text" name="next_page[after_prev_link]" id="after_prev_link"

value="<?php echo stripslashes(htmlentities($options['after_prev_link'])); ?>" /> </label></p>

<p>Shortcode: <strong>[previous]</strong><br /> Template tag: <strong>&lt;?php previous_link(); ?&gt;</strong></p> </div>

<div id="parent-page">

<h3>Parent Page Display:</h3> <p><label>Before parent page link:<br />

<input type="text" name="next_page[before_parent_link]" id="before_parent_link"

value="<?php echo stripslashes(htmlentities($options['before_parent_link'])); ?>" /> </label></p>

<p><label>Parent page link text: <small>Use %title% for the page title</small><br /> <input type="text" name="next_page[parent_link_text]" id="parent_link_text"

value="<?php echo stripslashes(htmlentities($options['parent_link_text'])); ?>" /> </label></p>

<p><label>After parent page link:<br />

<input type="text" name="next_page[after_parent_link]" id="after_parent_link"

value="<?php echo stripslashes(htmlentities($options['after_parent_link'])); ?>" /> </label></p>

<p>Shortcode: <strong>[parent]</strong><br /> Template tag: <strong>&lt;?php parent_link(); ?&gt;</strong></p> </div>

<h3>Next Page Display:</h3> <p><label>Before next page link:<br />

<input type="text" name="next_page[before_next_link]" id="before_next_link"

value="<?php echo stripslashes(htmlentities($options['before_next_link'])); ?>" /> </label></p>

<p><label>Next page link text: <small>Use %title% for the page title</small><br /> <input type="text" name="next_page[next_link_text]" id="next_link_text"

value="<?php echo stripslashes(htmlentities($options['next_link_text'])); ?>"

<p><label>After next page link:<br />

<input type="text" name="next_page[after_next_link]" id="after_next_link"

value="<?php echo stripslashes(htmlentities($options['after_next_link'])); ?>"

<p>Shortcode: <strong>[next]</strong><br /> Template tag: <strong>&lt;?php next_link(); ?&gt;</strong></p> </div>

<!-- end form fields -- > <p class="submit">

<input type="submit" name="submit" class="button-primary" value="Update Options" /> </p>

} // end function next_page_options()

For each of the fields, you can use the get_option() function to retrieve the stored value. However, you have to run that value through some clean-up functions before you can display it as an attribute of an HTML tag, so here you've wrapped each one in the htmlentities() and stripslashes() PHP functions.

You can add a stylesheet to the options page, just as you did with the theme options in Chapter 7. Once again, you'll piggyback onto the function you used to add the options page to the menu, and grab the resulting filename to pass to the plugin-specific admin_head() hook, as shown in Listing 9-12. The changes to the next_page_add_pages() function are in bold, and the next_page_css() function is new.

Listing 9-12. Adding a stylesheet to this options page, not all the admin screens function next_page_add_pages() {

// Add a new submenu under Options:

$file = add_options_page('Next Page', 'Next Page', 'manage_options', 'next-page', 'next_page_options');

add action("admin head-$file", 'next page css');

function next_page_css() { ?> <style type="text/css">

#next-page, #parent-page, #previous-page { float: left; width: 30%; margin-right: 5%; }

All of this results in the options form shown in Figure 9-5.

Figure 9-5. The Next Page plugin options form
0 0

Post a comment