Aligning Images With Your Stylesheet.

UPDATE:
If you are using the new version of WordPress 2.6 and above, check this post: Align Image In WordPress 2.7

A lot of WordPress Themes don’t include the functions to align images, something which I find very strange and have no explanation for. I mean, they have written the codes for the whole theme which would have taken them days to do, leaving out the extra few lines that would have made life easier for those using the theme is really beyond me. This theme that you see now is exactly that. There are no functions for me to call when I want to align the image.

If you align the image manually and you don’t have the knowledge to give the image the proper paddings, the image and the text is going to stick together making the whole layout of the post looks really ugly and amateurish. Before I went digging on how to overcome this, I use to edit the image to give it a white border before uploading the image into my post. At least this way, there are some space between the image and the text. Later I learned how it can be done by a few css codes inserted into my theme’s stylesheet.

As always, before attempting to mess with your theme’s stylesheet, back it up first. Simply open your Stylesheet php in your theme editor, select all and copy them into notepad. Make sure that copy is safe until you are sure the modifications you have done is okay before throwing it away. If somehow, you screw up, just copy those original codes and paste them back totally and you will restore everything to it’s previous state. That was how I did things when I modify each theme that comes my way.

Now, to add in the codes to make alignment of your images more neat and elegant, go to Dashboard – Presentation – Theme Editor – Stylesheet. It is always the default php when you open your Theme Editor anyway.

Under style css. paste in these codes below:

img.alignright {
float: right;
clear: right;
margin: 5px 10px 5px 10px;
background: #fff;
padding: 2px;
border: 2px solid #ffffff;
}

img.alignleft {
float: left;
clear: left;
margin: 5px 5px 5px 5px;
background: #fff;
padding: 2px;
border: 2px solid #ffffff;
}

img.centered {
display: block;
padding: 2px;
margin: 0 auto 20px auto;
border: 1px solid #ffffff;
float: none;
clear: both;
}

These can go anywhere but just make sure you don’t dump it some where in between lines. Css codes normally ends with this } sign, so insert those codes after that sign and nowhere in between any this { or this } sign. Also it would be better to insert it after any whole functions. For example, from the codes above, you see there are 3 functions that you can call to align your image. Like wise, there will also be many functions for other parts of the themes as well, like the headers, post contents and so on. Insert it after the end of all the codes for that function.

You can edit the codes if you want to. Looking at those codes, the img.alignright means what will happen if you want the image to be aligned to your right. The margins, backgrounds, paddings and borders have all been set. If you want your border in other color, you can change the color codes. If you have itchy hands and inquisitive mind like me, just experiment around and see what happens. It won’t kill you. You have a backup remember?

After inserting the codes, click “Update File,” assuming you have changed your file attributes to “writable”. Else you won’t see the “Update File” option at the bottom of your page.

Now you can align your images easily by giving it a “class”. For example, if you want your image to be floated to the left with all the text nicely around it, you assign the class=”alignleft” function for the image. If you it on the right, assign the class=”alignright”. Likewise for centered. When you assign these codes, make sure you spell it correctly and similar to those codes you inserted to your stylesheet just now. See the cat at the right, it is nicely placed.

The codes looks like this in its raw form. The letters in black ore the function that you have to assign to the image.