Another proof of concept.

The custom control

You create a custom control by extending the WP_Customize_Control class. I check for WP_Customizer_Control existence before adding custom control because WP_Customize_Control is loaded on customizer page only.


Create a option list with URLs to SVG files. The SVG files are defined in svg.json

You should only add SVG's that you created or at least trust the content of.

That's the reason I'm not using the media manager to add the SVG,  they are very unsecure.


The svg.json file has the relative path to each logo

The Image Picker jQuery plugin

Image Picker is a simple jQuery plugin that transforms a select element into a more user friendly graphical interface.


Worth noting here is the $("#selected_svg").change();, it triggers Save & Publish in the customizer.

Adding the custom control to the customizer

Answering the postmessage

Using postmessage, I'm updating the SVG URL in the preview using the JavaSript below. 'svg_logo_url' is the name of the setting, as added by the $wp_customize->add_setting call above.


Adding the SVG logo to the theme

Most modern themes are using the_custom_logo() function to display the logo, so here I hook into the function through get_custom_logo filter to change it.


I've added the custom control to the 2016-customizer-demo theme. The files used are `functions.php`, `svg.json`, `svg/*.svg`, `js/customizer.js` and image picker plugin in the `js/image-picker` folder.