WordPress Style Guide: A Reference For Admin UI Components

style-guideWordPress is getting its own style guide. Helen Hou-Sandí is working on a new plugin called WordPress Style Guide to serve as a reference for building WordPress admin UI components. This is very much a work in progress and its purpose will evolve, as Helen notes on the plugin’s github page: “This plugin is not planned to be distributed through the WordPress.org repository, as its anticipated final form will take over a site completely.” The end result will be a guide similar to what you see with front end development frameworks such as Twitter Bootstrap or Zurb Foundation.

So far the plugin includes three sections:

  • jQuery UI Components
  • Forms
  • Helper Classes

These appear in the form of HTML pages within the admin and contain a few rough style examples:


This style guide has the potential to greatly improve the way plugin and theme developers create UI components that fit into the WordPress admin. It will also help to speed up that process when developers can quickly get the appropriate styles from the reference.

Custom admin UI done wrong can be a scary thing. How many times have you seen a plugin with visually jarring alerts and mismatched styles in the admin? That Sore Thumb plugin is a hazard to the eyes. If only there was a guide to help put them on the right path. That’s where this project can benefit the community.

Contribution to the WordPress Style Guide is open to all. If you’d like to help build it, feel free to send a pull request and/or leave feedback in the issues queue.


12 responses to “WordPress Style Guide: A Reference For Admin UI Components”

  1. Jeffro says:

    This looks like a great resource. I hope developers will decide to use this instead of recreating the wheel with UI elements that are usually worse than the ones built into WordPress.


  2. I’ve seen some attempts at something like this previously but honestly other than tearing down some other plugins and seeing how they did the settings page UI… there really hasn’t been a good way for us plugin devs to really know what to do.

    I LOVE that this is happening and that she’s heading it up. If I ever get time away from clients I’m going to look into this plugin to help update my settings page(s).



  3. Jeff says:

    I’m glad to see the UI documentation getting handled so capably.

    The biggest question I have, as a plugin developer, will be how to integrate custom post/page icons into the admin menu. Right now the actions have an option to add an icon, but I imagine that using fonts will make it a bit more challenging.


  4. Looks great. And we haven’t even seen its final form.


  5. It’s a good thing to make all plugins and theme options with the same style guide!


  6. Great idea, some parts of wp-admin HTML are really complex and it takes time to extract them and reuse in plugin, this should save developers a lot of time.


  7. […] 5. WordPress Admin UI Style Guide […]


  8. This will come in very handy and answers a lot of questions.

    Thank you!


  9. Frank says:

    I have create a plugin with same goal, long time ago and with the default Admin markup and classes; see https://github.com/bueltge/WordPress-Admin-Style
    Currently I don’t understand why we need new classes names with mp6, is confused and easy to maintain for developers. I open a issue to discuss this topic: https://github.com/helenhousandi/wp-style-guide/issues/5


  10. Tung says:

    @Frank – Agree. Style guides should be generic like how you have it in your plugin, not “mp6” prefixed. The prefix will simply become another layer to remove once mp6 is polished. If MP6 gets rolled into core, it will no longer be mp6. Why keep the prefix around?


  11. […] un guide pour les styles (en) d’interfaces utilisateurs de vos […]



Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: