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. 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. 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.

    • 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. 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.

  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. 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. 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. 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?

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".