WordPress 2.5 Plugin Settings Pages Style Guide
Fellow plugin authors beware! Your plugin settings pages might look pretty awful in WordPress 2.5’s new admin theme… Currently, I’m working on making all my plugins work and look good in it, and I had to do a bit of research. There’s a page on migrating plugins and themes on the WordPress codex, which can help you a bit, but it doesn’t tell you anything about styling the settings pages.
With the new theme for the admin in WordPress 2.5 (whether you like or dislike it, it’s coming at you anyway), most plugins settings pages look pretty ugly… I’ve been working on my Robots Meta plugin and RSS footer plugin, and I’ll tell you what I know now about the styling of these pages.
Nothing changed here, your plugin settings page should still be wrapped in
<div class="wrap"> </div>
Headings should start with an h2 heading for the main heading, and h3’s for the subheadings. These look like this in my fixed Robots Meta plugin, h2 and h3:
The individual settings of the plugin usually consist of a name, an explanation and a setting input. To display those settings nicely, you’re “forced” to use a table. This table should have the following markup:
<table class="form-table"> Â <tr> Â <th scope="row" valign="top">Name</th> Â <td> Â <input id="inputid" /> Â <label for="inputid">explanation</label> Â </td> Â </tr> </table>
Groups of settings can be put into one row, to make stuff easier to understand. Settings then look like this:
The last thing on your pages is a submit button, and these also still look the same:
<span class="submit"> <input name="submit" value="Save Changes" type="submit" /> </span>
Which creates the following button:
If you create your plugin settings pages like this, they should look good for everyone!