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
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.

Active theme is the theme in use
Active theme is the theme in use

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

Appearance > Editor
Appearance > Editor
Select the theme to edit, then style.css
Select the theme to edit, then style.css

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

Related: 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);

The code which is red framed to style wordpress caption
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.

Share the knowledge
Share on Google+0Tweet about this on TwitterShare on Facebook0Pin on Pinterest0Share on Reddit0Email this to someonePrint this page