If you have upgraded your WordPress version to WordPress 3.4.x, you would see an option caption, when you upload any image to your WordPress blog. WordPress has added this functionality to the latest versions so you don’t need to add any plugin or coding to your WordPress source. Whenever you want to add caption to your images, just upload any image to your WordPress posts or pages, and look for the caption, write it, insert it to your blog post. For example, the following image has a caption “This is an image of that WordPress image.”

caption of WordPress
This is an caption of that WordPress image.

Once you write any characters in your caption field, you will see an inbuilt background along with your caption that covers your image. By default, the background color is light gray and text color is dark gray. Therefore, this post is specially for those who want to change the background and text color generated by this caption due to the inbuilt setting of WordPress. Even you can add more functionalities to your caption field by the end of this tutorial. Therefore, here is a quick guide to change background color and text color of your WordPress caption.

To Change Background & Text Color of WordPress Caption Field

WordPress uses .wp-caption CSS class selector for styling the background color, and .wp-caption-text CSS class selector for font color. Therefore, if you want to use your custom styles then include them into the theme’s CSS (usually in Appearance » Editor » style.css).

Let you want to customize the background and text color on your photo’s caption, paste the below CSS code at the end of your style.css file.

Code Preview
.wp-caption {
 background-color: #D8DFEA;
 border: 1px solid #3B5998; /* If needed */
}
.wp-caption-text{
 color: #3B5998;
}
how to change color in caption

If you want to add some more customization, you may add some other properties in .wp-caption CSS class. For example, to adding the border in the caption box use border: 1px solid #3B5998; property in .wp-caption CSS class. Look in the below code, we have added a shadow to your caption.

Code Preview
.wp-caption {
     background-color: #D8DFEA;
    -webkit-box-shadow: 5px 5px 5px #454243;
    -moz-box-shadow: 5px 5px 5px #454243;
     box-shadow:  5px 5px 5px #454243;
}
.wp-caption-text{
     color: #3B5998;
}
how to drop shadow in caption

You can add some more properties to these CSS styles to customize your caption field inside your WordPress blog. I hope you find this tutorial helpful. If you have any doubt or share something else, write a comment.

NO COMMENTS

Leave a Reply