WordPress 2.5 Plugin Style Guide
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:
1 2 3 | <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.
1 2 3 4 5 | <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:
1 | <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.
1 2 3 4 5 6 7 8 9 10 11 12 | <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
1 2 3 4 5 6 7 | <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
1 2 3 4 5 6 7 8 9 10 | <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
1 2 3 4 5 6 7 8 9 10 11 | <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
1 2 3 4 5 6 7 8 9 10 11 12 | <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’.
1 2 3 | <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
10 Comments - Add Yours!
Sorry about the poor quality of the images, i’ll try and get some better ones done.
i found your site when i was looking for a way to change the sidebar for different pages in wordpress… but i don’t see that tutorial here. is it somewhere in a secret cave? nice site btw… good info regardless.
Thanks for the Info. Got here from Volk’s post. Just try put some better images up. Thanks again. M
I think you’re going to confuse a lot of people by leaving out the <form> tag.
Beyond that, excellent article. (Though, yes — please do update the images!)
I would suggest the following for the Submit button value — closer to the WP 2.5 standard:
value="< ?php _e('Save Changes') ?>"@Stephen – Thanks for the feedback! You’re right, ‘Save Changes’ is more the standard on the built in options/settings pages, and I suppose it is also more generic than update settings.
In terms of the <form> tag, I decided to leave it out because I considered it more a part of the plugin ‘coding’ than ‘design’ if that makes sense, but since you’ve raised it, and since a plugin settings page doesn’t display properly without it, I’ll add it to the post! Thanks again.
@all – New images coming in 10 mins!
Hi,
I am, Michael
Nice site, very informative
Great article. Nice blog. Keep it coming. Mike
Hi Alex,
one question, because i got some problems. Did you update your “new user creation”-E-Mail-Plugin to Wp 2.7(.1)? I simply can´t send/receive(?) any E-Mails with this. Or have you got any similar reports about this issue?
Thanks!
I need to update my wordpress and give this a go.
One Trackback