Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

Remove Paragraph Tags From Around Images

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

Comments

  1. Justin W Hall
    Permalink to comment#

    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

    • Sam
      Permalink to comment#

      Rather a late reply but it needs to go in the functions.php file inside php tags.

  5. Barsha
    Permalink to comment#

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

  6. James
    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. Thomas Bennett
    Permalink to comment#

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

  8. eduardo
    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. Leif@Registered-Nursing-Schools
    Permalink to comment#

    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.

    • David Hedley
      Permalink to comment#

      Hi Leif, wondered if you could you help me understand the difference between your preg_replace and the original code snippet above. Yours works for me and the original doesn’t, and I’m trying to understand why :)

      Thanks in advance

  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. Michael
    Permalink to comment#

    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. Phi Web Studio
    Permalink to comment#

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

  15. Amy
    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. Mathew Porter
    Permalink to comment#

    Appreciated, works perfectly, having a

    <

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

  17. Christopher Anderton
    Permalink to comment#

    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

    • Chris Coyier
      Permalink to comment#

      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.

  18. Hendrix

    Would help if you actually explained where to put this code.

    • Scott
      Permalink to comment#

      your themes functions.php file

    • Ralf
      Permalink to comment#

      Would help if you actually read the Article. It is litterally the first line under the code block:
      “For your functions.php file, or, see Reference URL for a plugin.”

  19. Frank
    Permalink to comment#

    This website is the best resource for CSS and beyond, never fails to provide answers to typical problems without the usual bs intro’s. Straight to the point with concise solutions that work. Beautiful design too! Thank you, Thank you, Thank you!

  20. noivq
    Permalink to comment#

    Thank you for this tut.
    You saved my time to day LOL

  21. Guilherme
    Permalink to comment#

    Thanks a lot!

  22. Peter
    Permalink to comment#

    This doesn’t remove the <p> if I set the image alignment to “center”, because it’s no longer an empty <p> tag; it becomes <p style="text-align: center;">.

  23. Mike
    Permalink to comment#

    Well, I have to thank you. I’ve been working on this problem for 11 hours now and just ran across your site. I made a child theme and modified the functions.php with your code and It works

  24. katrina
    Permalink to comment#

    life saver, thank you!

  25. Adrian
    Permalink to comment#

    Why would this work for everyone except me?

    Tried the original and also the other amended code (in the replies) in my functions.php, just can’t get rid of this damn P tag

    • Adam
      Permalink to comment#

      Doesn’t work for me either. I’m using the latest version of WordPress and don’t know if that makes a difference

  26. Scott
    Permalink to comment#

    Does not work…
    Code was insert into functions.php. no joy….

    • Scott
      Permalink to comment#

      CORRECTION! It did work

      I inserted the following code into “Appearence > Editor > Functions.php”

      I added the following to the file under

      <?php

      paste below……..

      function filter_ptags_on_images($content){
      return preg_replace('/\s?(|)?\s/s’, ‘\1′, $content);
      }
      add_filter(‘the_content’, ‘filter_ptags_on_images’);

  27. tiaurus

    And how remove paragraph tags from around img.alignone only?

  28. Damien
    Permalink to comment#

    Thanks so much for this. I’ve been fighting with this for over an hour, then I though to myself… instead of fighting this why not just remove the img from the tag. This is brilliant!

  29. Rotthbert
    Permalink to comment#

    It would be good to establish whether this is still working in WP3.9.2. Not having any luck so far…

  30. V
    Permalink to comment#

    Cheers !

  31. Nico
    Permalink to comment#

    My problem is that WP adds “ every time i press enter.
    this doesn’t HTML5 validate because the p tag was never opened.
    Any ideas how to fix this?

  32. umer
    Permalink to comment#

    how to remove p tag in woocommerce

  33. Sarah Hills
    Permalink to comment#

    This didn’t work for me initially… after fighting with regex for a couple of hours, I discovered that the problem was due to WordPress not putting an end </p> tag in (in my case the image is directly followed by a shortcode which I think was mucking things up). The browser automatically corrects – hence the </p> shows in console etc, but when I view source, it’s not there.

    I therefore modified filter as follows, which seems to work:

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

    Basically putting the end </p> tag in brackets followed by ? – making it optional.

    Not a regex expert by any stretch, so any improvements welcome!

  34. Robert
    Permalink to comment#

    Many thanks to you, solution worked instantly!

  35. soykje
    Permalink to comment#

    Hi,

    Sweet code! I also was looking for the same kind of method to customize the

    tag around iframes… I found this :

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

    This works fine in order to remove the

    tag, but in my case it would better be something like :

    function filter_ptags_on_images($content) {
        $content = preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content);
        return preg_replace('/<p>\s*(<iframe .*>*.<\/iframe>)\s*<\/p>/iU', '/<p class="iframe-container">\s*(<iframe .*>*.<\/iframe>)\s*<\/p>/iU', $content);
    }
    add_filter('the_content', 'filter_ptags_on_images');
    

    But obviously, this doesn’t work… :/ Could anyone help?

    I guess that most of us could use this trick, for images but also for iframes too, don’t you think?

    Thanks

  36. exoboy
    Permalink to comment#

    You can also choose to shut off p tag wrapping for all elements in your HTML by adding this code to your functions.php file in your theme.

    Here is the WP article that explains how to do it.

    http://codex.wordpress.org/Function_Reference/wpautop

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```