2

I've a dropdown control that lists all pages of the website.

When I select a page in the dropdown I would update the preview iframe to that page.

There is the following method to change the customizer previewUrl

wp.customize.previewer.previewUrl( url )

But I can't realize how and where exactly I should do this. The dropdown control has transport set to refresh and the preview will refresh automatically everytime the control value changes.

Maybe a solution could be to change the previewUrl before the customizer automatically refresh the preview.

Do you have any suggestions to do this? Thanks in advance.

2 Answers 2

0

Gonna have a go... say you have a theme option themeoption[id]... instead of setting transport refresh, set it to postMessage instead, and then add this code to create a callback that first gets the page URL via AJAX then sends that back to the previewUrl as you mentioned before refreshing...

add_action('customize_preview_init,'preview_override_loader');
function preview_override_loader() {
    add_action('wp_footer','preview_override_script');
    function preview_override_script() {
        $adminajax = admin_url('admin-ajax.php');
        echo "wp.customize('themeoption[id]',function(value) {
            value.bind(function(to) {
                console.log('Posted ID: '+to); /* debug point */
                jQuery.get({url:'".$adminajax.php"', 
                    {action:'get_preview_permalink',postid:to}, 
                    function(data) {
                        if (data) {
                            console.log('Permalink: '+data); /* debug point */
                            wp.customize.previewer.previewUrl(data);
                            wp.customize.previewer.refresh();
                        }
                    } 
                });
            });
        });"
    }
}

Then just add a small AJAX function to return the permalink... this is somewhat assuming that the dropdown control is saving/posting a single numeric post ID.

add_action('wp_ajax_get_preview_permalink','get_preview_permalink');
function get_preview_permalink() {
    $postid = $_GET['postid'];
    echo get_permalink($postid);
    exit;
}

Untested crazy workaround but it seems like it might do the trick..?

0

Try this one when you plan to change the current URL from controls panel: wp.customize.previewer.previewUrl( url )

or try this one while you intend to change the URL from preview frame: wp.customize.preview.send( "url", url )


Moreover, here is how to get the current preview URL from the controls panel: wp.customize.previewer.previewUrl()

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.