Get current post ID of customizer preview window

All we need is an easy explanation of the problem, so here it is.

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(" ");
        console.log(previewBodyClassArr);
    } );
} );

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

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

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 );
      console.log('Sent!');
    } );
  } );
}( 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 ) );

Output:

enter image description here

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply