Skip to content

Instantly share code, notes, and snippets.

@BinaryMoon
Last active January 20, 2017 20:10
Show Gist options
  • Save BinaryMoon/67a693eff42f4317e119fe0858e55807 to your computer and use it in GitHub Desktop.
Save BinaryMoon/67a693eff42f4317e119fe0858e55807 to your computer and use it in GitHub Desktop.
Improve WordPress Customizer Auto Update Partials Adoption
I think the reason there hasn't been much developer uptake in the auto refresh of the Customizer is that implementation is both:
1. complex (using javascript - something many theme developers are unaccustomed to outside of jquery)
and 2. has complex documentation. It's only because I've been following the many customizer changes in 4.7 that I have learnt how to implement the things I have.
Having now implemented auto updating partials for site title and description in a number of my themes I have seen that it's not as complicated as I first thought. I have also seen that the code is almost identical for each theme. The only thing that has changed is the css selector used to reference the title and description. You can see an example of the js implementation on _s - https://github.com/Automattic/_s/blob/master/js/customizer.js
I think that with some additions to the core customizer code we could remove the requirement for the customizer.js file for the most common use cases.
What I would like to suggest comes in two parts.
1) Adding additional properties to the custom-header settings in add-theme-support. An example is shown in custom-header.php
The idea is to specify the selectors used for the different header elements and then automatically output the javascript neccessary to update them.
2) Adding a type property to the customizer add_partial method. When the property is specified a default behaviour will modify the related element in real time. In the customizer.php example since the text type is specified the control will update the site title partial in real time. There could also be types for visibility, foreground colours, background colours, etc.
<?php
// If add_partial is set then changing transport to postMessage is implied? Or should at least be a parameter.
$wp_customize->selective_refresh->add_partial(
'blogname',
array(
'selector' => '.site-title',
'type' => 'text', // Let's the editor know what sort of behaviour to use for the auto update.
'render_callback' => function() {
bloginfo( 'name' );
},
)
);
<?php
// Suggested implementation
add_theme_support(
'custom-header',
array(
'default-image' => '%s/images/x.jpg',
'default-text-color' => '000000',
'random-default' => false,
'width' => 1500,
'height' => 500,
'flex-height' => true,
'header-text' => true,
'uploads' => true,
'wp-head-callback' => 'album_colour_styles',
// New optional list of selectors. Without this everything will behave as it always has.
'selectors' => array(
'site-title' => '.site-title', // Take care of auto update site title text, and change header colour
'site-description' => '.site-description', // Take care of auto update site description
'header' => '.branding', // Show & hide title and description
),
)
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment