wpvidZ

Learn WordPress With Video Tutorials

  • Blog
  • Browse
    • Backup & Restore
    • WordPress Localhost
    • WordPress Hosting
    • WordPress themes
    • Version Updates
    • Plugin Tips
    • Security
    • Tutorials
    • WordPress SEO
    • WP Miscellaneous
    • Sitemap
  • WP 5+ Tutorial
  • Search
wpvidZ Blog WordPress themes How To Style WordPress Caption in WP Twenty Fourteen Child

WordPress themes

How To Style WordPress Caption in WP Twenty Fourteen Child

Last updated on February 18, 2017
Posted on April 8, 2014

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.

  • Is my site loading fast? I use this shared hosting
  • Try my theme >

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.

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

caption twenty fourteen twentyfourteen wp-caption wp3.8

Latest Posts

  • Twenty Nineteen Theme Full Tutorial – Creating a Website
  • Uninstall W3 Total Cache Plugin – Incredibly Easy!
  • Create WordPress Website 2018 on SiteGround Genesis
  • WordPress Noopener Noreferrer Rel Attribute Quick Fix
  • WordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • Twenty Seventeen One Page Parallax Scrolling Website Style
  • How To Add Google Map in WordPress Contact Page
  • WordPress 4.7 Justify Text and Underline
  • Twenty Seventeen Footer “Proudly Powered By WordPress” Text
  • How To Add YouTube Subscribe Button To WordPress Website
← Proudly Powered By WordPress Twenty Fourteen
→ Showing Twenty Fourteen Thumbnail in A Smaller Size

Comment form on this post is closed after 60 days.

Search

Worth Reading

  • Twenty Nineteen theme tutorialTwenty Nineteen Theme Full Tutorial - Creating a Website
  • Twenty Seventeen One Page ParallaxTwenty Seventeen One Page Parallax Scrolling Website Style
  • Twenty Seventeen Proudly Powered By WordPress codeTwenty Seventeen Footer "Proudly Powered By WordPress" Text
  • Where your child theme folder should be located inside themesHow To Create WordPress Child Theme Manually or With Plugin
  • How to Remove Twenty Fourteen Author Name or Link
  • How I add thumbnails with Twenty Twelve theme
  • Change Default Green Color WP 2014 Theme
  • Showing Twenty Fourteen Thumbnail in A Smaller Size
  • Proudly Powered By WordPress Twenty Fourteen
  • Setting Autoplay Twenty Fourteen Slider

Backup & Restore

Backup WordPress Without a Plugin or FTP

Export WordPress Database using phpMyAdmin

BigDump Alternative – When BigDump Failed Importing Large WP Database

At This Place The Current Query Includes More Than 300 Dump Lines

View All..

Live Online Website

View All..

Offline Installation

How to Upload WordPress localhost to live server manually

Steps to Install WordPress on Windows 8 and WAMP 2.4

Install WordPress on Mavericks OS X 2014

Maximum upload file size in WAMP WordPress

View All..


WPvidz Hosting Image

  • About Me
  • Contact
  • Affiliate Disclosure
  • Privacy Policy
  • Term of Use

Copyright© 2023 wpvidz.com SG2021 | sitemap.xml


WPvidz.com is independent from WordPress.org but is proudly powered by WordPress & its block-based editor (Gutenberg)

WpvidZ.com uses cookies" to give you the best browsing experience possible. If you click "I Accept" below then you are consenting to this. For more information about your privacy settings on this website, please visit the Privacy Policy page. I Accept