B2B Marketing Blog - TopRank®

B2B Marketing views, news and interviews.

Getting Fancy Image Captions in WordPress 2.6

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.

About Lee Odden

@LeeOdden is the CEO of TopRank Marketing and editor of TopRank's B2B 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

  3. TM says

    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?

  6. Thomas says

    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
    }