Blog

Never Fear, The Customizer Is Here!

June 6, 2016

Cameron Jones

No Comments

Speaking Engagements, WordCamp, WordPress

TORN City, the worlds largest multi-player text based crime game online.

Last month I gave my first WordCamp presentation at WordCamp Sunshine Coast.

WordCamp Sunshine Coast 2016 was the first time the Sunshine Coast had hosted a WordCamp, and the third region in Queensland so far after the Gold Coast and Brisbane.

It was a wonderful experience to stand alongside so many people I look up to and admire within the WordPress community. We are really blessed with so many amazing contributors to WordPress here in Australia.

It was incredibly humbling to be contacted by Weston Ruter, the lead developer of the Customizer, following my presentation. I had a lot of encouragement and support from a number of the XWP team which was very much appreciated.

If you want to see where the Customizer is heading next, or want to get involved, you can check out Make WordPress Core or jump onto the #core-customize channel on the WordPress Slack team.

The recording of the session doesn’t look like it’ll be uploaded any time soon, but if it does I’ll update this post to include it.

Have a question about the Customizer? Drop me a line in the comments and I’ll see what I can do!

The Slides

The slides are available on Slideshare and Speaker Deck.

The Code

The code used in the demo is available on GitHub: https://github.com/cameronjonesweb/wordcampsc

Register a function to manage your Customizer settings

https://gist.github.com/cameronjonesweb/f3158f53ae7351508b561b258943b223#file-customizer_register-php

Create a setting that changes the colour of the links

https://gist.github.com/cameronjonesweb/f3158f53ae7351508b561b258943b223#file-add_setting-php

The setting is now registered, but we can’t interact with it until without a control. A control creates the interface to change the setting. In this instance we want a colour picker

Create a control to manage the setting

https://gist.github.com/cameronjonesweb/f3158f53ae7351508b561b258943b223#file-add_control-php

It won’t update unless we tell it how to

Update in the live preview

https://gist.github.com/cameronjonesweb/f3158f53ae7351508b561b258943b223#file-add_partial-php

Some people will still be running < 4.5 (and should upgrade) but need to be catered for

https://gist.github.com/cameronjonesweb/f3158f53ae7351508b561b258943b223#file-selective_refresh_fallback-php

That’s everything for managing the setting, but we still need to actually output the styles.

Display the style tag in the head for us to target with our Customizer styles

https://gist.github.com/cameronjonesweb/f3158f53ae7351508b561b258943b223#file-wp_head-php

We’re using the code to output the style twice

https://gist.github.com/cameronjonesweb/f3158f53ae7351508b561b258943b223#file-duplicate_output-php

Let’s move that into it’s own function for consistency and to remain DRY.

https://gist.github.com/cameronjonesweb/f3158f53ae7351508b561b258943b223#file-dry-php

All together now

https://gist.github.com/cameronjonesweb/f3158f53ae7351508b561b258943b223#file-functions-php

Gallery

  • Photo by XWP
  • Photo by Tim Butler
  • Photo by Stephen Cronin
  • Photo by @WCSunshinecoast
  • Photo by @WCSunshinecoast

Did you find this post useful?

YesNo

Cameron Jones

Cameron Jones is a professional Web Developer and DevOps Engineer specialising in all things WordPress, and is the author of the popular Mongoose Page Plugin. When he's not working on a new website or WordPress plugin, he can be found on the sports field or in the mosh pit at a metal concert.