Supporting image alignment in your WordPress theme

If you are making a WordPress theme you owe it to the user of your theme to make sure image alignment works as expected. Most of the Visual Editor formatting buttons use inline CSS which won’t be affected by the theme but this is not the case with the alignment buttons in pages/posts when applied to images.

The red labels show what Visual Editor buttons I’m talking about:

If you don’t use the Visual Editor, this issue still affects you when you insert a image and use one of the following options:

To make image alignment work, you need to add the following CSS to style.css:

img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

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

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

.alignleft {float: left}
.alignright {float: right}

Go check and update your theme now – it’ll save you a telephone call or email from a confused client.

While on this topic, there are a few other WordPress conventions that you need to support in your theme. Here is a handy block of CSS which covers all the bases:

/* WordPress convention - e.g. used by the visual editor to format post/page elements */
.entry-content img {margin: 0 0 1.5em 0}
.aligncenter, img.aligncenter {clear: both;display: block;margin-left: auto;margin-right: auto}
img.alignright { padding: 4px;margin: 3px 0 2px 10px;display: inline}
.alignright {float: right}
img.alignleft {padding: 4px;margin: 3px 10px 2px 0;display: inline}
.alignleft {float: left}
.wp-caption {text-align: center;margin-bottom: 1.5em}
.wp-caption img {border: 0 none}
.wp-smiley {max-height: 1em;margin:0 !important}
.gallery-caption {margin:-1.5em 0 0 0}
blockquote.left {float: left;margin-left: 0;margin-right: 20px;text-align: right;width: 33%}
blockquote.right {float: right;margin-left: 20px;margin-right: 0;text-align: left;width: 33%}