Yoast: RT @idivenow: I just donated to @Yoast for his awesome plugins, you should too: http://t.co/7GTWe1rE <-- THX!! 
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.
The wrapper
Nothing changed here, your plugin settings page should still be wrapped in
<div class="wrap"> </div>
Headings
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:
Individual settings
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:
Submit buttons
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!
PDF Tags: WordPress Plugins
Category: WordPress
You can skip to the end and leave a response.
Other posts you might like:
38 Responses to “WordPress 2.5 Plugin Settings Pages Style Guide”
Comments closed, if you feel you have something to say:
drop me a line.
Google Analytics WordPress
Track your WordPress site easily in Google Analytics and add lots of data, for example views per author & category and automatic tracking of outbound clicks, pageviews & downloads.
Pingback: Nip & Tuck for W2.5 Plugin Styles « Feet up, eyes closed, head back
Pingback: Nip & Tuck for WP2.5 Plugin Styles « Feet up, eyes closed, head back
Pingback: Readying Plugins for the New WordPress Admin Theme · Pressed Words
by Trevor Fitzgerald on 24 February, 2008 at 05:35
The niceblue class just got a name change: http://trac.wordpress.org/changeset/7000
by youfoundjake on 24 February, 2008 at 06:34
Hey Joost,
Yeah, I'm a bit nervous about the 2.5 update coming.. As we get closer, I'm going to get a post up about some of the details and what it may effect in terms of plugins as well as themes. Man oh man, I'm not looking forward to this update. Maybe I should wait 6 months like I did with XP Service 2. Heeh.
by Joost de Valk on 24 February, 2008 at 09:40
@trevor: Thx, fixed it.
by Andy on 24 February, 2008 at 14:18
The problem here is that a class like "form-table" for example, does not exist in pre-2.5 admin CSS. I can see I can create admin displays that conform to 2.5 but they may look a mess in pre-2.5 systems because of this.
And that is one of the reasons I tend to define my own CSS for admin display - because WP so often just removes or changes stuff like this without a word of warning and with no consideration to the existing body of work.
by PublicRecordsGuy on 24 February, 2008 at 18:36
All these upgrades are very daunting for the newest member to the blogging community. I went from a blogspot blog to wordpress, paid to get my theme designed and coded. It's scary to see that it keeps changing.
by Andy on 24 February, 2008 at 18:54
Your 'front-end' theme should be fine. All the changes and re-design are in the admin pages.
by Joost de Valk on 24 February, 2008 at 21:35
@Andy: you could just do a conditional insert of some CSS if you're pre 2.5...
@PublicRecordsGuy: your theme should indeed be ok, and I understand it's daunting, but this is WordPress's first admin overhaul EVER.
by Andy on 24 February, 2008 at 21:57
Oh yes. We are having to do this with code that places a new item on the write post screen (2.5) - anything to do with categories (2.2 at the primitive level) - any direct access to 'page' records (2.1)! The list gets longer and longer. There are so many conditional statements it just gets tiring.
This was a good starting off point and useful for which I thank you. Since I left the comment I have been doing exactly what you sugest and it's a slow, boring slog!
by Joost de Valk on 24 February, 2008 at 21:58
Hehe Andy, I know, I've got 10 plugins to update as well, and they're still sometimes changing the CSS on trunk, so it's not even stable yet...
Pingback: Weblog Tools Collection » Blog Archive » WP 2.5 Plugin Style Guide
Pingback: GaMerZ.WordPress » Blog Archive » WordPress 2.5 Thoughts
by Jermayn Parker on 28 February, 2008 at 05:13
I am not a Plugin developer but rather a Plugin user so I appreciate the effort to make the transition good for people like me :D
Pingback: Skylog » Blog Archive » links for 2008-02-28
Pingback: links for 2008-02-28 | The Marketing Technology Blog
by Matt Thomas on 29 February, 2008 at 08:14
2.5 brings with it some unique form and table styling, and those styles shouldn't be applied by default to pre-2.5 Plugins. I experimented with CSS that applied the new form-table styles to fieldset tables, actually. The styling looked fine in many themes, but looked terrible in some popular ones. Adding a new class (that should stick around in future releases) allows Plugin authors to choose it if they wish, and rely on it to deliver a style consistent with the rest of the UI in the future.
Thanks for the write-up, Joost!
by Keith Bowes on 2 March, 2008 at 01:00
Is there some reason why one can't use CSS to style the options page instead of resorting to a layout table? Is it just a problem with browser support?
Also, you can use more than one class on each element:
Content
by Keith Bowes on 2 March, 2008 at 01:40
LOL, I forgot to escape my HTML bad me. It'll be visible if you edit my comment. Also, I do have a gravatar, but it's not showing up here.
Pingback: links for 2008-02-28 | The Phenomenon
by ChaosKaizer on 3 March, 2008 at 14:31
Just a suggestion with "form button".
<span class="submit">
<input name="submit" value="Save Changes" type="submit" />
</span>
span is inline-block element it should be replace with block element like P or DIV for wrapping form elements.
better write it up like the following
<button type="submit" class="submit" title="<?php _e('Save Changes'); ?>"><?php _e('Save Changes'); ?></button>
Pingback: WebHelperMagazine.com » Blog Archive » WordPress RoundUp - An overview of WordPress Themes, Plugins, News, and How To’s by Scott Frangos
Pingback: WebFadds.com » WebFadds.com - Professional Blog and CMS website development services
Pingback: Wordpress 2.5 Ä°le Gelen Yenilikler Ve Ä°lk Ä°zlenimler | Vaveyla.Net
by m0n5t3r on 5 March, 2008 at 16:44
actually, it looks like it's not a span, it's a <p class="submit"> surrounding the submit button
also, since "options" was renamed to "settings", new-style option page hooks will have to be renamed from something like "options_page_my_plugin" to "settings_page_my_plugin" (I chose to add both, to keep compatibility with older versions).
Pingback: WP 2.5 Plugin Style Guide | OPOWAE
Pingback: WordPress 2.5 sait se faire désirer | WordPress Francophone
Pingback: Wordpress 2.5 Ä°le Gelen Yenilikler Ve Ä°lk Ä°zlenimler - graficreative
Pingback: WordPress Wednesday News: WordPress 2.5 Due March 17, Administration Plugins May Break, Tons of Plugins Updated, Add Buttons to Toolbar, WordPress Dallas and Now Milan! : The Blog Herald
Pingback: Word Press 2.5 Due March 17th (Maybe…) : RUPPERADIO.com - Internet News, Website Reviews, & Webmaster/Blogger Resources…
Pingback: WordPress 2.5 Plugins Beware: Automatic Plugin Upgrade Problems : The Blog Herald
Pingback: WordPress 2.5 New Automatic Plugin Upgrade Problems « Lorelle on WordPress
Pingback: Internet. » Blog Archive » WordPress Wednesday News: WordPress 2.5 Due March 17, Administration Plugins May Break, Tons of Plugins Updated, Add Buttons to Toolbar, WordPress Dallas and Now Milan!
Pingback: Wordpress 2.5 Ä°le Gelen Yenilikler Ve Ä°lk Ä°zlenimler « Coldfirexxx’s Weblog
Pingback: WordPress 2.5 Plugin Style Guide | Epic Alex :: Web Design
by Epic Alex :: Web Design on 8 April, 2008 at 11:37
Hey Joost,
Just in case you haven't come across it, I have written a post in response to this one that goes into a bit more detail about some of the other options available for displaying plugin options, check it out here:
http://epicalex.com/wordpress-25-plugin-style-guide/
Thanks,
Alex
Pingback: » 7 liens utiles pour l’intégrateur web : le retour « css4design : des css pour votre design html