Add support for theme customizer

CHANGELOG.md

@@ -1,5 +1,6 @@
 ### HEAD
 * Drop support for older browsers ([#1571](https://github.com/roots/sage/pull/1571))
+* Add support for theme customizer ([#1573](https://github.com/roots/sage/pull/1573))
 * Remove extraneous no-js ([#1562](https://github.com/roots/sage/pull/1562))
 * Simplify/speed up editor style process ([#1560](https://github.com/roots/sage/pull/1560))
 

assets/manifest.json

@@ -12,6 +12,11 @@
       ],
       "main": true
     },
+    "customizer.js": {
+      "files": [
+        "scripts/customizer.js"
+      ]
+    },
     "jquery.js": {
       "bower": ["jquery"]
     }

assets/scripts/customizer.js

@@ -0,0 +1,8 @@
+(function($) {
+  // Site title
+  wp.customize('blogname', function(value) {
+    value.bind(function(to) {
+      $('.brand').text(to);
+    });
+  });
+})(jQuery);

functions.php

@@ -14,7 +14,8 @@ $sage_includes = [
   'lib/extras.php',    // Custom functions
   'lib/setup.php',     // Theme setup
   'lib/titles.php',    // Page titles
-  'lib/wrapper.php'  // Theme wrapper class
+  'lib/wrapper.php',   // Theme wrapper class
+  'lib/customizer.php' // Theme customizer
 ];
 
 foreach ($sage_includes as $file) {

lib/customizer.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace Roots\Sage\Customizer;
+
+use Roots\Sage\Assets;
+
+/**
+ * Add postMessage support
+ */
+function customize_register($wp_customize) {
+  $wp_customize->get_setting('blogname')->transport = 'postMessage';
+}
+add_action('customize_register', __NAMESPACE__ . '\\customize_register');
+
+/**
+ * Customizer JS
+ */
+function customize_preview_js() {
+  wp_enqueue_script('sage/customizer', Assets\asset_path('scripts/customizer.js'), ['customize-preview'], null, true);
+}
+add_action('customize_preview_init', __NAMESPACE__ . '\\customize_preview_js');