Loading...While writing a post in WordPress, you click on the Preview Post link to see how your post would look like after being published. But isn’t it a bit tedious to preview the post on a new page, each time while drafting? Wouldn’t you love it if you could “see as you type” how your post would appear on the blog? There isn’t a WordPress plugin for doing it though. A few modifications in the stylesheet and a few tweaks here and there will let you have the benefit.
To preview post in the WordPress editor, you’ll need to make slight modifications such that your WordPress editor inherits some styles from your theme. So go ahead and create a new file editorstyles.css and place it inside your theme’s folder. Now you’’ll have to add corresponding styles from your theme to this empty file. The first and foremost thing would be to add the CSS defining the width. You’ll manually need to go through your style.css file inside your theme folder and locate the line that defines the width of the post area in order to append the style to the WordPress editor. Or there’s an easier option. Download Firebug Addon[https://addons.mozilla.org/en-US/firefox/addon/1843/] for your Firefox browser. This will let you see the HTML and CSS codes for a particular section of your blog. When Firebug is installed, open it up and with the arrow icon in the Firebug tools, click on the upper part of the post area. Now you’ll see the corresponding HTML code inside the Firebug window. Next to it you can see the styles applied to that section like,
#content {
width:600 px;
padding:10px;
margin:20px;
}
Now add this line to your editorstyles.css file,
html .mceContentBody {
max-width:600px;
}
Replace the value of max-width with the width of your theme.
Next you’ll need to modify the headers that appear in the post. First note all the significant codes in your theme’s stylesheet for headers, H1, H2, H3 and so on. Inside your theme’s stylesheet they would appear somewhat like this,
.content h1{
font-size: 24px;
color: red;
text-align: center;
}
Copy all such codes regarding the headings and paste it to editorstyles.css. But do not include the div class (.content) in the code. It should be something like this:
h1{
font-size: 24px;
color: red;
text-align: center;
}
h2{
font-size: 24px;
color: red;
text-align: center;
}
and so on.
Next is the font color. Look through your style.css and find out the exact hex code of the font and the links.
html .mceContentBody ul li a:link, html .mceContentBody ul li a:visited {
border-bottom: 1px solid #e0e6e6;
color: #6c6c6c!important;
background: url(blue/bullet.png) no-repeat 8px 13px;
}
Similary add all other essential styles of your theme to the editorstyles.css file. Finally save it.
Now, you’ll need to tell WordPress to pull the styles from the editorstyles.css file in order to preview post from the WordPress editor. To do this, open up functions.php file of your theme or create one if it isn’t already there and paste this code into it.
add_editor_style(‘editorstyles.css’);
This will help wordpress locate the file in the theme’s folder. After completing these steps, open up your editor and you’ll be able to preview as you type in WordPress. If you insert the CSS codes correctly, the post in the Editor will look exactly as it will look on the blog.