Improved Proofreading in WordPress Part II

In my last post I wrote about one technique proofreaders use when checking their documents, and offered simple instructions regarding how to modify a WordPress 1.5.2 wp-admin.css file to help bloggers use the technique. Unfortunately, the 2.x versions require changes to post.php to achieve the same effect.

This post shows how to have more than one Post Preview section on the Write Post page in 2+ versions. It involves slightly altering the /wp-admin/post.php file with a small portion of ever-so-slightly altered code that was originally included in the same file from the earlier 1.5.2 versions. If you decide to try this, any WordPress upgrade you perform will overwrite these changes, and the programmers occasionally make changes to this file (version 2.0.5 to 2.1.2 had changes), so saving it from version to version is not a very good idea. You’ll also want to make sure you save a backup copy of the original file so you can easily undo these changes.

These instructions are specific to WordPress 2.1.2. This has also been tested to work in WordPress 2.0.5.

Portions of this may seem redundant with the last post, which was specific for 1.5+, other portions will not, but it’s probably a good idea to read Improved Proofreading In WordPress anyway, as that’s the post where I explain why this is a valuable technique.

Let’s get on with it.

Download post.php from your /wp-admin/ directory, and open the file in a text editor. After line number 69’s (explicitly specific to v2.1.2) close php, which reads as:

?>

Or right at the beginning of line 70, or the two lines that read as:

<div id='preview' class='wrap'>
<h2 id="preview-post"><?php _e('Post Preview (updated when post is saved)'); ?></h2>

add two or three carriage returns (hit enter a few times). Please note the ‘less than’ and ‘greater than’ characters above are encoded, so you generally can’t copy them into search and expect to find the matching text.

Next, copy all the code in the text file named post.php212.modifications.txt and paste it into the blank line or lines you just added to the post.php open in your text editor. Save the file, then upload it to the /wp-admin/ directory of your weblog. This code is from the relevant section from WordPress 1.5.2’s post.php, except for a couple of small changes.

Because ‘post.php212.modifications.txt’ includes two nearly but not precisely identical sections, the changes to the CSS are slightly different than in my previous post.

Next, download wp-admin.css, located in the /wp-admin/ directory, then open it in a text editor. Find the line that reads as:


p, li, dl, dd, dt {
line-height: 130%;
}

Delete the “p” so it reads as:


li, dl, dd, dt {
line-height: 130%;
}

Find the line that reads, “textarea, input, select” (should be next). Skip to the bottom of that section, after the closing “}”, and add a few carriage returns or blank lines.

Copy the following:

/*alteration*/
.storycontentmonospace {
font-family: “Courier New”, Courier, monospace;
font-size: 14px;
letter-spacing: .1em;
line-height: 2.1em;
}

/*alteration*/
.storycontentsansserif {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
letter-spacing: .07em;
line-height: 2.0em;
}

and paste it into the blank lines you just added. Save that file, and upload it back to your /wp-admin/ weblog directory.

That’s it. It is useful to remember that the font families listed in the CSS, as well as the order they appear in and whether your machine has them, control which one displays on your workstation. If you don’t have the first one listed on your local machine, it looks for the next one listed until it finds a matching font. Consequently, you may need to either download fonts onto your machine, or change the first font listed (with respect to the added CSS commands) to a complete set (regular, bold, italic regular, and italic bold) that you do have.

Regarding the additions you just made to post.php (the single cut and paste described above), note there are two sections added plus the default iframe section. This allows you to have a total of three (3) Post Preview sections displayed in your Write Post page, each one of which will have a different font for proofreading. This may be overkill for you. If so, you can delete all or either of those two added sections.

As a final note, the WP 2.1.2 modified Post Preview display shows the ‘read more’ tag, as well as the ‘code’ tag, which didn’t appear in earlier 1.5.2+ versions. I don’t know why this is, I’m not particularly familiar with the ‘under the hood’ changes to the 2.0+ series codebase.