I am trying to change the functionality of the preview button so the URL can be changed to the address I want. I am using the code below

function preview_link_fix( $preview_link ){

    $mydomain = 'http://localhost:3001/preview';
    $post = get_post( get_the_ID() );

    $args = array(
        'post'    => $post,
        'preview' => 'true'
    return add_query_arg( $args, $mydomain );

This basically takes the preview to my react front end page. This is working fine for the custom post types and the post only in the case if they are published and the posts which are in the draft the button is not working but the preview option which is below the post in the post-list is working.

So the preview option which is shown in the image is working but for the preview button inside the edit, post page is not working. Please anybody can help me with which this problem. enter image description here

  • You can’t pass WP_Post object as query arg... – Krzysiek Dróżdż Feb 5 '19 at 8:49
  • @KrzysiekDróżdż but it is working if I pass the post_object, the only place it is not working in the post edit page, it is even working with the preview option showed in the image. – Mohit Nihalani Feb 5 '19 at 8:58

I encountered the same issue and after some research, I came across the following solution.

For context, there is a bug on gutenberg and there is no platform specific way to change the preview link yet.

Add the following code to your functions.php:

// Workaround script until there's an official solution for https://github.com/WordPress/gutenberg/issues/13998
function fix_preview_link_on_draft() {
    echo '<script type="text/javascript">
        jQuery(document).ready(function () {
            const checkPreviewInterval = setInterval(checkPreview, 1000);
            function checkPreview() {
                const editorPreviewButton = jQuery(".editor-post-preview");
                const editorPostSaveDraft = jQuery(".editor-post-save-draft");
                if (editorPostSaveDraft.length && editorPreviewButton.length && editorPreviewButton.attr("href") !== "' . get_preview_post_link() . '" ) {
                    editorPreviewButton.attr("href", "' . get_preview_post_link() . '");
                    editorPreviewButton.on("click", function() {
                        setTimeout(function() { 
                            const win = window.open("' . get_preview_post_link() . '", "_blank");
                            if (win) {
                        }, 1000);

add_action('admin_footer', 'fix_preview_link_on_draft');

Link to solution: https://github.com/WordPress/gutenberg/issues/13998#issuecomment-568698680

All credit to the contributor - Tvanro

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.