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');
Be very careful if you copy and paste the above. I had to put a zero-width space after the opening ‘ in the preg_replace function to solve a rendering issue. When copy and pasting, you’ll definitely need to remove zero-width space.
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.
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.
I’d extend this to
jQuery("p:has(img) img").unwrap()
Thank you! Ye gods, thank you.
How would I achieve the same in Joomla?
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
Rather a late reply but it needs to go in the functions.php file inside php tags.
Thank you for this code, I am trying to do this but not figure it out.
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.
Hi there, James thanks for posting the link. I was looking for exactly this (how to strip the p tags from around iframes too). The Fublo blog isn’t there anymore, can anyone suggest how it’s to be done?
I really should have searched for the answer first… found it straight after posting :)
http://blog.iamcreative.me/code-snippets/remove-phantom-paragraph-tags-iframes-images-wordpress/#.Uw-Bkl6cfxg
Thanks. This is very helpful. Especially when the client likes to toy with the HTML too…
you can allaws change the for a to avoid problems if you have with some padding or something in your css.
And because I did not properly format my code in my comment, here is the complete version:
Leif
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.
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
This one works great. Thx!
How would you wrap each image in the post with a div using this function??
I ♥ you. Thanks for the goodness :)
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.
Thanks for this tip – the paragraph tag around images was driving me nuts!
Awesome! Should be standard but at least there is CSS-Tricks to save the day!
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.
Appreciated, works perfectly, having a
<
p> wrapped around my tags was messing with my coding ocd!
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.
Would help if you actually explained where to put this code.
your themes functions.php file
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.”
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!
Thank you for this tut.
You saved my time to day LOL
Thanks a lot!
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;">
.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
life saver, thank you!
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
Doesn’t work for me either. I’m using the latest version of WordPress and don’t know if that makes a difference
Does not work…
Code was insert into functions.php. no joy….
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’);
And how remove paragraph tags from around img.alignone only?
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!
It would be good to establish whether this is still working in WP3.9.2. Not having any luck so far…
Cheers !
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?
how to remove p tag in woocommerce
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:
Basically putting the end </p> tag in brackets followed by ? – making it optional.
Not a regex expert by any stretch, so any improvements welcome!
Many thanks to you, solution worked instantly!
Hi,
Sweet code! I also was looking for the same kind of method to customize the
tag around iframes… I found this :
This works fine in order to remove the
tag, but in my case it would better be something like :
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
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
Indeed, this line:
remove_filter( 'the_content', 'wpautop' );
in your functions.php will achieve the exact same result than using:Thank you.
Thanks exoboy, this works for me….thanks again
Hello,
Thank you so much for sharing this.
I just found this page while searching “wordpress adding paragraph around images”.
Now I want to remove the function which turned off auto paragraphing and start using wordpress visual editor instead of writing every bit of html myself.
Thank youuuuu :)
Wow! I came across the issue in 2016 (after 5 years of your post). It actually did the trick but it failed when the
<IMG>
has alignment class which is wrapped around<P>
along with the plain text. like below<p><img class="alignright" src="" />Paragraph text here</p>
However I could make the following expression for this
Unfortunately this still won’t function if the paragraph text comes before the image tag. e.g. if an image is placed right between some paragraph text like below.
<p>Text Before The Image<img class="alignright" src="" />Text After The Image</p>
I tried the last (group) of ‘anything’ in the regexp (.*?) by putting it before the first group, making them total of 3 groups. But it didn’t work as I expected.
Could you help in this regard?
Received this error:
Warning: preg_replace() [function.preg-replace]: Delimiter must not be alphanumeric or backslash in
Hello,
There are existing methods, that you can use. If you add :
remove_filter( ‘the_content’, ‘wpautop’ );
remove_filter( ‘the_excerpt’, ‘wpautop’ );
In your functions.php, it will do the work.
See :
https://stackoverflow.com/questions/11248628/disable-wordpress-from-adding-p-tags
What would be the expression to change the
<p>
tag into a<figure>
tag instead of removing it?