WordPress:Creating Options Pages

Introduction

Creating custom options panels in WordPress is relatively easy.

Firstly, to create the menu item and the new page, see WordPress:Adding Administration Menus.

So long as you stick to this structure, WordPress will handle all of the option creation, update, saving, and redirection for you. It will check permissions, and do all that other magic behind the scenes.

Form Tag

Once you have your page, you need to create an HTML form. Use this code:

<form method="post" action="options.php">

nonce Magic

Then after the opening form tag, insert this PHP code:

<?php wp_nonce_field('update-options'); ?>

This will insert two hidden fields which automatically help to check that the user can update options and also redirect the user back to the correct admin page (because the form action is a different page).

Update Options Button

At this point you may choose to insert the standard Update Options button, the HTML for which is:

<p class="submit">
<input type="submit" name="Submit" value="<?php _e('Save Changes') ?>" />

Note the use of the _e() function to handle translation of the text, see WordPress:Localizing WordPress for more info.

Field Names

Use fields with the same names that you want your newly created options (stored in the options table) to be called, for example:

<input type="text" name="new_option_name" value="<?php echo get_option('new_option_name'); ?>" />

Note that by using the get_option() function as the value for the field, this will automatically be updated when the options are saved.

action Field

Next, create a hidden field called action containing the value update.

<input type="hidden" name="action" value="update" />

page_options Field

Finally, create a hidden field called page_options containing a comma separated list of all the options in the page that should be written on save.

<input type="hidden" name="page_options" value="new_option_name,some_other_option,option_etc" />

Closing Tags

Then obviously close the form tag after your other options, and if you like, include another "Update Options" button, this is the WordPress default.

<p class="submit">
<input type="submit" name="Submit" value="<?php _e('Save Changes') ?>" />

</form>