Re Skinning The WordPress Theme Customizer

One of the biggest gripes I have with the customizer is that it lacks even basic organisational functionality. For instance, you can’t add a divider between options / sections, you can’t group anything and you can’t add titles for said non-existent groups. Basically if your theme has more than a dozen options, it’s a hassle to work in – complete kill joy.

So what can be done about it? Well aside from spending years building a custom framework that lets you do all of the above (hint: I’ve done just that and will cover it in another post). We can at the very least edit the css to make the UI visually easier to follow.

I spent 30 minutes or so earlier today experimenting and this is the concept I came up with. I’ve left my custom sectional titles in so you can see how much of a difference this simple bit of information makes.

1. Original

Not just difficult to navigate but hard on the eyes (IMO).

2. w/ Dividers

Adding some simple lines helps to organise the sections a little more. Not exactly good on the eyes though.

3. Declutter + Titles

Removing the section lines almost instantly creates better visual hierarchy for our  ‘Groups’. Adding something as simple as a title for the groups goes a long way in helping the user make better educated guesses in where to go to find a certain option.

4. Consistency

I can only guess as to why the customizer isn’t dark like the rest of the WordPress dashboard sidebars. It may be because they UI guys wanted a point of difference? Whatever the reason I prefer it dark like the rest of the admin area as it visually separates the sidebar (options) and the working area (theme).

Try it yourself

While it would be nice to see some better UI / UX in the customizer, I wouldn’t hold your breath as it’s probably a long ways off. In the mean time follow the below steps to get started experimenting with your own customizer re-skin.

1. Add the below code to your functions.php
2. Create a stylesheet in your themes root directory called my-customizer-styles.css.

if( !function_exists( 'my_customizer_ui_styles' ) ) {
  function my_customizer_ui_styles() {
    wp_enqueue_style('my-customizer-styles', get_template_directory() . '/my-customizer-styles.css', 'all' );
  }
  add_action( 'customize_controls_enqueue_scripts', 'my_customizer_ui_styles' );
}

ps. I posted the above screenshots in the WordPress Slack channel, if you’d like to follow the conversation the channel is open for anyone to join.