Simple and Effective Fix for the WordPress wpautop() Madness

You may be familiar with the problems related to WordPress wpautop() function. The most notable problem is that your WordPress pages will leave you with empty paragraphs. The empty paragraphs can’t be removed by simply removing

with a find and replace. It turns out that the result HTML doesn’t actually have

. But the empty paragrapsh do show up in the DOM tree.

A quick DOM inspection using Firebug, Chrome, etc. shows the empty paragraphs. But where do they come from? It turns out that if your html has paragraph tags around a block-level element, the browser will interpret the HTML as an empty paragraph before and after. Take the following example.


...

...

There are a lot of proposed solutions out there including rolling a custom wpautop function, removing the wpautop filter entirely, using the new :empty CSS pseudoselector, and even using JavaScript to remove empty paragraphs. Plus some people are advocating a find and replace which will have no effect for most people as I mention above.

After a lot of contemplation, I relized that there is a simple solution—removing instances of

tag immediately precede block-level elements and removing instances of closing tags for block-level elements that immediately precede

.

Putting the following code in your theme’s functions.php will do the trick.

add_filter('the_content', 'fix_autop');
add_filter('the_excerpt', 'fix_autop');
function fix_autop($content) {
$html = trim($content);
if ( $html === '' ) {
return '';
}
$blocktags = 'address|article|aside|audio|blockquote|canvas|caption|center|col|del|dd|div|dl|fieldset|figcaption|figure|footer|form|frame|frameset|h1|h2|h3|h4|h5|h6|header|hgroup|iframe|ins|li|nav|noframes|noscript|object|ol|output|pre|script|section|table|tbody|td|tfoot|thead|th|tr|ul|video';
$html = preg_replace('~

\s*<('.$blocktags.')\b~i', '<$1', $html); $html = preg_replace('~\s*

~i', '', $html);
return $html;
}

Happy WordPress coding!