Is there any way to get information about the current page displayed in the preview window via the customizer API?

I need to obtain page information on initial customizer load and whenever a link in the preview window is clicked such as if it's an archive page, or singular post and post ID etc.

I've tried to grab page information by looking at the body class of the preview page but this doesn't quite work. Every time you click a link in the preview window it shows the CSS classes of the previous page:

wp.customize.bind( 'ready', function() {
    api.previewer.bind( 'ready', function() {
        var previewBodyClass = document.querySelector('#customize-preview iframe').contentWindow.document.querySelector('body').className;
        var previewBodyClassArr = previewBodyClass.split(" ");
    } );
} );

This approach is a bit of a hack anyway. I'm hoping that page info gets passed to the customizer API for consumption.

  • 1
    It would be better not to track the links, but respond to what is shown. See Weston's answer to my related question. – Joy Reynolds Mar 23 '18 at 23:11
  • I went an alternative route in the end. See the answer below. – dgwyer Mar 24 '18 at 14:53

I got this working by instead sending a custom event from the preview window to the customizer panel every time the preview window does a full page refresh, or the URL changes (and on initial customizer load).

I can send any data I require about the current page via this event. At the moment I'm still just focussing on the body classes but I'll no doubt update this to include more comprehensive information on the current page (via localized data).

Binding to the custom event allows me to show/hide controls in the customizer panel and also show notifications (very useful) depending on the current page and certain post meta fields if we're on a singular post.

Here's the basic code to send a custom event from the preview window with body class data, and then bind to it via the customizer panel.

Customizer preview window JS:

( function( $, api ) {
  'use strict';

  $( function() {
    api.preview.bind( 'active', function() {
      var bodyClass = document.querySelector('body').className,
          bodyClassArr = bodyClass.split(" ");

      api.preview.send( 'custom-event', bodyClassArr );
    } );
  } );
}( jQuery, wp.customize ) );

Customizer panel JS:

( function( $, api ) {
    'use strict';

    wp.customize.bind( 'ready', function() {
        wp.customize.previewer.bind( 'custom-event', function( data ) {
            console.log('Data from preview window: ', data);
        } );
    } );
}( jQuery, wp.customize ) );


enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.