WordPress Development: Options Pages

Published on Mar 18, 2009 // Development

WordPress Development

While last week we went over how to add an options page to the WordPress Administrative navigation, this week we’ll be going over the actual page itself. We’ll talk about how to update options in the database, and how to mimic the design of WordPress’ default pages.

WordPress includes the ability to manage the processing of your options page’s form. Basically it will sanitize the submitted data and update it in the database. It is fairly easy to setup, and is recommend that you use it (whenever possible) instead of your own.

Making your options page look like the WordPress default is just a matter of using the appropriate markup and CSS classes. The markup consists of a div, header tag, form and table. So, let’s get started.

This markup would go in that function we talked about last week. Since we’ll be outputting a lot of non-PHP code to the browser, I’d recommend ending the PHP block (?>) instead of echoing all this out.

We start by opening a div, adding a header tag and beginning our form:

[code='xml']

Plugin Name

[/code]

Notice that we point the submission of our form to options.php. This is the file that will handle the processing of our options form.

Now, we need to add a line of code that will ensure the user has the proper permissions for editing the options automatically for us. Wrap the following line in <?php ?> tags.

[code='php']wp_nonce_field('update-options');[/code]

Next, we’ll use a table to organize our options.

[code='xml']

[/code]

We will have a row for each of our options. Which will look like this:

[code='xml']

[/code]

Note that the name of the input should be the name of the option you want in the database. We set the value to the value of that option in the database. Don’t forget to update both the name and the value with the name of your option in the database.

After you’ve listed all your options, you can now close the table.

[code='xml']

Option Name

[/code]

Next, we add a hidden field that tells options.php that you want to update these options in the database.

[code='xml']
[/code]

Now, we need another hidden field that contains a list of all the options on this page that should be updated in the database. The option names should be separated with commas.

[code='xml']
[/code]

We can now add a submit button and tie up all the loose markup.

[code='xml']

[/code]

There you have it, an options page that matches WordPress’ style and doesn’t require you to write the processing stuff yourself.