wp.customize is not a function - php

Question

So I've been developing my own theme on a Mutlisite and one of the test sites I'm working on using a default theme I'm building is outputting the following error:
Uncaught TypeError: wp.customize is not a function
at HTMLDocument.<anonymous> (customizer.js?ver=4.9.5:3)
at i (jquery.js?ver=1.12.4:2)
at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
at Function.ready (jquery.js?ver=1.12.4:2)
at HTMLDocument.K (jquery.js?ver=1.12.4:2)
My functions.php has these functions included:
<?php
// Include Theme Customizer Settings
require_once('includes/customizer.php');
//
// MEDIA LIBRARY QUEUE
add_action('wp_enqueue_scripts', 'my_register_javascript', 100);
function my_register_javascript() {
wp_register_script('mediaelement', plugins_url('wp-mediaelement.min.js', __FILE__), array('jquery'), '4.8.2', true);
wp_enqueue_script('mediaelement');
}
// REQUIRE BS MENU
require_once get_template_directory() . '/includes/class-wp-bootstrap-navwalker.php';
// REGISTER MAIN MENU LOCATION
function register_my_menu() {
register_nav_menu('main-menu',__( 'Main Menu' ));
}
add_action( 'init', 'register_my_menu' );
// ADD LOGO SUPPORT TO THEME
function pb_custom_logo() {
add_theme_support( 'custom-logo', array(
'header-text' => array( 'site-title', 'site-description' ),
));
}
add_action( 'after_setup_theme', 'pb_custom_logo' );
function theme_prefix_the_custom_logo() {
if ( function_exists( 'the_custom_logo' ) ) {
the_custom_logo();
}
}
// Add thumbnail support to posts
add_theme_support( 'post-thumbnails' );
// Create Services Post Type
function services_posttype() {
register_post_type( 'Services',
// CPT Options
array(
'labels' => array(
'name' => __( 'Services' ),
'singular_name' => __( 'Service' )
),
'public' => true,
'has_archive' => true,
'supports' => array('title','editor','thumbnail'),
'rewrite' => array('slug' => 'services'),
)
);
}
// Hooking up our function to theme setup
add_action( 'init', 'services_posttype' );
?>
Customizer.php:
<?php
function wpdocs_scripts_method() {
wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/customizer.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_scripts_method' );
add_action( 'customize_register', 'pb_customizer_settings' );
function pb_customizer_settings( $wp_customize ) {
//
// MAIN HOME BANNER
//
$wp_customize->add_section( 'pb_front_page_banner' , array(
'title' => 'Front Page Banner',
'priority' => 30,
));
$wp_customize->add_setting( 'banner_image' , array(
'transport' => 'refresh',
));
$wp_customize->add_control(
new WP_Customize_Image_Control(
$wp_customize,'banner_image',array(
'label' => 'Banner Image',
'section' => 'pb_front_page_banner',
'settings' => 'banner_image',
'priority' => 2,
'description' => 'This will change your photo on the main header of the front page.',
)
)
);
// BANNER TITLE
$wp_customize->add_setting('banner_title', array(
'default' => 'This is the main header content.',
'transport' => 'postMessage',
));
$wp_customize->add_control( 'banner_title', array(
'label' => 'Banner Title',
'section' => 'pb_front_page_banner',
'type' => 'text',
'description' => 'This is the main title on the banner.',
));
// BANNER PARAGRAPH
$wp_customize->add_setting('banner_para', array(
'default' => 'This is the main content which will be displayed in a paragraph.',
'transport' => 'postMessage',
));
$wp_customize->add_control( 'banner_para', array(
'label' => 'Banner Paragraph',
'section' => 'pb_front_page_banner',
'type' => 'textarea',
'description' => 'This is the text under the main title on the banner.',
));
/////////////////////
// CONTACT DETAILS //
/////////////////////
// Create the section
$wp_customize->add_section('pb_foot_contact' , array(
'title' => 'Contact Details',
'priority' => 30,
));
//Telephone
$wp_customize->add_setting('contact_det_tel', array(
'default' => '',
'transport' => 'postMessage',
));
$wp_customize->add_control('contact_det_tel', array(
'label' => 'Telephone Number',
'section' => 'pb_foot_contact',
'type' => 'text',
'description' => 'This will display your telephone number so customers can call you.',
'input_attrs' => array(
'placeholder' => __('e.g 0151 123 4567'),
)
));
//Email Address
$wp_customize->add_setting('contact_det_email', array(
'default' => '',
'transport' => 'postMessage',
));
$wp_customize->add_control('contact_det_email', array(
'label' => 'E-Mail Address',
'section' => 'pb_foot_contact',
'type' => 'text',
'description' => 'This will show customers what E-Mail Address you can be contacted on.',
'input_attrs' => array(
'placeholder' => __( 'e.g info#powerbookings.com'),
)
));
//Company Address
$wp_customize->add_setting('contact_det_address', array(
'default' => '',
'transport' => 'postMessage',
));
$wp_customize->add_control('contact_det_address', array(
'label' => 'Company Address',
'section' => 'pb_foot_contact',
'type' => 'textarea',
'description' => 'This will display your trading address to your customers. Create a new line by typing <code><br></code>. ',
'input_attrs' => array(
'placeholder' => __('Company Address'),
)
));
//Company Address
$wp_customize->add_setting('contact_det_opening', array(
'default' => '',
'transport' => 'postMessage',
));
$wp_customize->add_control('contact_det_opening', array(
'label' => 'Opening Hours',
'section' => 'pb_foot_contact',
'type' => 'textarea',
'description' => 'Show your customers what times you are open, and when you are closed. Create a new line by typing <code><br></code>.',
'input_attrs' => array(
'placeholder' => __('Opening Hours'),
)
));
}
?>
Customizer.js
jQuery(document).ready( function($){
wp.customize( 'banner_title', function( value ) {
value.bind( function( newval ) {
$( '.mi-content h1' ).html( newval );
} );
} );
wp.customize( 'banner_para', function( value ) {
value.bind( function( newval ) {
$( '.mi-content p' ).html( newval );
} );
} );
wp.customize('contact_det_tel', function(value) {
console.log("postMessage");
value.bind(function(newval) {
$('.contact_det_tel').html(newval);
} );
});
wp.customize('contact_det_email', function(value) {
value.bind(function(newval) {
$('.contact_det_email').html(newval);
} );
});
wp.customize('contact_det_address', function(value) {
value.bind(function(newval) {
$('.contact_det_address').html(newval);
} );
});
wp.customize('contact_det_opening', function(value) {
value.bind(function(newval) {
$('.contact_det_opening').html(newval);
} );
});
});
Now it seems that the functions work when I edit the site using the WordPress customizer but when I view the site on the front end it gets the first message.
I'm assuming I'm linking the files somewhere else in the theme but I can't seem to grasp where, or how it's being included. The file in question is the customize.js so I just need to figure out what it is that's causing it.
That's all the information that I think is relevant to this, if someone has a solution I would be grateful if they could help me.
Many thanks

Answer 1

I ran into this same issue recently, and tried a number of things to solve the issue, including moving my hook out of functions.php and into, my customiser.php itself.
I managed to solve it by adjusting the following thanks to the WP
Codex;
add_action( 'customize_preview_init', 'theme_preview_register' );
function theme_preview_register() {
// Customizer JS
wp_enqueue_script(
'wpa-customizer',
get_stylesheet_directory_uri() . '/js/wpa-customizer.js',
array( 'jquery','customize-preview' ), // <<< Specify Dependencies...
true );
}

Answer 2

#Matty Clarke, you should enqueue your script in customize_preview_init hook.
i.e. This line
add_action( 'wp_enqueue_scripts', 'wpdocs_scripts_method' );
becomes
add_action( 'customize_preview_init', 'wpdocs_scripts_method' );