WordPress Removing Empty P Element’s Close Tag

Over the years, WordPress’s ability to convert text from the WYSIWYG editor into mostly valid HTML has largely improved, but it is still not perfect.

Recently, while setting up a somewhat creative FAQ page for a client, which uses the WordPress More Button to break up the different sections, I ran into an issue where WordPress was removing the closing tag from an empty paragraph.

Anyone who works with WordPress has likely run into similar issues as those described below and is probably well aware of this ‘fix’ or ‘work-around.’

WordPress’s content filters have, for the most part, significantly improved since the early days, as has TinyMCE. Even using the Visual section of the editor produces mostly acceptable html, so unless the page is doing some crazy stuff, clients are almost always able to edit pages using the visual section.

Of course, I typically avoid WYSWYG editors whenever possible, as they are far from perfect, but for non-techies, they have their place.

Problem and Solution

Essentially, after the Faq section title, I was using an empty <p> element to act as a divider between the Faq Question and the Answer.

During processing, I retrieved the un-modified content, processed it, then before printing it, used “apply_filters” to automatically add html to the content.

However, after using apply_filters, the closing tag of the <p> element was being removed.

As an aside, this is why you always run everything through w3c validation, even if there are some elements you know won't pass. At least for any sort of paying gig.

In any case, the fix is to add a Non-Breaking Space in between the empty paragraph, so something like <p>&nbsp;</p>.