INITIAL CODE
NEW CODE
So I've noticed that I don't need that many controls since I have added
add_theme_support( 'custom-background' );
which gives me built in control for the body background, so I've made it like this:
add_action( 'customize_register', 'mytheme_customize_register' );
/**
* Register customizer settings
*
* @see add_action('customize_register',$func)
* @param \WP_Customize_Manager $wp_customize WP Customize object.
* @since 1.0.0
*/
function mytheme_customize_register( WP_Customize_Manager $wp_customize ) {
/**
------------------------------------------------------------
SECTION: Body Settings
------------------------------------------------------------
*/
$wp_customize->add_section( 'background_image', array(
'title' => esc_html__( 'Body Settings', 'mytheme' ),
'priority' => 0,
) );
/**
Boxed Body
*/
$wp_customize->add_setting( 'boxed_body', array(
'default' => false,
'transport' => 'postMessage',
'sanitize_callback' => 'mytheme_checkbox_sanitization',
) );
$wp_customize->add_control(new Toggle_Checkbox_Custom_Control( $wp_customize, 'boxed_body', array(
'label' => esc_html__( 'Boxed Body', 'mytheme' ),
'description' => esc_html__( 'Check this to enable boxed body layout', 'mytheme' ),
'type' => 'checkbox',
'section' => 'background_image',
'priority' => 0,
) ) );
/**
* Callback function for boxed body choice
*
* @param object $control Control object.
* @return boolean
*/
function boxed_body_choice( $control ) {
if ( 1 === $control->manager->get_setting( 'boxed_body' )->value() ) {
return true;
} else {
return false;
}
}
/**
Boxed Body Border Color
*/
$wp_customize->add_setting( 'boxed_body_border_color', array(
'default' => '',
'transport' => 'postMessage',
'sanitize_callback' => 'sanitize_hex_color',
) );
$wp_customize->add_control(new WP_Customize_Color_Control( $wp_customize, 'boxed_body_border_color', array(
'label' => esc_html__( 'Boxed Body Border Color', 'mytheme' ),
'settings' => 'boxed_body_border_color',
'section' => 'background_image',
'active_callback' => 'boxed_body_choice',
'priority' => 0,
) ) );
}
add_action( 'customize_preview_init', 'mytheme_customizer_live_preview' );
/**
* Live preview script enqueue
*
* @since 1.0.0
*/
function mytheme_customizer_live_preview() {
wp_enqueue_script( 'mytheme-themecustomizer', get_template_directory_uri() . '/inc/customizer/js/customizer.js?v=' . rand(), array( 'jquery', 'customize-preview' ), '', true );
}
And the customizer.js looks like this
(function($, api) {
'use strict';
//Boxed Body Toggle
api( 'boxed_body', function(value) {
value.bind(function(newval) {
if (newval) {
$('body').wrapInner('<div class="boxed_body_wrapper" />');
} else {
$('.boxed_body_wrapper').contents().unwrap();
}
});
});
// Add callback for when the boxed_body setting is toggled.
api( 'boxed_body', function(value) {
value.bind(function(setting){
var isBoxedBodyToggled, linkSettingValueToControlActiveState;
/**
* Determine whether the boxed body associated options should be displayed.
*
* @returns {boolean} Is toggled?
*/
isBoxedBodyToggled = function() {
return '' !== setting.get();
};
/**
* Update a control's active state according to the boxed_body setting's value.
*
* @param {api.Control} control Boxed body control.
*/
linkSettingValueToControlActiveState = function( control ) {
var setActiveState = function() {
control.active.set( isBoxedBodyToggled() );
};
// FYI: With the following we can eliminate all of our PHP active_callback code.
control.active.validate = isBoxedBodyToggled;
// Set initial active state.
setActiveState();
/*
* Update activate state whenever the setting is changed.
* Even when the setting does have a refresh transport where the
* server-side active callback will manage the active state upon
* refresh, having this JS management of the active state will
* ensure that controls will have their visibility toggled
* immediately instead of waiting for the preview to load.
* This is especially important if the setting has a postMessage
* transport where changing the setting wouldn't normally cause
* the preview to refresh and thus the server-side active_callbacks
* would not get invoked.
*/
setting.bind( setActiveState );
};
// Call linkSettingValueToControlActiveState on the site title and tagline controls when they exist.
api.control( 'boxed_body_border_color', linkSettingValueToControlActiveState );
});
});
})(jQuery, wp.customize);
I still get
customizer.js?v=1256189197&ver=4.7:111 Uncaught TypeError: api.control is not a function
at i (jquery.js?ver=1.12.4:2)
at Object.fireWith (jquery.js?ver=1.12.4:2)
at Function.set (customize-base.min.js?ver=4.7:1)
at Function.d [as set] (jquery.js?ver=1.12.4:2)
at c (customize-preview.min.js?ver=4.7:1)
at f. (customize-preview.min.js?ver=4.7:1)
at i (jquery.js?ver=1.12.4:2)
at Object.fireWith (jquery.js?ver=1.12.4:2)
at f.trigger (customize-base.min.js?ver=4.7:1)
If I add 'customize-controls' as a dependency then I get the error:
Uncaught TypeError: Cannot read property 'dirty' of undefined
at Function.initialize (customize-controls.min.js?ver=4.7:1)
at f.e.Class (customize-base.min.js?ver=4.7:1)
at f [as constructor] (customize-base.min.js?ver=4.7:1)
at new f (customize-base.min.js?ver=4.7:1)
at Function.create (customize-base.min.js?ver=4.7:1)
at String.c (customize-preview.min.js?ver=4.7:1)
at Function.each (jquery.js?ver=1.12.4:2)
at f. (customize-preview.min.js?ver=4.7:1)
at i (jquery.js?ver=1.12.4:2)
at Object.fireWith (jquery.js?ver=1.12.4:2)
Still not sure what I'm doing wrong :\
