treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Remove Paragraph Tags From Around Images

Last updated on:

In case you want to have <img> in your content but not have them get "Auto P'd" like WordPress likes to do.

example of problem:

blah blah blah

<img src="monkey.jpg">

blah blah blah

turns into:

<p>blah blah blah</p>

<p><img src="monkey.jpg"></p>

<p>blah blah blah</p>

We can fix it with this:

function filter_ptags_on_images($content){
   return preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content);
}

add_filter('the_content', 'filter_ptags_on_images');

For your functions.php file, or, see Reference URL for a plugin. With this in place, we get:

<p>blah blah blah</p>

<img src="monkey.jpg">

<p>blah blah blah</p>

... meaning things like floating the images will be much easier.

Reference URL

View Comments

Comments

  1. I just started doing this and ya, this is a perpetual problem. Not so much with sites that I manage but for clients. Carriage returns (or lack there of) and a client that like to play with the WYSIWYG editor and you have a recipe for disaster.

    In the past I’ve used the following bit of JS in situations where the user might have JS turned off, there alternative doesn’t break anything… Not really the same and certainly not as reliable, but can provide you with some added flexibility.

    	 $("p:has(img)").css('yadda... yadda..'); 
  2. Michelle McGinnis
    Permalink to comment#

    Thank you! Ye gods, thank you.

  3. Mark
    Permalink to comment#

    How would I achieve the same in Joomla?

  4. Mark
    Permalink to comment#

    Sorry forgot to add: I inserted the PHP code in my index.php template file, when I run it I get the following error:

    Fatal error: Call to undefined function add_filter() in

  5. Permalink to comment#

    Thank you for this code, I am trying to do this but not figure it out.

  6. Permalink to comment#

    Hi there – the original post (WordPress P Tag removal on Fublo blog) has been updated with code for stripping p tags on iframes too.

    Plus there are links to other WP articles with related discussions and regular expressions for HTML5 tweaks.

  7. Thanks. This is very helpful. Especially when the client likes to toy with the HTML too…

  8. Permalink to comment#

    you can allaws change the for a to avoid problems if you have with some padding or something in your css.

  9. And because I did not properly format my code in my comment, here is the complete version:

    
    function filter_ptags_on_images($content){
        return preg_replace('/<p>\\s*?(<a .*?><img.*?><\\/a>|<img.*?>)?\\s*<\\/p>/s', '\1', $content);
    }
    add_filter('the_content', 'filter_ptags_on_images');
    
    

    Leif

    • Justin
      Permalink to comment#

      Thank you!

      Every site has the same version Chris does and I was having mixed results. Just plugged in your updated code and we’re back in business.

  10. Tara
    Permalink to comment#

    How would you wrap each image in the post with a div using this function??

  11. Bryan Nichols

    I ♥ you. Thanks for the goodness :)

  12. Unfortunately I’ve found this achieves very mixed results. The second a client starts messing around and maxing posts in the WYSWYG editor this hack can break.

    I tested it out on a multi-user site I created and found it worked on the fraction of the posts.

  13. Chris
    Permalink to comment#

    Thanks for this tip – the paragraph tag around images was driving me nuts!

  14. Awesome! Should be standard but at least there is CSS-Tricks to save the day!

  15. Permalink to comment#

    Whenever I have a problem, I know I can find the answer on CSS Tricks. Seriously, I’m a big fan. Can I have your autograph? Worked like a charm.

  16. Appreciated, works perfectly, having a

    <

    p> wrapped around my tags was messing with my coding ocd!

  17. I know this post a bit old. However, according to Samuel Wood (Otto) (WordPress celeb) this is invalid HTML. Read the post here (5 years old! But still valid): http://wordpress.org/support/topic/wp-adds-paragraph-tags-to-images?replies=6

    • That’s totally false.

      It’s not invalid to not have an image in a block level element. I don’t think it ever has been.

Leave a Comment

Use markdown or basic HTML and be nice.