Enabling Image Formatting In Your Wordpress Template

One neat thing about Wordpress is the ability to add images to your posts in a quick and easy manner. You can also create thumbnails of larger images and link to them using a captioned image. The only problem is that when you have sorted out how your images look in your post in the admin section they just don't appear the same in your template once you have published it.

This is because Wordpress creates a set of styles that are used in the admin section and the default Wordpress templates. However, these styles are usually left out of custom template stylesheets. If you want to use the same sort of formatting that the Wordpress admin section has then open up your stylesheet file in your template and put the following stylesheet rules in at the bottom.

.alignleft {
float:left;
margin:20px 20px 20px 0pt;
}
 
.alignright {
float:right;
margin:20px 0pt 20px 20px;
}
 
.aligncenter {
display:block;
margin-left:auto;
margin-right:auto;
}
 
.wp-caption {
-moz-border-radius-bottomleft:3px;
-moz-border-radius-bottomright:3px;
-moz-border-radius-topleft:3px;
-moz-border-radius-topright:3px;
background-color:#F3F3F3;
border:1px solid #DDDDDD;
margin:10px;
padding-top:4px;
text-align:center;
color:#000000;
}
 
.wp-caption img {
border:0pt none;
margin:0pt;
padding:0pt;
}
 
.wp-caption p.wp-caption-text {
font-size:11px;
line-height:17px;
margin:0pt;
padding:0pt 4px 5px;
}

With this simple fix you will now have much better looking image styles.

One note for blog writers out there is that if you want to float an image left or right then you need to place it before the text you need to wrap it around. When you align things to the center the text will not wrap around it.