{"id":1018,"date":"2012-07-05T18:22:31","date_gmt":"2012-07-05T18:22:31","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=1018"},"modified":"2012-07-05T18:22:31","modified_gmt":"2012-07-05T18:22:31","slug":"how-to-customize-wordpress-image-caption","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/how-to-customize-wordpress-image-caption\/","title":{"rendered":"How to Customize WordPress Image Caption"},"content":{"rendered":"

Have you ever wanted to customize WordPress Image Caption because\u00a0you hated the way it appears by default in your articlet? By default, the styling of an image caption & its associated image is not that great. In this article, you can easily learn how to customize wordpress image caption by using CSS<\/strong>.<\/p>\n

Customize WordPress Image Caption easily using CSS<\/h2>\n

Ok, so let me show you what I am talking about. To customize wordpress image caption, you can simply apply the CSS<\/strong> that I have provided to you further below. But in case you want to know what image caption is, simply go to your Media upload section of your WordPress blog and try to upload an image. Once you have uploaded it, you will be presented with other options for the image such as it’s caption, description, ,alignment, etc. you can find the Image caption.<\/p>\n

Here’s the before and after results of\u00a0Customize WordPress Image Caption<\/h3>\n

So I was able to customize WordPress image caption easily<\/strong><\/em> for a recent project of mine.<\/p>\n

Here’s an image of the Image with it’s caption before any formatting is applied:<\/strong><\/p>\n

\"Customize<\/a><\/p>\n

And here is the result after applying our CSS:<\/strong><\/p>\n

\"Customize<\/a><\/p>\n

So if you compare the above 2 images, you can notice how different and better the 2nd image looks. We are going to achieve similar result by using just CSS. Following is the CSS that I used to customize image caption for a recent project of mine.<\/p>\n

\/*Customize Image Caption*\/\n.wp-caption {\nborder: 1px solid #ddd;\ntext-align: center;\nbackground-color: #f3f3f3;\npadding-top: 4px;\nmargin: 10px;\n-moz-border-radius: 3px;\n-khtml-border-radius: 3px;\n-webkit-border-radius: 3px;\nborder-radius: 3px;\n}\n.wp-caption img {\nmargin: 0;\npadding: 0;\nborder: 0 none;\n}\n.wp-caption p.wp-caption-text {\nfont-size: 11px;\nline-height: 17px;\npadding: 0 4px 5px;\nmargin: 0;\n}<\/pre>\n
You can now easily tweak the values and background colors and other settings to suit your website. \u00a0So that’s how you can Customize WordPress Image Caption.<\/strong><\/p>\n
Your Turn!<\/h5>\n
Do you know of any other ways to customize\u00a0WordPress\u00a0image caption<\/strong><\/em>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"
Have you ever wanted to customize WordPress Image Caption because\u00a0you hated the way it appears by default in your articlet? By default, the styling of an image caption & its associated image is not that great. In this article, you can easily learn how to customize wordpress image caption by using CSS.<\/p>\n","protected":false},"author":1,"featured_media":114,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[13,11],"tags":[99,30],"class_list":["post-1018","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tips-and-tricks","category-wordpress-tips-and-tricks","tag-customize-wordpress-image-caption","tag-wordpress-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-gq","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1018","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=1018"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/1018\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=1018"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=1018"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=1018"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}