How to Properly Wrap Text Around an Object in WordPress

A good WordPress post is a lot more than a wall of text. It contains context, images, blockquotes, pullquotes, and a host of other visual media to split up the content into easily digestible chunks, making it easier to read and less intimidating. It’s important to position these objects properly though and to ensure that they fit in seamlessly with the rest of the post. The idea is to have them supplement the article, not draw the reader’s attention to its placement. It should feel natural as if it just “belongs”. To this end, we need to know how to properly wrap text around an object whether it’s an image, or an iFrame. WordPress provides an easy method to place images accurately but we’ll need to do a bit of coding to get the proper look and feel for other objects.

Aligning Images

Since images and pictures are the most common form of objects in a post, to wrap text around an image in WordPress is absurdly easy. Make sure that you’re running the most recent version of WordPress, and in the visual editor above the WYSIWYG icons you’ll find an “Add Media” button as shown below.

Clicking this will allow you to upload a new image or choose one from the existing library. After you’ve selected it, the picture details will appear on the right hand side. Scroll down and you can see a section called “Attachment Display Settings” as shown below.

Merely select whether you want the image to appear on the left, the right, or the center. If you don’t choose anything, the image will be placed into the HTML without any alignment. It’s easy!

Aligning Other Objects

While wrapping text around images is easy enough, what if you have a custom element like an iFrame? Several little tools and widgets give you a snippet of code to place into the HTML of your WordPress post and without proper alignment, it’ll look horrible. There are two things we need to take care of:

1. The Object Placement

2. The Margins

Say you have an iFrame snippet within the <iframe> tags. Let’s align it to the left. In the WordPress visual editor, click the “Text” tab on top to enter HTML mode. Paste the code where you want it to appear and just before the closing bracket of the first <iframe> tag, type in:

align=”left”

You can see exactly how this is placed in the screenshot below:

This places the iFrame on the left hand side and the paragraph immediately after it in HTML will flow around it to the right.

Adjusting the Margins

Unfortunately this still doesn’t look right. Yes, the object appears to the left with the text wrapping around it, but the text is too close to the edge. Good design principles tell us that we should create some margins above, below, and to the right for left aligned images and to the left for right aligned ones.

Let’s say we want 10px margin to the right and 22px margins at the top. Add the following code immediately following the opening <iframe> tag:

style="margin-right: 10px; margin-top: 22px;"

When placed into the iFrame it appears like this:

You can keep previewing the article till you get the margins just right. Here’s how it will look like finally:

As you can see, the image is both properly aligned to the left as well as nicely padded with spacing to make it appear naturally part of the post without looking ugly. You can use these techniques to work with any embedded object, not just iFrames. Whether it’s pictures or custom code, it’s important to make sure they fit smoothly into your content.