Post Preview Button for WordPress Fullscreen TinyMCE / HTML Editors

Unfortunately the plugins and snippets which I found on the other WP blogs didn’t work for me. So, I decided to create the button by myself.

This is the working solution:

Fullscreen post preview button in WordPress

You can install this cool button to the fullscreen editor toolbar in 2 easy steps. Here they are:

Step 1. jQuery

First of all you should create a .js file and put it somewhere into your current theme directory, for example I created the admin.preview.js file and place it into wp-content/themes/rudrastyh_test/js folder.

Then insert this code into your .js file:

jQuery(function($) {
	$('#post-preview').clone()
		.removeAttr('id')
		.removeClass('preview')
		.addClass('right')
		.css('margin', '0 0 0 5px')
		.click(function(event) {
			/* copying the content into non-fullscreen editors */
			$('#title').val( $('#wp-fullscreen-title').val() );
			/* for HTML editor */
			if( $('#wp-fullscreen-mode-bar' ).hasClass( 'wp-html-mode' ) ) {
				$('#content').val( $('#wp_mce_fullscreen').val() );
			/* for tinyMCE editor */
			} else if( $('#wp-fullscreen-mode-bar' ).hasClass( 'wp-tmce-mode' ) ){
				tinyMCE.get('content').setContent(tinyMCE.get('wp_mce_fullscreen').getContent());
			}
			/* emulates click on the original preview button */
			$('#post-preview').click();
			event.preventDefault();
		})
		.insertBefore('#wp-fullscreen-save input.button-primary');
 
	/* this needs to fix the bug when post content didn't update after switching to TinyMCE or HTML */
	$('#wp-fullscreen-modes a').click(function(){
		if( $('#wp-fullscreen-mode-bar' ).hasClass( 'wp-html-mode' ) ) {
				$('#content-html').click();
		} else if( $('#wp-fullscreen-mode-bar' ).hasClass( 'wp-tmce-mode' ) ){
				$('#content-tmce').click();
		}
	});
});

Step 2. Enqueueing the script

In this step you need to include the .js file you’ve just created to the «Add Post» and «Edit Post» pages in the WordPress admin area. Insert this code into the functions.php of your current WordPress theme.

function mr_fullscreen_preview_button() {
	wp_enqueue_script('fullscreen-preview', get_stylesheet_directory_uri() . '/js/admin.previewbutton.js', array('jquery'), null, true);
}
 
add_action('admin_print_scripts-post-new.php', 'mr_fullscreen_preview_button');
add_action('admin_print_scripts-post.php', 'mr_fullscreen_preview_button');

That’s all! Enjoy the button.

…or just add the following code to the functions.php

If you didn’t find the install instruction easy, you can skip the above steps and just insert the below code into the functions.php:

if( !function_exists('mr_fullscreen_preview_button') ){
	function mr_fullscreen_preview_button() {
		$button = "<script>
		jQuery(function($) {
			$('#post-preview').clone().removeAttr('id').removeClass('preview').addClass('right').css('margin', '0 0 0 5px').click(function(e) { $('#title').val( $('#wp-fullscreen-title').val() ); if( $('#wp-fullscreen-mode-bar' ).hasClass( 'wp-html-mode' ) ) { $('#content').val( $('#wp_mce_fullscreen').val() ); } else if( $('#wp-fullscreen-mode-bar' ).hasClass( 'wp-tmce-mode' ) ){ tinyMCE.get('content').setContent(tinyMCE.get('wp_mce_fullscreen').getContent()); } $('#post-preview').click(); e.preventDefault(); }).insertBefore('#wp-fullscreen-save input.button-primary');
			$('#wp-fullscreen-modes a').click(function(){ if( $('#wp-fullscreen-mode-bar' ).hasClass( 'wp-html-mode' ) ) { $('#content-html').click(); } else if( $('#wp-fullscreen-mode-bar' ).hasClass( 'wp-tmce-mode' ) ){ $('#content-tmce').click(); }});
		});</script>";
		echo $button;
	}
 
	add_action('admin_footer-post-new.php', 'mr_fullscreen_preview_button');
	add_action('admin_footer-post.php', 'mr_fullscreen_preview_button');
}

I really hope that my preview button makes your life easier. If you have some questions, please leave your comment below.

# WordPress

Misha Rudrastyh

Misha Rudrastyh

Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.

Need some developer help? Contact me

Follow me on Twitter