Change the HTML-code base for [caption]

Wha? The captioning does not put DIVs inside a P.

Here’s what I get for example:

<div id="attachment_201" class="wp-caption alignright" style="width: 310px">
<a href="LINK HERE">
<img src="IMAGE SRC HERE" alt="CAPTION" title="TITLE" width="300" height="300" class="size-medium wp-image-201" />
</a>
<p class="wp-caption-text">CAPTION</p>
</div>

My pages with them validate just fine.

It’s doing it for me too. It puts the div with the caption inside a p. I’d never noticed the caption thing before, is it a new feature? In any case, it messes my code…

The caption shortcode function is in /wp-includes/media.php, but instead of editing the file directly, better copy the code, edit it as you like and make it into a small plugin. You can use the filter “img_caption_shortcode” and generate any HTML tags you like.

I just checked media.php, and the problems isn’t there. The img_caption_shortcode function generates valid code. The p around it is being added somewhere else. Probably the rich code editor thinks of it as a paragraph…

Is this a bug? Should we report it? What else could be causing this?

Don’t think so. The <p> tags are generated by wpautop and it has a special feature to exclude shortcodes. Perhaps look in the db if you can to see what’s saved in the post content.

The post_content in the wp_post table looks the same as the html view of the post. Here’s an example:

Here's the result:

[caption id="attachment_115" align="aligncenter" width="425" caption="Felted Mariah sweater "]<img class="size-full wp-image-115" title="Felted Mariah" src="https://www.hookandneedles.com/wp-content/uploads/2008/07/sweater.jpg" alt="Felted Mariah sweater after felting it" width="425" height="500" />[/caption]

A perfect fit...

The resulting html:

<p>Here’s the result:</p>
<p><div id="attachment_115" class="wp-caption aligncenter" style="width: 435px"><img class="size-full wp-image-115" title="Felted Mariah" src="https://www.hookandneedles.com/wp-content/uploads/2008/07/sweater.jpg" alt="Felted Mariah sweater after felting it" width="425" height="500" /><p class="wp-caption-text">Felted Mariah sweater </p></div></p>
<p>A perfect fit...

It’s adding p to the [caption] shortcode…

Could it be a problem with my installation of wp?

It just occurred to me… I’m previewing my posts, would publishing make a difference? I’ve been afraid to publish, because I don’t want to have faulty code.

I have no idea what exactly you’re doing to cause this, but I’d try disabling all your plugins first, because WordPress does NOT do this by default.

I’ll give you an example showing what it does. My post here has a caption on the picture:
https://ottodestruct.com/blog/2008/07/02/fashion-gone-berserk/

If you look at the HTML, here’s what you get:

<p>Okay, this is just ludicrous.</p>
<div id="attachment_201" class="wp-caption alignright" style="width: 310px"><a href="https://www.jcrew.com/AST/Browse/MensBrowse/Men_Feature_Assortment/collectorsitems/pants/PRDOVR~98560/98560.jsp"><img src="https://ottodestruct.com/blog/wp-content/uploads/2008/07/images_onfigure_98_98560_98560_wb8850_m_tif_a8dc0bb5631518d61-300x300.jpg" alt="Too lazy to paint a house yourself?" title="Pre-painted Jeans" width="300" height="300" class="size-medium wp-image-201" /></a><p class="wp-caption-text">Too lazy to paint a house yourself?</p></div>
<p>That’s right kiddies, JCrew sells pre-paint stained jeans. For those people too lazy to paint a house, now you can look like you’ve actually been working too, but without all that pain in the ass “labor”.</p>

As you can see, no P around the DIV.

Now, maybe you have a plugin screwing with the content and/or running it through wpautop early/later than normal or something, but it’s definitely not WordPress causing this problem for you.

Found it! It’s “Contact Form 7” plugin.

Thanks Otto42 and azaozz!

This was killing me, no matter what I did I couldn’t get rid of an extra (empty) set of P tags being generated at the top of my post where I had inserted an image and caption (floating right).

I tried disabling all my plugins and still the caption DIV was being wrapped in paragraph tags – which would then be forced out of the P tags, leaving them sitting there empty at the top of every post.

Otto42’s example post didn’t help, because he had a couple lines of text before the image was displayed – and I was looking to put the image right at the top of the post.

Solution: On a whim I decided to throw a couple extra line breaks in and see what happened – sure enough, worked like a charm.

So, if anyone else happens to have trouble with this – in the HTML editor, make sure you put a full empty line between the caption code and your initial paragraph:

Like:

[caption id="attachment_5" align="alignright" width="330" caption="Mmmm... that looks tasty."]<img class="size-full wp-image-5" title="food" src="https://example.com/wp-content/uploads/2009/02/food.jpg" alt="Mmmm... that looks tasty." width="330" height="200" />[/caption]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare accumsan turpis. Donec hendrerit metus non elit. Morbi egestas, lorem sed congue consectetur, pede turpis ornare urna, quis congue urna orci eget lectus. Maecenas sit amet augue a enim eleifend placerat. In cursus varius ante. Sed velit dui, sodales nec, pharetra in, accumsan a, nibh.

Hope that helps someone.