I'm trying to extend customizer with some functionality but documentation is lacking for cases that are non-control related.

E.g. I’d like to load some url in preview after clicking the panel.

My two issues are:

  1. I can’t attach events to panels and fields because regular click and change don’t work because panels seem to be loaded not immediately.
  2. How would one then send a custom message to preview section?

1 Answer 1


I've documented how to do this in my post Navigating to a URL in the Customizer Preview when a Section is Expanded, though naturally you'd just use panels instead of sections.

This should get you what you want:

(function ( api ) {
    api.panel( 'my_panel_id', function( panel ) {
        panel.expanded.bind( function( isExpanded ) {
            if ( isExpanded ) {
                api.previewer.previewUrl.set( panelPreviewUrl );
        } );
    } );
} ( wp.customize ) );

You'd replace the panelPreviewUrl variable with whatever you want to navigate the preview to. And then you'd replace 'my_panel_id' with whatever the ID is for your panel.

  • Thanks. What if I wanted to manipulate panels in another way, e.g. clone them? Is it possible to obtain panel as a DOM node ./ jQuery object?
    – Runnick
    Dec 1, 2017 at 17:37
  • No, do not clone with jQuery. You have to use the wp.customize API to create new panels. You should ask a new question about doing that. Dec 1, 2017 at 17:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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