• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

How to stop WordPress wrapping images in P tags

Wordpress · January 28, 2011

WordPress has a genius and at the same time annoying feature that automatically wraps inline elements in “P” tags for you. The nerd that wrote the function “wpautop” forgot to provide us an option to populate the array of defined block level elements in-case we wanted an image or perhaps even a span tag treated as a block level element and not wrapped in a P tag automatically.

After much research and not find a single straight forward answer that worked, I devised my own little solution. Basically what we have to do is create a new function called “wpautop_forked” inside of your theme functions.php file and then remove the annoying wpautop filter function and specifying our own instead. Here is the code below, function taken from the wp-includes file formatting.php for the latest version of WordPress at the time of writing 3.0.4. View the file and function on WordPress Trac here.

As you will see below all I did was add img to the faux array inside of the variable $allblocks. You can now make other inline elements be treated as block by WordPress as well by adding them with a pipe separator into the variable. The best part of about this approach is that we’re not hacking core files and I don’t think the wpautop function hardly ever gets changed. Dear WordPress development team nerds, fix this blatantly obvious issue. If I don’t want to abide by web standards to make complicated layouts a little easier, let me.

Dwayne

Leave a Reply Cancel reply

12 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Mike
Mike
12 years ago

great fix! I’ve always found that extremely annoying when making themes. Sometimes had to use custom fields for images but this function works great so far. Thanks a million

0
Paul
Paul
11 years ago

This is a life-saver. I make a good bit of my living doing wordpress work, and autop is very much my least favorite aspect of the platform.

0
Rona
Rona
11 years ago

This is awesome! Thank you! Thank you!

0
Calvin
Calvin
11 years ago

hey this guys has written the same code, like exactly the same code

http://www.adammontague.co.uk/social/stop-wordpress-wrapping-images-in-p-tags/

0
Dwayne
Dwayne
Author
11 years ago

Calvin,

To be fair though I think the same solution exists in many forms and I probably took inspiration from elsewhere too. Not to mention it’s not exactly a unique idea forking a function and adding the image in to the array of block elements. Lots of people have come up with the same method and haven’t bothered to publish the results.

0
James
James
11 years ago

Totally copied that from the other person’s site. Even the bloody comments are copied…inspiration….my butthole

0
Dwayne
Dwayne
Author
11 years ago

Yo James,

Look at the publish dates, he posted June, 2011 – I posted January, 2011. I posted before him. And for your information, want to know why the code is exactly the same including comments? Because all I did was modify pre-existing code, all I added as img to the display block array, the rest of the code is from the WordPress core itself. So of course the code is the same, the other guy didn’t write it either. We both have the same solution, and it’s a really simple solution.

If you bothered to read my article correctly, you would see I link to the WordPress Trac and particular file where the function and code exists: core.trac.wordpress.org/browser/tags/3.0.4/wp-includes/formatting.php#L188 – do the comments in that code look familiar?

So nice one, you’re the asshole in this situation. I suggest you go back to playing World of Warcraft and beating off into that old crusty sock of yours.

0
Katie
Katie
10 years ago

Thank you SO much for posting this. This issue had been driving me crazy, plug ins and other solutions posted elsewhere did nothing at all. This is the only thing that seemed to do the trick… I’m a happy woman again! lol

0
Ethan
Ethan
10 years ago

GOD BLESS YOU!

0
Sally
Sally
10 years ago

Thank you for posting this solution in a clear, coherent manner. I’m a PHP and WP newb, so this was exactly what I needed.

๐Ÿ™‚

0
Adam
Adam
10 years ago

Hi guys, I thought my ears were burning! ha!

Just wanted to point out that I wasn’t copying, nor did I mention in my post that the code was something I wrote myself.

I think Dwayne has defended me (and himself) quite well! Thanks buddy ๐Ÿ˜‰

In other matters… there’s a simpler/cleaner method that seems to work better than this (for me anyway…)

http://www.adammontague.co.uk/social/stop-wordpress-wrapping-images-in-p-tags/

0
Dwayne
Dwayne
Author
10 years ago

Thanks for stopping by Adam, no worries. I think people jump to conclusions far too easily sometimes. The simpler solution you posted indeed is better, it’s a whole two million lines shorter than forking the internal function and adding the image tag to the block of. Got to love regular expressions, so powerful and yet so complicated.

0

Primary Sidebar

Popular

  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • Testing Event Listeners In Jest (Without Using A Library)
  • Thoughts on the Flipper Zero
  • How To Get The Hash of A File In Node.js
  • Waiting for an Element to Exist With JavaScript
  • How To Paginate An Array In Javascript
  • Handling Errors with the Fetch API
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • Wild Natural Deodorant Review

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 ยท Dwayne Charrington ยท Log in

wpDiscuz