Something I’ve noticed in the newer versions of WordPress has really been giving my less tech savvy clients a hard time: wrapping words around an image. There are two basic ways images are handled by WordPress:

1. Through the theme’s CSS file
2. Individually in each post or page

Since I tend to use images quite frequently and put them in different places, I usually remove most the the formatting from the CSS style sheet and place images by hand in the posts and pages. But if you’re using the Visual Mode rather than the HTML Mode, you might find that your images are not doing what you want them to do. Here is how to fix it.

First, you will need to use HTML Mode for some of this, so you’re going to have to get comfortable with HTML. But don’t be afraid, you’ll only need to look for specific code that I’m going to show you.

Step One:
Upload/Insert your image by clicking on this image:

Step Two:
Select the image file you want to upload and up load it.

Step Three:
Set your preferences for that image.

Most of the time, you won’t touch the Title, Caption and Description areas, so I won’t talk about them here. But I will go over the rest.

Link URL: This lets you make the image a link or not.

• If you want the image to be a live link to the image file, click on the “File URL” button and it will automatically fill in that field.
• If you want the image to be a live link to the post, click on the “Post URL” button.
• If you don’t want the image to be a link at all, click on the “None” button.
• If you want the image to link to some other URL you have in mind, you can either delete the URL that is there or click the “None” button, then type in your chosen URL.

Most of the time, I just click the None button. WordPress remembers the last preferences you set, so you won’t have to do that again.

Alignment: This aligns the image in relation to the spot you are inserting it.

• None = no alignment. The image will be level with where you placed it.
• Left = aligns the image to the left. Words will wrap around on the right.
• Center = aligns the image in the center with words wrapping to the left and right.
• Right = aligns the image to the right. Words will wrap around on the left.

Size: When WordPress uploads an image, it automatically creates two or more versions at different sizes. You can define the parameters for Thumbnail, Medium and Large under Settings/Media. The Thumbnail you can see in the upper left of the window next to the date. The full size is the actual size of the file you uploaded.

Step Four:
Insert the image. Click on the “Insert into Post” button.

Step Five:
Fix the word wrapping Once you’ve inserted an image, it might look something like this in Visual Mode:

But look like this when you preview the post:

Why is that? For some reason, WordPress is using a “class” to wrap the image and the browser just doesn’t recognize it. So you have to go into the code and fix it. When you look at the code for an image you’ll see something like this:

You want to replace the “offending” code, highlighted below,

with code that browsers will understand, as illustrated here:

In this example, I aligned the image to the right. To align it to the left, just change “right” to “left.” To center an image, the best way is to put the image code in between center alignment div tags like so:

WARNING: When you go back into Visual Mode, it may erase some of the work you did in HTML Mode. So I recommend HTML Mode being your last stop. Save your post from there, otherwise, you’ll have to go back and fix everything again.