Skip to content

Instantly share code, notes, and snippets.

Last active January 3, 2023 01:11
  • Star 64 You must be signed in to star a gist
  • Fork 22 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Remove empty p tags from WordPress posts
add_filter( 'the_content', 'remove_empty_p', 20, 1 );
function remove_empty_p( $content ){
// clean up p tags around block elements
$content = preg_replace( array(
'#</(div|aside|section|article|header|footer)>\s*<br ?/?>#',
), array(
), $content );
return preg_replace('#<p>(\s|&nbsp;)*+(<br\s*/*>)*(\s|&nbsp;)*</p>#i', '', $content);
Copy link

Doesn't work.

Copy link

Change the regex to <p>(\s|&nbsp;)*+(<br\s*/*>)?(\s|&nbsp;)*</p> to match &nbsp; as whitespace as well.

Copy link

thanks ninnypants and jhogervorst for fix
nice hack

Copy link

Added more support for block level elements recently will probably turn this into a plugin on .org just to make things easier

Copy link

deemi commented Feb 9, 2015

OSM ... Work Perfectly

Copy link

ctam19 commented Mar 11, 2015

Works great. Thanks for your work!

Copy link

This works great! I had one issue where a plugin was outputting HTML comments and that was interfering with the regex (#<p>\s*<(div|aside|section|article|header|footer)# doesn't match <p><!--foo--><div>). My solution was to just strip out all of the comments before applying this filter, using this regex <!--(.*?)-->.

Copy link

Seems WP 4.3 broke this? ANyone else?

Copy link

Use Jquery : $( 'p:empty' ).remove();

Copy link

jquery option is the best, add it to custom.js , under jquery document ready function

Copy link

@kprovance Does not work for me either on WP4.3.1 :(

Copy link

karsai5 commented Feb 9, 2016

Worked wonders for me. This will literally save me hours trying to hunt down empty lines.

@ThornedRose it seems to work again in 4.4.1

Copy link

JiveDig commented Apr 4, 2016

Wow... this is really awesome. Thanks!

Copy link

The guy posted this. (You are awesome 👍 )

Copy link

Glad To Report That It's Still Working

Copy link

2017 and still working! Awesome work!

Copy link

Like this

Copy link

p:empty { display:none; }

Copy link

bradhogan commented Jan 15, 2018

Not working for me.. I have a shortcode that outputs a link along with a div container that is hidden with CSS and called when the link is clicked (as a modal). The div container, being a block element, causes the shortcode to end the paragraph early, show the div and then just has the remaining text sort of floating there unwrapped by anything.

So... let's say I have something like this in the tinymce:
Blah blah blah [popup id=5 text="click me to open the popup this should be inline with this blah blah paragraph"] and then the sentence continues.

The HTML output ends up being:

<p>Blah blah blah   </p>
<div id="popup-5" class="popup-modal">click me to open... paragraph</div>
and then the sentence continues.

Was hoping your function would get me output that looked like:
<p>Blah blah blah <div id="popup-5" class="popup-modal">click me to open... paragraph</div> and then the sentence continues.</p>

Any ideas? Thank you!

Copy link

EliW commented Sep 10, 2019

Wanted to chime in to say 'thank you' for this gist. I was finally fed up with a crappy theme I'm using that aggressively added empty tags every time you hit save on a page. (Going to be moving away from the theme in the future, but gotta get through the next 2 months first). This is/was a life saver.

Copy link

justiceakorede commented Nov 18, 2022

Adding this jQuery works perfectly fine for me

$('p').each(function() { const $this = $(this); if($this.html().replace(/\s|&nbsp;/g, '').length === 0) $this. Remove(); });

If the p tag is completely empty without space or &nbsp, then this should work
$( 'p:empty' ).remove();

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment