Modify wp_check_post_lock to include the current user (prevent edit of the same page in multiple tabs)

Question

You could detect if you are in preview mode for that page and put a red bar at the top of the page that says “preview mode, do not edit”. That would remind the person that they should not edit that page. You can also make the red bar sticky and make it overlap the admin bar so they cannot edit if they want to. They when they scroll down the page the red bar would stay there.

Here is how you can detect if in preview mode
In your themes function.php file (preferable the function.php file of a child theme) add this code at the bottom:

function wpb_detect_preview_mode() {
    if (is_preview()) {
        ?>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                var warningBar = $('<div/>', {
                    text: 'DO NOT EDIT - PREVIEW MODE',
                    css: {
                        position: 'sticky',
                        top: 0,
                        left: 0,
                        width: '100%',
                        background: 'red',
                        color: 'white',
                        textAlign: 'center',
                        zIndex: 10000,
                        padding: '10px 0'
                    }
                });
                $('body').prepend(warningBar);
            });
        </script>
        <?php
    }
}

add_action('wp_enqueue_scripts', 'wpb_detect_preview_mode');

That’s it, you should be all set.

OR IF YOU WANT TO DO IT THE BEST PRACTICES WAY:

function wpb_detect_preview_mode() {
    if (is_preview()) {
        // Enqueue your custom JavaScript
        wp_enqueue_script('wpb-preview-script', get_template_directory_uri() . '/includes/js/preview-script.js', array('jquery'), mt_rand(00000, 9999999), true);
    }
}

add_action('wp_enqueue_scripts', 'wpb_detect_preview_mode');

Then in the .js file put this to create the red bar at the top of the browser window:

jQuery(document).ready(function($) {
    var warningBar = $('<div/>', {
        text: 'DO NOT EDIT - PREVIEW MODE',
        css: {
            position: 'sticky',
            top: 0,
            left: 0,
            width: '100%',
            background: 'red',
            color: 'white',
            textAlign: 'center',
            zIndex: 10000,
            padding: '10px 0'
        }
    });
    $('body').prepend(warningBar);
});

Another solution would be to use JavaScript detect if in preview mode and hide the edit link. You could also keep the edit page link but dynamically put this in the link and it will jump back to the other tab:

onclick="window.history.back(); return false;"

If that is on the link and they came from another tab via the preview link it is possible that the back link will work correctly and jump them back to the tab they were editing in.
You can create the script to work solely in the browser the person having issues is using.

Related Posts: