≡ Menu

Thesis Skin Image and Caption Styles

KK and CP

The image above is a WordPress featured image for this post. By default, it will be aligned flush left with no text wrap, but you can select any alignment you like in your WordPress media gallery.

In addition to WordPress featured image support, every Thesis Skin comes with 4 default image alignments:

  • flush left with no text wrap (typically the default)
  • centered
  • left with text wrap
  • right with text wrap

Here’s a flush left image with a new Thesis-style caption:

Chris Pearson speaking at Affiliate Summit Central 2012

Check out this cool caption style, which is built into your Thesis Skin.

To add this nifty caption style to your post, simply switch to the text editor, and then wrap your caption text like so:

<p class="caption">Your caption text here.</p>

And here’s the same image from above with a default WordPress caption:

Chris Pearson speaking at Affiliate Summit Central 2012

This image also has a caption that’s defined in the WordPress media gallery.

And this next image is centered (also note that text does not/should not wrap around centered images):

Chris Pearson speaking in 2010

You can also add a frame to any of your images; here’s that last image—still centered—but with a frame:

Chris Pearson speaking in 2010

Adding frames is easy, too. When editing your post, switch to the text editor, and then add a frame class to the image you want to frame:

<img class="aligncenter frame" src="your_image_url" alt="your image alt" />

DIYthemes logo (tall)This paragraph is here to show you how text will wrap around an image that is aligned to the left. Notice how the image is surrounded by whitespace to avoid any unsightly collisions between the text and the image.

DIYthemes logo (black)Of course, you also need to see what a right-aligned image looks like. The text will wrap around this image at a safe distance to ensure easy reading.

{ 4 comments… add one }

  • Rick Lomas February 27, 2014, 5:48 am

    Chris, I like your ‘cool caption style’ what’s the neatest (i.e smallest/fastest) way to set this as the default?

    • Chris Pearson February 27, 2014, 9:59 am

      Rick, the fastest and easiest way to do this is to code it directly. It’s the simplest HTML structure possible:

      <p class="caption">This is my caption. It will be pulled up close to whatever sits above it, so in theory, you could caption anything.</p>
  • Diane June 12, 2014, 8:05 am

    I’m thinking of purchasing Thesis to re-design my blog and to create a website for my client. I’m confused, I thought we didn’t need code to use Thesis. Also, is there an option or plugin that allows for rotating images on the front page?
    Thank you.

    • Chris Pearson June 12, 2014, 8:17 am

      Hi Diane, you don’t need to supply your own code to run Thesis. However, if you want to do some fancier things with your text, you can add small embellishments (like the caption in my comment above) to your blog posts or pages.

      The WordPress community at large does not consider “code” inside your posts to be added code (in fact, all your posts and pages are actually just HTML code). The visual editor supplies code for images, etc, so you won’t ever have to supply this stuff yourself. If you like, you can switch away from the visual editor and edit the existing HTML of your post or page, and in doing so, you can add some of the embellishments I’ve touched upon here.

      As far as your second question about rotating images is concerned, there is no native functionality for this in Thesis, but you may be able to find a WordPress plugin that will suffice.

Leave a Comment