Per Søderlind

I code for fun

  1. customizer
  2. An SVG logo Custom Control for the WordPress Customizer

An SVG logo Custom Control for the WordPress Customizer

svg-logo

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.

list_svg()

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.

svg.json

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.

Demo

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.

Previous

WP Gears and the Heartbeat API

Next

My plugins are tested and found compatible with WordPress 4.7

2 Comments

  1. Hello can i ask smth? We can make it like a plugin?

    • Per Søderlind

      Sure, you can do what you want with it as long as you keep the license and copyright.

Leave a Reply

Powered by WordPress & Theme by Anders Norén