As a Wordpress plugin developer, it’s important that you also create a great UI for your backend administration pages just as well as for your front-end. Wordpress 2.7 comes with a really nicely designed administrative section, and the likelihood is you will be adding to this with your custom built plugins. Trouble is, you probably cannot be bothered to go to the effort to make it look pretty, so it ends up looking a bit naff and out of place.

The Cheatsheet

Below I have listed a nice little cheatsheet which will enable you to tag on to the existing WordPress CSS .classes for some key form elements so that your plugin admin pages fit in rather nicely!

<input type="submit" name="save" class="button-primary" value="Save Changes"/>

<input type="submit" value="Apply" class="button-secondary action" />

The form elements below must be placed within a table structure, specifically: <table class=”form-table”>

<input type="text" name="inputbox" class="regular-text" />

<input name="whatever" type="text" id="blah" class="regular-text code" />

Brief I know, but adding these small changes will really make your admin page fit in seemlessly with the rest of the new 2.7 UI.

More importantly…

It will also enable you to have your form elements auto-update with any UI update WordPress implement in the future (as long as they keep the .class names the same of course!).

Further Reading…

WordPress For Dummies	WordPress Complete	WordPress Plugin Development

This entry was posted on Thursday, January 22nd, 2009 and is filed under Development, WordPress Plugins. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.