How To Style WordPress Caption in WP Twenty Fourteen Child

If you are using Twenty Fourteen child theme, click here for the tut, as your blog theme at the moment, this might help you a bit, we are going to style WordPress caption in WordPress in this tutorial.

Well I noticed that the caption isn’t stylized at all, that I could spot immediately for the caption text, which is aligned to the left, and too small for my preferences.

In the codex, it stated there is also a plugin to style WordPress caption, but I haven’t tried it.

I just copied and pasted the codex for the caption css, and it seemed to work ok, with a bit modification.

Of course you can modify things as you like, but in this tutorial, I just modify some paddings, margins, and background colour and border.

So let’s get started.

Before and after for wp-caption css change

How do I style WordPress Caption with Twenty Fourteen child theme?

I encourage you to use Child theme for this, see here why you need one.

1. Login to your dashboard, yourdomain.com/wp-admin

2. Go to Appearance, and Theme. Check what theme’s name is active.

3. Then, select and click Editor, make sure you are on the right theme’s name to edit it.

Select the theme to edit, then style.css

4. Click on style.css (Stylesheet) file.

Proudly Powered By WordPress Twenty Fourteen

5. Right below other codes, if you have some, if you haven’t just below anything else that may be in that file, type a comment line for css, something like “This is for my image caption style” (you can paste the whole code below);

/*This is for my image caption style*/

.wp-caption {
background: #f3f3f3;
border: 1px solid #ddd;
max-width: 96%;
margin: 5px 0 20px 10px;
padding:15px 5px 10px 15px;
text-align: center;
}

.wp-caption.alignnone {
margin: 5px 0 20px 10px;
padding:15px 5px 10px 15px;
}

.wp-caption.alignleft {
margin: 5px 15px 10px 10px;
padding:15px 15px 10px 15px;
}

.wp-caption.alignright {
margin: 5px 0 20px 10px;
padding:15px 5px 10px 15px;

}

.wp-caption img {
border: 0 none;
height: auto;
margin: 0;
max-width: 98.5%;
padding: 0;
width: auto;
}

.wp-caption p.wp-caption-text {
font-size: 16px;
line-height: 17px;
margin-top: 10px;
}

/*This is for my image caption style*/

.wp-caption {

background: #f3f3f3;

border: 1px solid #ddd;

max-width: 96%;

margin: 5px 0 20px 10px;

padding:15px 5px 10px 15px;

text-align: center;

}

.wp-caption.alignnone {

margin: 5px 0 20px 10px;

padding:15px 5px 10px 15px;

}

.wp-caption.alignleft {

margin: 5px 15px 10px 10px;

padding:15px 15px 10px 15px;

}

.wp-caption.alignright {

margin: 5px 0 20px 10px;

padding:15px 5px 10px 15px;

}

.wp-caption img {

border: 0 none;

height: auto;

margin: 0;

max-width: 98.5%;

padding: 0;

width: auto;

}

.wp-caption p.wp-caption-text {

font-size: 16px;

line-height: 17px;

margin-top: 10px;

}

The code which is red framed to style wordpress caption

6. Click “Update File” button whenever you make changes.

In above codes, you can modify the css style to anything to your preferences, I usually use my browser add-on for colour picker, but if you want something real time online, you can go colorpicker.com to get hex colour codes. It’s quite helpful.

I just put bright weird background, so you can see better about before/after difference in video.

If you have more time, you can watch the video to style WordPress caption and modify it in some lines.