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.

How to write a useful bug report

Lately we’ve been creating custom software for clients – software with unique workflows and intricacies that may sometimes have bugs or where requirements might not be perfectly understood

“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

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

  1. Clever idea. I use with a HTML5 enabled theme. When a theme reports itself to support HTML5, wordpress output when a caption is present, but when not. So I changed the regexp to make the latter case look like the former, so that all images have the same html. This is my code:

    add_filter(‘the_content’, function ($html) {
    return preg_replace(‘/\s*()?\s*\s*()?\s*/si’, ‘$1$9’, $html);
    }, 100);

    1. Unfortunately, the code in my comment scrambled. Just as well, because it ballae out in special circumstances. I have polished it and made it more robust. I have divided the code of Google Docs: goo.gl/xSJtJY.

      https://goo.gl/xSJtJY

  2. Hi
    Thanks for the code. Dreamweaver says «invalid mark up» for:
    But the code seems to work.
    regards
    theo

    1. The code was omitted. «»

      1. sorry, hope this works

  3. You’re a genius, worked like a charm. Thank you!

  4. Hello, Your script solved my problem . Thanks.

  5. Thank you! Just what I was looking for! Pesky image embed was not working in my favor until I found your snippet! Thanks!

  6. Hi,

    Where exactly do I put it in the functions.php. It’s quite a huge file easily breakable.

    Thanks

    1. Hi

      If you’re having difficulties knowing where to put the snippet, consider using it to create a mini plugin of your own.

  7. Great! Thank you very much!

Comments are closed.