"Preview" Banner on Unpublished Content
Shows a clear banner at the top of the page whenever someone previews a draft, pending or scheduled post, so reviewers never mistake a preview for the live page or share it by accident.
Opens WPIDE on
Code
add_action( 'wp_body_open', function () {
if ( ! is_preview() || ! is_user_logged_in() ) {
return;
}
$post = get_post();
$status = $post ? get_post_status_object( $post->post_status ) : null;
$text = 'Preview: this page is not published yet';
if ( $post && 'future' === $post->post_status ) {
$text = 'Preview: scheduled for ' . get_the_date( get_option( 'date_format' ) . ' ' . get_option( 'time_format' ), $post );
} elseif ( $status && 'publish' === $post->post_status ) {
$text = 'Preview of unsaved changes';
} elseif ( $status ) {
$text = 'Preview: ' . $status->label;
}
printf(
'<div role="status" style="position:sticky;top:0;z-index:99997;padding:10px 16px;background:#dba617;color:#1d2327;font:600 14px/1.4 system-ui,sans-serif;text-align:center">%s%s</div>',
esc_html( $text ),
$post && current_user_can( 'edit_post', $post->ID ) ? ' · <a href="' . esc_url( get_edit_post_link( $post->ID ) ) . '" style="color:inherit">Back to editing</a>' : ''
);
} );Notes
Only shown to logged-in users viewing a preview; scheduled posts also show their publish date.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.