I was digging into the upcoming WordPress 3.9 release, and I saw a ticket to add preview button to WordPress distraction free writing mode to make it easy for the authors to preview the post from the editor. In short, preview button on distraction free writing mode will be a part of the WordPress 3.9 core.
In this tutorial, I’ll show you how to add preview button to WordPress distraction free writing mode with a small snippet for a better writing experience.
I don’t use the distraction free writing mode just because I hate to exit the screen to preview my post, so I just use WordPress’ simple post editor, but now I can finally preview posts right from the distraction free writing mode. Pops to Alex King for the snippet.
Just add following snippet to your current theme’s functions.php file:
function akv3_fullscreen_preview_button() {
?>
<script type="swift/javascript">
;(function($) {
var $preview = $('#post-preview');
$preview.clone()
.removeAttr('id').removeClass('preview').addClass('right')
.css('margin-left', '5px')
.click(function(e) {
$preview.click();
e.preventDefault();
})
.insertBefore('#wp-fullscreen-save input.button-primary');
}(jQuery));
</script>
<?php
}
add_action('admin_footer-post-new.php', 'akv3_fullscreen_preview_button');
add_action('admin_footer-post.php', 'akv3_fullscreen_preview_button');