WordPress captions behaving differently

HTML & CSS
1

I’m having a bit of trouble customizing my captions. They used to look like this automatically - see screenshot here: http://skipthescams.com/2012/08/how-to-exclude-a-page-id-from-the-pages-widget/

Now after upgrading WordPress, they look just the same as the paragraph text. I’ve tried using this in my custom CSS file in Thesis:

/* Captions */
.aligncenter,
div.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption {
	border: 1px solid #ddd;
	text-align: center;
	background-color: #f3f3f3;
	padding-top: 4px;
	margin: 10px;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

.wp-caption img {
	margin: 0;
	padding: 0;
	border: 0 none;
}

.wp-caption p.wp-caption-text {
	font-size: 11px;
	line-height: 17px;
	padding: 0 4px 5px;
	margin: 0;
}
/* End captions */

which I found in a Google search, but it doesn’t change them at all. I know I’m probably missing something obvious - can anyone help, please?

P.S. I can’t show you my page because I’m building it on my local machine, sorry.

2

I don’t know what you mean by “captions”. could you explain. Which image are you referring to on that page?

3

Hi, thanks for your response. I mean the first graphic in the article on that page (the caption is “The Pages widget is under Appearance > Widgets”). That’s how the WP captions used to be styled without me doing anything to them, and now they are not the same, don’t even have a gray box surrounding them as shown underneath that graphic. I’m using the same theme and same process, but a newer version of WP. When I insert the photo, I put my caption text in the area designated for it in the WP dialog box that appears. I need to figure out how to make them look like that again. Does that make more sense? :slight_smile:

4

I think I’m getting confused over what’s on the WP backend and what’s appearing on the front end. (Each time I read your post I keep getting confused which is which.)

If you are getting an image on the front end with a caption and these are not styled as you wish, it should be easy enough to help you style it, but we need to see an example of it. If this is really a question about the WP backend, we should probably move this to the CMS forum.

5

My first guess would be that one or more of the selectors you use are changed or missing.
.aligncenter, div.aligncenter
.wp-caption
.wp-caption img
.wp-caption p.wp-caption-text
eg. from viewsource

<div id="attachment_1656" class="wp-caption alignleft" style="width: 277px">
	<a href="http://skipthescams.com/wp-content/uploads/2012/08/page-widget.jpg?9d7bd4"><img class="size-full wp-image-1656" style="margin-right: 10px;" title="page-widget" src="http://skipthescams.com/wp-content/uploads/2012/08/page-widget.jpg?9d7bd4" alt="WordPress Page widget" width="277" height="266" /></a>
	<p class="wp-caption-text">The Pages widget is under Appearance > Widgets</p>
</div>

yiu can see the class “wp-caption”

If you look at the troublesome page’s viewsource, are all the selectors there?

6

Thank you for that - it eventually led me to the answer! I realized I should compare the code WP was giving me for the working caption as opposed to the nonworking one.

The nonworking version (from WP 3.5.1) puts the caption (i.e., THIS IS MY CAPTION TEXT) outside of the caption brackets and at the end of the code, like this:

<p>[caption id="attachment_716"]<a href="my-link"><img class="blah-blah" src="my-image" /></a>THIS IS MY CAPTION TEXT[/caption]</p>

The working version (from WP 3.4.2) puts it in the brackets:

<p>[caption id="attachment_716" caption="THIS IS MY CAPTION TEXT"]<a href="my-link"><img class="blah blah" src="my-image" /></a>[/caption]

So to work around this for now, I will just manually move the caption text into the brackets. What I don’t understand is why I should have to do this. Is this a WordPress bug or is it just me? I’m inserting a photo and creating a caption the same as always, but the resulting code is different now and doesn’t work.

Edit: Plus now when I go in to make other changes to the page, it doesn’t save my changes to the caption. Argh.

7

A caption tag is meant for tables, but my guess is it’s an HTML5 thing.

Figures WordPress would keep adding new “features” when it still hasn’t fixed long-standing errors in it’s core code yet. Gotta be “progressive” I guess.

Maybe @ralph_m; knows how to fix things with a change to the CSS file?

8

Possibly, yes. But at this point I don’t know what the HTML looks like (the code posted above is not HTML, but some kind of code that presumably is process through WP and turned into real HTML). HTML5 does have a new <figure> <caption> pair of tags, but it’s not clear that this is what’s happening here. A link to the page in question would be the ideal thing. I can’t comment on the WP backend, because I’ve long since abandoned WP.

9

Thanks, Mitteneague. Just curious, though: I’ve always associated captions with photos - why would they be meant for tables? Just wondering.

10

Thanks, ralph.m, for all your help. Once the site is live, I’ll post a link here.

11

In CSS, the <caption> tag is associated with tables.

In your first message, WordPress is using the word caption as part of a hyphenated class name (which could be associated with an image or almost anything), which is fine.

Then in message #6, WordPress is using caption as a keyword inside a proprietary bracketed expression of some kind. We (I) don’t know what that means. It’s not standard CSS.

In everyday language, I think of captions as text beneath images.

Terminology/word usage can become confusing sometimes. :slight_smile:

12

Oh, okay, I see. Thanks!