B2B Marketing Blog - TopRank®

B2B Marketing views, news and interviews.

Contact Us

MENUMENU
  • Services
    • Influencer Marketing
      • B2B Influencer Marketing Pilot
    • Content Marketing
      • Virtual Events
    • Search Marketing
  • Marketing Resources
    • Resources
    • News
    • Newsletter
  • Our Work
    • Industries
  • Blog
  • About Us
    • Meet the Team
    • Careers
  • Contact

Getting Fancy Image Captions in WordPress 2.6

Lee Odden
Lee Odden
Blogging Strategy

Calming Clouds

WordPress 2.6 comes with a feature that adds captions to images.  It looks really nice in the WordPress editor, but if you don’t have the code, it won’t look as nice when you publish your post.

The good news is, all you have to do is add the following lines of code to your theme’s CSS file.

/* Captions */
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}

.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}

/* End captions */

Now your images and captions will look just as good live as they do in the editor.

Lee Odden

About Lee Odden

@LeeOdden is the CEO of TopRank Marketing and editor of Online Marketing Blog. Cited for his expertise by The Economist, Forbes and the Wall Street Journal, he's the author of the book Optimize and presents internationally on B2B marketing topics including content, search, social media and influencer marketing. When not at conferences, consulting, or working with his talented team, he's likely running, traveling or cooking up something new.

Comments

  1. AvatarJonathan says

    July 27, 2008 at 7:26 am

    Thanks a bunch for this tip off.

  2. Avatarm-alo says

    July 31, 2008 at 2:53 am

    Now all we need is a way to put links inside the captions and it would be a killer feature!

  3. AvatarTM says

    August 17, 2008 at 9:01 am

    I was curious. Is there a way in addition to adding a caption creating a space and/or adding photo credits i.e.

    Calm Seas Photo Credit: Whomever
    or Calm Seas/Photo Credit: Whomever

    Without having to type in either “/” or “Photo Credit:” and just have that automatically inserted in?

  4. AvatarHypeScience says

    September 13, 2008 at 9:46 am

    Thank you for the tip.

    It works in parts, but is not aligning at right or left as set on the “add image” wordpress backend.

  5. AvatarErica St. John says

    September 23, 2008 at 4:34 pm

    Thanks, this is perfect for what I was looking for~

  6. AvatarThomas says

    October 8, 2008 at 9:50 am

    Here is the code for image alignment:

    img.alignright {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
    }

    img.alignleft {
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
    }

    .alignright {
    float: right;
    }

    .alignleft {
    float: left
    }

  7. AvatarRob says

    January 24, 2009 at 2:57 pm

    This was of good help to me. You may want to add Erica St. John’s code to the original post. Thanks.

  8. Avatarmike says

    February 17, 2009 at 9:08 pm

    thanks a ton, this had been bugging me for a while!

LET’S GET SOCIAL

RSS Feed Twitter Facebook LinkedIn

Learn about:

TopRank Marketing 2020 B2B Influencer Marketing Research Report

SUBSCRIBE        

TOPRANK BLOGGING TEAM

TopRank Marketing Blogging Team

TOPRANK MARKETING SPEAKS

B2B Marketing Exchange Experience 2021

 

Optimize

RECOMMENDED RESOURCES

SEO Blogs

MARKETING BLOG RECOGNITION

CMI

Contact Us

10405 6th Ave N, Suite 250
Minneapolis, MN 55441


877-872-6628

Contact Us

Services

  • Influencer Marketing
  • Content Marketing
  • Search Engine Marketing

Follow Us

  • LinkedIn
  • Twitter
  • Youtube
  • Facebook
  • Instagram

Newsletter

Copyright © 2021 · TopRank Marketing

Return to top of page

We use cookies to understand how you use our site and to improve your experience. This includes personalizing content and advertising. By continuing to use our site, you accept our use of cookies and revised Privacy Policy.