1

I've added JS to my responsive theme which changes the preview button on the post edit page into a link to an offsite page. The page contains a 320px x 568px iframe which shows the post in the mobile layout, much like this site. I pass the post's URL as an argument in the link's href, and the page uses that URL as the src of the iframe.

Our content guys have pointed out that the default preview button previews changes to the post even without saving. Can anyone suggest how I can replicate this behaviour using my mobile preview page? Like is there any way I can modify the preview button to send the normal preview URL to my mobile preview page?

I've found the click.post-preview handler in wp-admin/js/post.min.js which handles clicks on the preview button. It seems to submit the #post form. I've also found the submit.autosave-local handler in wp-includes/js/autosave.min.js which seems to be the one that fires when you preview. But I'm having trouble figuring out how it all fits together.

1

I found a nice way to do this using the preview_post_link filter, which allows you to rewrite the URL used by the preview operation. In my case I did something like:

add_filter( 'preview_post_link', function ( $link ) {
    return 'http://domain.com/mobile-preview/?src=' . urlencode($link) . '%26admin_bar=false';
} );

When I click my preview button WordPress opens up my custom URL. Easy, and no need for JavaScript - WordPress being brilliant again!

In case anyone does need to do it with JS, though, you can try this:

(function ($) {

    $(document).ready(function () {

        // Create URL for post preview
        var previewUrl = $('#preview-action').find('.preview').attr('href');
        var parser = document.createElement('a');
        parser.href = previewUrl;
        var postId = $('#post_ID').val();
        mobilePreviewUrl = parser.protocol + '//' + parser.host + '?p=' + postId;

        var href = mobilePreviewUrl ? 'http://domain.com/mobile-preview/?src=' + encodeURIComponent(mobilePreviewUrl) + '%26preview=true' : '';

        // Preview buttons
        var mobilePreviewBtn = $('<a/>').addClass('preview button').attr({
            'id'    : 'mobile-preview',
            'href'  : href,
            'target': '_new'
        }).text('Preview Mobile');
        $('#preview-action').prepend(mobilePreviewBtn);
        $('#post-preview').hide();
        mobilePreviewBtn.on('click', function(e){
            e.preventDefault();
            $(window).off( 'beforeunload.edit-post' );
            wp.autosave.server.tempBlockSave();
            $('form#post').submit();
            window.open(href, 'mobilePreview');
        });

    }); // end document ready

})(jQuery);

This grabs the URL from the default preview button's href attribute, and uses it as the href of a new custom mobile preview button. My mobile preview page is hosted offsite - when the user clicks on the custom preview button we're going to pass the default preview URL to this special page as a parameter called src. The preview page displays the URL in a mobile-sized iframe.

The click handler for the custom preview button turns off the beforeunload.edit-post event handler to stop the default "are you sure you want to leave this page?" confirm that pops up when you submit the post edit form. The next line calls the autosave JS method WordPress normally uses when you click the preview button. This saves the draft currently in the post editor. The next line submits the post saved in the editor, and the final line opens a new window with our custom preview URL.

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.