Tech Tips

A Fix for HTML Issues with the WordPress Visual Editor

If you’ve done web development work with WordPress, you’ve probably run into this situation: you create a form or some other type of complex content in an external editor, test it as a static page, and it works fine. Then you create a new page in WordPress, paste the code into the HTML tab, and publish the page – but when you check the page, you see that WordPress has added <p> and <br /> everywhere there was a line break in the HTML code itself.

Fortunately, there is a fix – read on for the details.

The situation described above happens because of the way the visual editor in WordPress works. Normally, when you press enter in an WYSIWYG component (like CKEditor, or TinyMCE which WordPress uses), you can check the HTML source and you’ll see a corresponding set of <p> (paragraph) tags – and shift-enter will normally give you a <br /> tag. That doesn’t happen with the visual editor in WordPress, though – if click the HTML tab when editing a post or page, you won’t see any paragraph or break tags. Instead, WordPress adds those in when displaying the content on the public side of the site; it replaces line breaks in the text with <br /> tags and paragraph breaks with <p> tags.

To give an example, let’s say you enter the following text into the WordPress WYSIWYG (visual) editor:

Line one
Line two

Line three

And when you view the text in the “HTML” tab, you see the exact same thing, without any <p> or <br /> tags. But when WordPress displays that content on a public page, it adds the appropriate formatting tags and you end up with this as the HTML output:

<p>Line one<br />
Line two</p>
<p>Line three</p>

It appears that WordPress works this way so that people can post without using the visual editor, and insert line/paragraph breaks without having to know HTML. The downside is that, as mentioned above, it will also add line & paragraph tags to line breaks in the HTML code & that can be a problem – especially with HTML code created outside of the WordPress visual editor. In the past, I’ve resorted to the ugly workaround of using the search-and-replace function of a text editor to remove all line breaks in HTML code before pasting into WordPress (putting all of the HTML code on a single line) – but fortunately, there is a better solution.

The fix requires two plugins, the first is called “Disable WPAUTOP” – to install it from the WordPress dashboard, click “Plugins,” then “Add New,” then enter “Disable WPAUTOP” in the search field and click “Search Plugins.” It should be the first result, click the “Install Now” link; a few seconds later, you should see the “Successfully installed the plugin” message, click on the “Activate Plugin” link below it.

That will fix the primary issue: you can now enter custom HTML code into a WordPress post or page, without worrying that line/paragraph breaks in the code will be converted to <br /> and <p> tags. But, and here’s the catch, this can cause problems with pages/posts that WERE created using the visual editor. Jumping back to the earlier example, the text would look like this when displayed by a public template:

Line oneLine twoLine three

This is because, with the “autop” function disabled, WordPress no longer adds the <br /> and <p> tags when displaying that text content – and as mentioned above, the visual editor in WordPress is configured to not insert <br /> and <p> tags. As a result, the line & paragraph breaks are ignored just as they would be in a static HTML file.

Fortunately, WordPress uses a common WYSIWYG component for its visual editor (TinyMCE) – but unfortunately, the WordPress settings don’t give you any way to modify the TinyMCE configuration. This is the role filled by the second plugin, called “TinyMCE Advanced” – as the name suggests, it gives you access to advanced configuration options for TinyMCE. To install it from the WordPress dashboard, click “Plugins,” then “Add New,” then enter “TinyMCE Advanced” in the search field and click “Search Plugins.” It should be the first result, click the “Install Now” link; a few seconds later, you should see the “Successfully installed the plugin” message, click on the “Activate Plugin” link below it.

Unlike the “Disable WPAUTOP” plugin, TinyMCE Advanced has one additional setting that you’ll need to configure. Click on the “Settings” menu (the main WordPress settings), then click on “TinyMCE Advanced”. Once the settings page loads, scroll down and enable the last setting – it should be labeled “Stop removing the <p> and <br /> tags when saving and show them in the HTML editor”. Click the “Save Changes” button and you’re done.

To go back to the example text once again, you can enter the following text into the WordPress visual editor:

Line one
Line two

Line three

And now if you click on the HTML tab, you’ll see this :

<p>Line one<br />
Line two</p>
<p>Line three</p>

The downside is that you’ll have to open and re-save each existing post/page that was created using the visual editor, which can be impractical if you’re working on a site with a large amount of content. There doesn’t seem to be any way to update all of a site’s posts & pages en masse, although that could probably be done by editing the database contents directly.

So, to re-cap, you’ve now disabled the WPAUTOP function, allowing you to enter custom HTML without WordPress breaking the formatting by inserting extra <br /> & <p> tags – and you’ve configured the visual editor (TinyMCE) to generate <br /> and <p> tags, preserving the formatting of content created using the visual editor. The best of both worlds!

Comments