Jesse Ngatai

Re Skinning The WordPress Theme Customizer

March 31, 2017 jessengatai customizer, UI/UX, WordPress UI/UX, Web Development

← Adding Sectional Titles In The WordPress Theme Customizer Homecoming →

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.

Comments are now closed

Recent Blog Posts
  • Truth, Meaning & Balance
  • Good Reads: Man’s Search For Meaning By Viktor E. Frankl
  • Pro Tip: Create A Migration Function For WordPress Theme Updates
  • Music To Work To – Junko Yagami and Noriko Miyamoto
  • Getting Started With Grunt
Recent Work
  • Crush WordPress Theme