How to remove <code><p></code> tags from images in WordPress

Development News

By default WordPress will wrap any images you insert into a post in a paragraph tag. While this isn’t the worst crime semantically speaking it can make life difficult if you want to style those images a certain way. Typically you can target images within a paragraph tag using CSS however you cannot target the paragraph tag itself.

To get around this limitation here’s a snippet for your functions.php:

// img unautop
function img_unautop($pee) {
    $pee = preg_replace('/<p>\\s*?(<a .*?><img.*?><\\/a>|<img.*?>)?\\s*<\\/p>/s', '<div class="figure">$1</div>', $pee);
    return $pee;
}
add_filter( 'the_content', 'img_unautop', 30 );

In the second argument of preg_replace you edit it to wrap the image in any markup you like, in particular if your theme is HTML5 you would replace <div class="figure">$1</div> with <figure>$1</figure>.

Tags

Read more

How To Make Sticky Posts Even Stickier In WordPress

‘Stickiness’ isn’t just useful for the home page of a WordPress site, but useful elsewhere too. If you want sticky posts to stick everywhere, here’s a code snippet for you.

“Can you just install this WordPress plugin?” – Supply chain vulnerabilities and the art of “no”

Most of our clients know that the bulk of our site builds are still based on WordPress, even if that’s our own version of it. And that means a world of plugins and themes are available, right? No

MyEyesAreUpHere for better thumbnails in WordPress

Ethel’s not happy – whenever her artfully arranged photos are centrally cropped, they look wrong. And she’s fed up of only half her face being used in square thumbnails. So we decided to fix the problem..

43 responses to “How to remove <code><p></code> tags from images in WordPress”

  1. Hi! This code works wonders on my blogposts, but nothing at all happens on the static pages. Do you know why? Can I alter it in some way to make it work?

    I’m not used to working with php at all, so I’m sorry if this is a stupid question.

    1. Hi, the code expects some quite specific markup unfortunately. It might be the way the content has been entered or something to do with the theme. Could you post a link to one the pages with the problem?

  2. Amazing, thank you so much for sharing this! Worked perfectly.

    1. No problem. That’s a lovely looking website you’ve got by the way šŸ™‚

  3. Hi
    I have use this code but not remove p tag please help me

  4. You can also add this to your functions.php, to turn the html editor into a real html editor, removing both “auto P” and “texturize”.

    remove_filter (ā€˜the_contentā€™, ā€˜wpautopā€™);
    remove_filter(ā€˜the_contentā€™, ā€˜wptexturizeā€™);

    1. True, but the HTML editor is no good for our clients šŸ™‚

  5. also you сan use jQuery .unwrap() function
    insert between head tags
    $(“#content p img”).unwrap();

    1. While that’s true it’s too forceful an approach as you can have small inline images within a paragraph. My solution targets paragraphs that only contain a single image plus I’d rather not rely on javascript just to get my markup right.

      1. In some cases it may be helpful to combine solutions, your perfectly work for WP, but .unwrap() might be useful for other CMS. All depends from situation.
        Any way, thank you for your solution =)

  6. Please, check the html code.. it leaves a <p> behind.

  7. After a long research, your script worked smoothly!! Thank you šŸ™‚

    1. No problem Vicky, glad it was useful to you

  8. Hi, your script is a good idea, but have a problem, so many image have a class alignleft, alignright, aligncenter and other. How do I get this class and put at figure?

    1. I found a solution, if you look here https://gist.github.com/1696087 I’m complete your solution.

      1. Thanks Rick, good question and good addition. I’m surprised it works that way using apply_filters() to set a variable. I’ll have to do some more tests on this…

        1. The above doesnā€™t actually work, I was wondering if you managed to find a solution to that? Iā€™m struggling.

  9. Not working for me either, using WP version 3.3.1 ?

    1. Are you getting any errors? Would it be possible to post the html output somewhere too?

  10. Thank you so much! This is really an useful script and I used it in my theme šŸ™‚ Thanks a lot!

Comments are closed.