Stop Fighting with Me WordPress

Writing last week's post (Future Proofing Your Google Analytics Code for Tracking PDFs) introduced me to one of WordPress' major flaws. If you want to display code (HTML, PHP, etc.) in your post, there is a good chance that WordPress will mess it up.

If there is a blank line in the code, for example, WordPress thinks you're starting a new paragraph and adds a paragraph tag after the post is saved. You may be able to avoid this by replacing the hard-return (Enter) with two soft-returns (Shift+Enter). But if you attempt to edit the post again, WordPress replaces the soft-returns with a hard-return causing the paragraph tag to come back.

The problem with the paragraph tag was that it broke my design. Looking at the screenshot below (see Figure 1), all of the code is supposed to appear in a gray box.

Figure 1. Broken Design Caused by Paragraph Tag

In Figure 1, you may have also noticed that WordPress replaced a reference to "8)" with the corresponding Emoticon (aka the "cool" smiley face). The easy way around this issue was to avoid leaving a space after the closing parenthesis.

Preventing WordPress from Changing Your Code

Thanks to a post by Josh Stauffer titled WordPress, stop changing my HTML code!, I was able to temporarily prevent WordPress from changing aspects of my code.

Before writing (or editing) a post that displays code like HTML, you need to disable the "Visual" editor in WordPress. To disable the editor:

• Log into the admin area for your WordPress blog
• Click Users
• Find your profile and click Edit
• Check the "Disable the visual editor when writing" option (see Figure 2)
• Click Update Profile
• Write/Edit your post

Figure 2. Disable Visual Editor Check Box

Then you just need to re-enable the visual editor for writing posts that don't need to display code. It's not an elegant solution, but it gets the job done.

Feedback

Do you have a different solution to prevent WordPress from changing code? Or maybe you want to share your WordPress struggles? If so, please enter them in the comments field below.