Post Preview Button for WordPress Fullscreen TinyMCE / HTML Editors

I think that default WordPress fullscreen editor is very easy to use. But there is one problem – when you want to preview your post on the blog, you need to switch off the fullscreen mode each time. It is very painful. Unfortunately the plugins and snippets which I found on the other WP blogs […]

November 7, 2013 / #wp-admin

I think that default WordPress fullscreen editor is very easy to use. But there is one problem – when you want to preview your post on the blog, you need to switch off the fullscreen mode each time. It is very painful.

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');
}

…or download the plugin

If you don’t want to work with code, install the plugin then. I prepared it special for you:
[demo url2=”https://rudrastyh.com/plugins/wp-fullscreen-preview/wp-fullscreen-preview.zip”]
I really hope that my preview button makes your life easier. If you have some questions, please leave your comment below.

Only the best of WordPress

once a week, no spam

Leave your question or feedback

phpjsHTMLCSSSQLCode
Please, enter a comment
Please, enter a name
Incorrect email