When working on custom solutions for others – be it for themes, plugins, or some other extension for WordPress – one of the things I think is important is to make sure the Dashboard has the same look and feel as the rest of the native components of WordPress.
That is, I dislike and I disagree when developers and designers deviate from the core WordPress look and feel.
But even for those who try to adhere to using the right elements in the right place and for those who try to stick with laying out dashboard pages using the natural patterns as defined by WordPress, is our best place of reference actually using other pages that exist throughout the dashboard?
When it comes to so many other things – that is, in the field of software or not – there are normally patterns we follow to help make our lives easier. It’s not that they are an attempt do “dumb down” anything or take the originality away from us.
Instead, they are meant to help guide us on principles that have been tried, true, and proven in the context of whatever industry we’re talking about. And the same can be said for the WordPress user interface.
The WordPress Style Guide
Specifically, check out the WordPress Style Guide (also called the WordPress Admin Pattern Library).
From the GitHub repository:
This is a plugin that is meant to serve as a development ground for WordPress admin UI components, such as one might find in front end development frameworks such as Twitter Bootstrap or Zurb Foundation.
It’s admittedly incomplete, but once you’ve installed it in your development version of WordPress, you’ll find it has most the stuff you may want when creating dashboard pages, parts of dashboard pages, or just adding new UI components to an existing page.
But how does it work? Easy – since it’s a plugin, it creates a new menu item along the dashboard menu that contains subpages for various elements that go into making up part of the WordPress admin experience.
Specifically, it provides examples for jQuery UI components, for forms, for helper classes (as in
class attributes, not object-oriented classes) and so on.
Anyway, if you’re a WordPress developer and find yourself often creating dashboard pages for your users and/or clients, then I recommend this plugin:
- it’s a reference that lives within the Dashboard itself
- it’s easy to look at the code via an inspector
- and it’s easy to implement the results in your own work
If we had more developers following these types of guidelines, perhaps third-party plugins and tools wouldn’t feel so terribly disjointed from the rest of the core application.
But I digress.