As I’ve been running the 2.5 release candidates on this blog, I thought it was the perfect opportunity to upgrade my plugin New User Email Setup to make it display in line with the new admin interface being implemented.

Now that the full 2.5 has been released, it is even more important that other plugin authors also update their plugins to fit the new admin style.

Hopefully, this is fairly conclusive, so should act as a good guide for all the different ways of displaying data. Some of this might be a bit trivial, but it wouldn’t be conclusive without it! (NB – This post does not deal with any of the changes to hooks etc)

Main Page ‘Frame’

As with previous versions of WordPress, 2.5 wraps all of the options page in a div as follows:

<div class="wrap">
     <!-- Put all your plugin options here -->
</div>

The Form Tag

As all the plugin options need to be submitted, the plugin options page needs to be a form, therefore, we need to add this element in too. Thanks Stephen.

<div class="wrap">
<form method="post" action="<?php echo $_SERVER["REQUEST_URI"]; ?>">
     <!-- Put all your plugin options here -->
</form>
</div>

Titles

There is only one title that has a style rule in 2.5, which is your main page title:

<h2>My Plugin Options</h2>

You can of course use h3 etc too, and the browser styling will be used, but with the new layout, individual titles for individual options have kind of been replaced:

Layout

The main layout used for plugin options is, unfortunately, tables, but it is easy to use, the structure is as follows, below that, I have listed all the different types of input that you can use.

<table class="form-table">
  <tbody>
    <tr valign="top">
      <th scope="row">Option 1</th><!-- this is like your title -->
      <td><input type="text" size="40" value="" id="Option_1" 
                                 name="Option_1"/>
        <br />
        This is where you put a short description of this option field
      </td>
    </tr>
  </tbody>
</table>

This looks like this:

Now, to change the type of input, you can use the following (I’ve assumed that you already have your th scope=”row” in place for each one, just to save me writing it every time):

Text Area

<td>
<textarea name="Option_1" cols="60" rows="4" style="width: 98%; 
font-size: 12px;" id="Option_1">
This is where you would put your PHP options call, so that text is 
displayed in the text area
<textarea>
</td>

An example text area:

Checkbox

<td> 
  <label for="Option_2">
    <input type="checkbox" value="" id="Option_2" name="Option_2"/>
    The description for the first checkbox
  </label><br/>
  <label for="Option_3">
    <input type="checkbox" value="" id="Option_3" name="Option_3"/>
    This is the next description
  </label>
</td>

An Example checkbox:

Dropdown Box

<td>
<label for="Option_4">
  <select id="Option_4" name="Option_4">
    <option value="">First Value Name</option>
    <option value="">All Values are...</option>
    <option value="">Where you put your PHP options</option>
    <option value="">That are saved in the Database</option>
    <option value="">Enjoy</option>
  </select>
</label>
</td>

An example dropdown box:

Radio Buttons

<td>
<p> <!-- Note the extra p -->
  <label>
    <input type="radio" value="" name="Option_5"/>
    This describes the first radio button
  </label><br/>
  <label>
    <input type="radio" value="" name="Option_6"/>
    This describes the next radio button
  </label>
</p>
</td>

Example radio buttons:

Submit Button

What you put in ‘value’ here will be the text on the button. Make sure to put this OUTSIDE the ‘table’.

<div class="submit">
  <input type="submit" value="Update Settings" name="submit"/>
</div>

An example submit button:

I hope that this covers all of the options that are available, if I discover any more I’ll add them on.

See also:
Joost de Valk’s Style Guide
Migrating Plugins and Themes