Wrapping text around images in WordPress

Current versions of WordPress now have image alignment built-in. WordPress adds CSS classes to align the image to the right, left, and center of a paragraph, so the text will wrap around the image. In order to take advantage of these new CSS classes for image alignment and the text wrapping around the image, the WordPress Theme must include the following in the style.css found in the WordPress Theme directory.

When adding the image in your WordPress blog, select the image alignment as right, left, or center in the Image/Media Panel. The image will be embedded into your blog post with the selected style for alignment such as:

Other than displaying the image on the right and left of the post, more designs are also possible. We would specifically discuss about wrapping the text around the images. Here is a look at a typical image tag in your post, without the instructions for wrapping the text around the image. Note that we’ve added both the title and alt attributes to the tag; alt is important for accessibility, title is for the image tool tip.

To begin the process of setting your image up to be wrapped, there are a few changes that you may need to make to the style sheet that controls your WordPress site. CSS offers a great list of resources for creating and editing Cascading Style Sheets.

From your WordPress theme folder, open the style.css file in a text-editor. Save a back up copy somewhere before you do any edits! Now, do a search for img. Hopefully, all your image selectors will be grouped together. If not, find them all and cut and paste them into one group to make this process easier. If no boarder with the image is required, use this piece of code:

For 1 pixel solid red line border, add:

If you create a link around an image, some browsers will put a border around the image to let the visitor know it’s a link. If you don’t want that, use the following:

In case you need padding around the images and want to make sure that the whole width of the image shows up rather than just a part of it. If it isn’t in your style sheet, add the following:

Finally, you can also adjust the position of the image to be right, left or center:

Besides, the images can be made to float, again, with left or right alignment:

With these simple steps, you can enhance the beauty and content of your WordPress posts considerably.