How To Add Images/Photos With Wrapping Text in WordPress via the HTML Code Window

This post has been superceded. Please click through to my post on the CaptionPix Plugin to find out about a WordPress plugin that makes image placement very easy. It’s one we’ve written so please use it, and tell us what else you’d like it to do.

My friend Paula has a WordPress Blog, and she recently asked me how to place images within her text at either the right or left margins, and have text wrap nicely around the image, with a border. The instructions for doing this are the same for a self-hosted WordPress blog, but you can also use a plugin like this one if you are self-hosted. Here, I am specifically describing how to do it using using HTML.

1. Make Sure You Have Enough Text

It may sound like, completely obvious, but if you only have a couple of sentences, you won’t have enough text to wrap – and if you have a few images to include in your text, you will have to have sufficient text to wrap around all of them. So step is to write your text, and make sure you’ve a good few paragraphs.

I have a hosted WordPress blog, so I am heading over there now to write some text. Having done that this is what my editing screen looks like, and so should yours.

2. Locate An Image That Is Suitable for Wrapping

If the image you select is too large, it won’t look good when text is wrapped around it (because it will take up all the available horizontal space on the screen leaving your text nowhere to go, and therefore it won’t wrap). To safeguard against this, your image should not be wider than say, 300pixels.

When an image comes out of a digital camera it is usually enormous. Resize the image to be somewhere between 100 to 300 pixels wide. If you don’t know how to resize an image I will write a post about how to do that soon. In the meantime, I am assuming you know how to resize an image. I am now going to find an image and add it to my WordPress post. Of course you can have WordPress auto-resize your images if you prefer.

3. Add The Image to the Media Library

To add an image, I first click on the Add an Image button (as indicated below), which is the Add media group of buttons.

Add media by clicking the add an image button

This causes a pop up screen to appear like the one shown below. When you see this, click on the upload button and navigate to your image file.

When you have located the image file you want to use, the screen will return to look like this – see below. Ensure you make changes as shown on the next screenshot. You need to give your image a good title (written nicely as it will be visible), remove the Link URL and leave the alignment set to NONE. See below.

Next note the name of your image as suggested on the screenshot below and then click on the save button as indicated. Do NOT putinto the post at this time.

At this point you will have uploaded the image to the WordPress web server computer, where the image IS now associated with the post you are writing, BUT at this stage it is not added into the post. So you won’t see it in the post.

I don’t advise that you click on the Insert Into Post button at this stage, but just like I did, ignore that button for now and just click on the Save all changes button as indicated above. In fact the image is now in the Media Library.

The reason I say don’t use the Insert into Post button is because if you do it at this stage, you are trying to do too many things at once. You are trying to upload an image, and place it into the post all in one go. Maybe you didn’t place your cursor at exactly the right point, and if you add the image to the post now, it may end up in a pace you did not intend.

4. Position Your Cursor

Now return to your post. You can see in my post below that I’ve positioned my cursor right at the start of the post. This is because I want to add my image there so that it is level with the first word I’ve written, then have the text wrap around the image. Please do the same with your image. Place your cursor at the very beginning of your post. See below.

5. Add Your Image

You are now ready to place the image. It is very important to place your cursor in an appropriate place within the text before you add the image.

Now place the image by clicking on the add an image button as you did before, and when the pop up screen appears click on the Media Library button at the top, then click on the Show link next to the image you want to place, (you may have many images in your Media Library), but this time click the button “Insert into Post”. Be careful to leave the options on the screen as they are. You should end up with an image that is positioned as the one shown below.

Now you can add some basic HTML.

Note the name of your image – mine was called les-cornettes1.jpg. You know the name of you own image because you noted it earlier on.

Next you are going to save your work by clicking the save button in the post. (Don’t publish yet – only save).

6. Do Some HTML

Next click on the HTML tab to leave the visual editor and enter code mode. Don’t be scared. It is mostly harmless.

If you remember you placed your image at the beginning of your post, so you won’t have to look far in the HTML to find it. It will be near the beginning. In HTML, images are represented with HTML text (as yours will be in your post) and look like this :

When you have identified your image within your HTML you can change the HTML to make the image behave exactly as you want it to. The only difference between my code above and yours will be the name of the image file (in my case les-cornettes1.jpg and the size – of course these will differ for you), but the image HTML should look very similar.

Now make the following changes to the HTML. I have shown the changes I made in blue so you can see them. (The part shown as pink is where your title for your image should be and it should already be there if you followed the instructions properly. If not, you can manually place the title now.)

style="float:left; margin-right:10px; margin-top:5px; border:1px grey solid" class="alignnone size-medium wp-image-29" title="My favourite restaurant in France" src="" alt="" width="300" height="225" />

Then flip back to the Visual editor and save. You should then see that you have a nicely floated image to the left of the text, with a grey border around it 1 pixel thick, and when you hover your cursor over the image the title shows up for the user. You should have a 10 pixel gap between the text and the image and the top of the image should be at exactly the same position as the top of the text. You can experiment with different values to see the difference it makes. You can for example position the image to float right, or change the thickness of the border to say 3px instead of 1px, change the title, and so on.

7. Admire Your Image

Hope this made sense.

Here is how my image looked on the page after this process.


  1. Hey Liz,
    Hope you are well. Doing great at this end and still learning.

    Got a question. Using the html method in this post works fine until I include a caption for the pic. When that happens the text doesn’t wrap.

    The caption coding must be the problem because once removed the text wraps nicely.

    Is there a way to include a caption and wrap the text also?

  2. Thanks Liz.

    Sorry, the code I put in my last comment didn’t come through but you obviously figured it out. The href tags on the two offending pics was the only diff between them and the pics that had no borders. I must have done something different with them than the others, so my bad.

    I guess the next question is, what do I look for in the style sheets (I did scan them) and what would I change?

    Oh, and both offending pics were aligned left and it was the left edge that was normal in both cases. The top, bottom and right sides all had padding between the edge of the image and the border.

  3. Hi Ennis – Without seeing the 6 images as they were I can’t be 100% sure about why the extra borders were only around three sides. It may have been because the images were close together and really, the borders were around four sides, but it didn’t present visually like that. Or maybe for another reason.

    However because you removed the anchor tag from around the two photos (that had the funny borders) and as that cleared the problem, it would have been because anchor tags make things clickable. Now in some cases you may want to make an image clickable so the anchor tags would have been appropriate. The extra border around images are there to show they are clickable – and the anchor tag the “< a >” tag does that by default. Usually this extra border will be blue in colour – the default colour of the ‘click’. This is what I believe you had on your images.

    If you wanted to keep the anchor tag – thereby allowing the images to be clickable, but NOT have the border, you would have to redefine how an “< a >” tag is presented, and you would do this with CSS. This is how web designers change the default behaviour of tags to create non-standard designs.

    I hope that makes sense. If not get back to me!

  4. Hey Liz,
    I put six pictures on my most recent post and two of them had funny borders around three sides. The fourth side of both was fine. The other four pics were fine.

    I compared the code for the pics and found that the two offending pics had the following code wrapped around the pic code:

    When I removed this code everything was as it should be.

    What was happening there? What about this code caused the problem?

  5. Thanks for the compliment but, no, I doubt I will ever get to the point where help of any kind won’t be needed.

  6. Hi Ennis – Thank you. I haven’t forgotten you (re: other posts we discussed – but I guess you don’t need the help now anyway!).

    I should update this post a bit as it’s two years old now.

  7. Hey Liz,
    Just a quick note to thank you again for this great post. I have referred to it many times. Very useful.

  8. No, I don’t mind sharing my reasons. I am kind of a code junkie and I’m constantly looking for someone to explain how things work. And, as I mentioned before I have paid people to solve problems for me. I’m not easy though. I look for the shortest distance between two points as well as the least expensive.

    The problem is, I don’t want people to do things for me, I want to learn how to do it myself. I know some things are a bit complex for a quick online lesson and I don’t expect to be a master coder in this life – I’m not the quickest student either – but if I can at least learn some code relative to things I’m doing at the time then I’m making reasonable progress.

    Generally though – and I don’t mean this as a criticism – coders are coders not teachers. Two different functions. And, I suspect there may be a fear that once I learn “this lesson” there will be no more paychecks. I wouldn’t blame anyone for that. They are generally selling a service not knowledge. In this case, teaching people how to code is like giving away your tools. Not smart. I have had coders who wouldn’t tell me how to do a particular thing without me providing philosophical justification. No lie.

    I know this is a generalization but it has been my experience. A bit long winded, hey. I’m working on that also.

    Thanks for your references.

  9. Oh no. I’m sure it wasn’t the reason for your remark at all. But what was the reason for it if you feel like telling?

    The plugin we have currently released is on the WordPress site here, and this is the plugin home page.

    We have a number of others in the pipeline which will have paid options and so we’re having to alter the design these in order to comply strictly to the GPL that is now being applied by Matt.

    One other thing – you might want to go here and read and do another of my blog posts suggests to further brand yourself online.


  10. Hey Liz,
    I read most of the Chris vs Matt script and your write up also. Very interesting stuff but way beyond the reach of my qualifications or experience. License agreements and how they work is not my expertise. I do understand your frustration, though, and have often wondered how those in the coding industry make a living. A lot is definitely provided gratis. But, I promise. That issue was not the motivation of my remark.

    What plugin did you write?

  11. If you haven’t used that class name (wp-image-xxxx) – you would know if you had, you could remove it with no adverse effects. But given your quest for more information, my advice would be to ditch the visual editor altogether by turning it off in the settings and thereby leave weirdly names class names behind.

    Next, get yourself an Amazon S3 account (it will cost you money but only about $1 per month unless your blog has hundreds of thousands of visitors every month, in which case you won’t mind because your affiliate earnings will pay), and host your images there. Make it an ambition to keep your media library completely and utterly empty.

    I realise you are not being derogatory or I wouldn’t have answered the question – I just wanted to ask you in a roundabout way to think what you said through – especially in view of the raging debate taking place at the moment in the world of WordPress and the GPL.

    The reason I thought the remark that ” . . . sometimes code specialists are a bit tight fisted with the answers”, was surprising is that I don’t know a single commercial industry, that is as complex as this one, that takes its professionals so many years of study where time and congealed work (code) is given so freely, as in the computing industry.

    I think the GPL is to blame for expectations set so high as to render their meeting close to impossible.

  12. Thanks for the quick and helpful response. Am I to understand that “wp-image-1062” could be eliminated entirely with no adverse affect on the image?

    You said,
    “I think most coding people are extremely helpful with their time for free, all over the internet. Where did you get the impression they were not?”

    I hope my remark wasn’t taken derogatorily. It wasn’t intended that way.

    Code people make a living manipulating code and I don’t blame them for doing so. If every newbie blogger got every question answered freely where would the living be? I have paid coders to help me with problems in the past and will probably do so again with no regrets.

    On the odd occasion and, understandably so, code people don’t have time to address novice issues. I’m not complaining about that. It is an expected reality in a fast paced commercialized world and your straightforward “here’s how” seemed very different.

    I have consistently had problems with Amazon image links. They don’t stick or function properly when generated by the affiliate site and pasted into my html editor. From googling, I have observed other bloggers experience the same problem.

    I have spent hours googling the issue looking for answers. In fact, I have gotten some preliminary answers on how to build an Amazon image link from scratch. The knowledge is only partial so far but I am in the process of writing a post to share at least that much. My question about wp-image-1062 was to further my understanding. I’m really looking to understand more. I agree that WP tends to take over and is more limiting than helpful.

    Thanks for sharing.

  13. EnnisP – WordPress has been upgraded a few times since I wrote this post – there are now more ways to muck about with images with the visual tools provided.

    I never use these methods myself as they annoy the hell out of me. It’s much simpler (and faster) to write the HTML yourself, and much better to host the image on Amazon S3 as well, keeping the WordPress installation absolutely clear of all images and all this randomly named code.

    Non-tech people seem to be allergic to code even when it’s easier to do than using the cumbersome methods built to make their lives easier, leading to questions like the one you’ve just asked.

    If you did the code yourself there would be no question about wp-image-1062 or any other aspect of what WordPress did for you. because it wouldn’t be there and you’d gain understanding by doing. But anyway . . .

    The thing you are referring to is a class name. And its there because you handed control of your blog’s innards to WordPress’ visual tools. Its a hook you can use to describe how to visually layout your image but has been automatically generated (hence the daft name) because WordPress is trying to backfill the tech decisions it has to make on your behalf because you’re married to the visual tools.

    If this sort of thing interests you, my advice is to get a divorce (from the visual tools, not your partner) and start writing your own snippets of HTML and CSS in your WordPress blog. You’ll be a lot happier.

    But to answer your question – that code doesn’t do anything at the moment, but if you ever wanted to change the way an individual image displayed, as it’s a WP generated class name just for that one image (that’s why all of them are different for each image), it would uniquely identify the image and so by modifying that class name, you’d be able to to change the way that particular image was arranged on the page.

    I think most coding people are extremely helpful with their time for free, all over the internet. Where did you get the impression they were not?


  14. Hey Liz,
    This is my first visit to your site and I love it. I’m always asking “why” or “what” and sometimes code specialists are a bit tight fisted with the answers. Was actually surprised at how open and free flowing your site is. I haven’t used this particular bit of info yet but have learned a lot just from reading.

    I do have a question though. In your example “wp-image-29” makes up part of the code and I have noticed all other wp images have the same thing only with a different number. The image on my last post – an Amazon image link – has “wp-image-1062.”

    My questions are: what does that piece of code mean and what do the numbers signify?

    I know I am late to this party but this info seems timeless. Whatever your response thanks for being so helpful.

  15. Hey Liz, thanks a lot for this nice post, nice way to describe, by doing so and using your tips I have been able to impress my boss. Hey thanks to you for that.

  16. http://Marion says

    thanks so much, it worked beautifully!!

  17. Thank you so, so much! You just saved me!

  18. Hey what a great explanation, thank so much!

  19. http://Liz%20Jamieson says

    Kelcey and Nick. So nice of you to write and say thanks. It’s appreciated. I love to get people using HTML. It’s easier to use when you get into it than you imagine.

  20. Thanks Liz, that was much easier than I expected!

  21. thanks for the tutorial no problem on doing that. thanks. 🙂

  22. http://Liz%20Jamieson says

    Thanks David – that is kind of you. It really pays to stay away from the visual screen. Once you know a few bits of XHTML, you can avoid layout frustration forever. Hmm – your blog looks very professional. Beautiful layout, but make sure you get the blog software updated.


  23. I have been searching how to do this all night. I have tried other html codes, css, divs and nothing seemed to work. Everything looked right in my “visual” screen but when I went to “view the post” it was all messed up. This worked like a charm. Thank you so much for the time you put into making this really easy to understand for a newbie like me! Let me know what you think of my blog and any tips you might have for me.

  24. http://Liz%20Jamieson says

    Don’t switch back to visual. It ruins everything. That is a general rule and you’re much better off not using the visual editor at all. It can be disabled in the admin panel.
    Your problem can be easily solved. Please remove all the junk that the visual editor puts in on your behalf. What you have is perfect, but remove the junk – ie. remove the part that says class=”alignnone size-thumbnail wp-image-112″.

  25. Hi Liz:

    What a GREAT post! I’m a novice but found your post to be so clear, concise and helpful. However, I cannnot figure out why it didn’t work for me after three tries.

    Here is my code:

    style=”float:left; margin-right:10px; margin-top:5px; border:1px grey solid”class=”alignnone size-thumbnail wp-image-112″ title=”jim ballard” src=”×150.jpg? alt=” alt=”” width=”150″ height=”150″ />In the power of the mind lies a treasure of exciting and fulfilling experiences, blah, blah, blah, blah….

    When I switched back to “visual,” I get the following:

    style=”float:left; margin-right:10px; margin-top:5px; border:1px grey solid”class=”alignnone size-thumbnail wp-image-112″ title=”jim ballard” src=”×150.jpg? alt=” alt=”” width=”150″ height=”150″ />In the power of the mind, blah, blah, blah, blah…

    Any input you could provide would be HUGELY helpful. In advance, many thanks for your help!

  26. http://Liz%20Jamieson says

    Hi Srdjan. I have been to your web site here, and your photo looks fine. I see you have used the inbuilt wordpress method for positioning your image.

    If you use my method you have complete control but you have to get everything right or it doesn’t work.

  27. the previous code didn’t copy correctly. It should be:

    [caption id="attachment_33" align="alignnone" width="300" caption="What motivates you?"]style=”float:left; margin-right:10px; margin-top:5px; border:1px grey solid” class=”size-medium wp-image-33″ title=”Motivation” src=”×202.jpg” alt=”What motivates you?” width=”300″ height=”202″ />[/caption]

  28. Hey Liz,

    It’s not working. I add in the code (including the little part that’s not in blue but is different than your initial code: alt=””) but it still gives me an error and won’t read my picture.

    My final code is as such:

    [caption id="attachment_33" align="alignnone" width="300" caption="What motivates you?"][/caption]

    Can you tell me where I’m going wrong?

  29. http://Liz%20Jamieson says

    Leena – Please can you comment back with a link to the page where the image is not showing up correctly?

  30. http://Leena says

    The HTML codes don’t show. ):

    img class=”alignnone size-medium wp-image-1062″ style=”1px grey solid” src=”” alt=”” width=”250″ height=”227″ /

  31. http://Leena says

    Okay. I know HTML but I’m pretty new to WordPress and I’m starting to get frustrated right now. Since I’m not the Admin of the Site where I post but only can submit articles I do not have access to the CSS style sheet and therefore tried to do it the way you described it. (In such neat, actually pretty precise steps.)

    Everything looked the way it did when you did it. Even the end result when going back to the “Visual” style instead of HTML. Perfect. Then I saved it and again it didn’t work!! Once I got back to see what went wrong the HTML-Code had changed!

    (Just added the . infront/after each > < because I suppose you can’t post original HTML tags here without them actually showing the picture. 🙂 )

    So now, when I look at the preview the picture is centred and there’s a gap between the picture and the text. (Whilest the text itself isn’t centred.)

    Pleeeease help my and you’ll become my godess! Haha.

  32. http://Liz%20Jamieson says

    Thanks Jen. Someone wrote a comment here a few weeks back (which I deleted) to say I was a f****** ret**d for trying to get “ordinary” users to do little bits of HTML.

    You’ve have highlighted exactly why I think this is the right thing to do. You get control. Thanks for taking time to comment – I feel much better now.

  33. Thanks for this page! When i began using wordpress I thought the visual option for editing posts would be exact, but it just ended up with awkward gaps and dodgy alignments in my posts. Thanks to you taking the time to write this post the problem is now solved and I once again have complete control over what my posts look like!

  34. http://Liz%20Jamieson says

    Thank you Opengiga. I hope you know that I’m trying to encourage you to get into the HTML so that you can tackle other things later, once you are used to it. It does give you ultimate control.

  35. so informative posts and it’s really great for beginners. Thanks Liz to share with us.

  36. http://Liz%20Jamieson says

    No problem Tony. You get better control if you do this stuff yourself via HTML (or as Erwin above suggests, using CSS if you can). Persevere – it’s worth it in the end.

  37. you saved me from pulling my hair out tonight! thanks a lot!!

  38. http://Liz%20Jamieson says

    Yes – it is better. But I am trying to get people who don’t know HTML to take a look at it for the first time. CSS comes next.

  39. Better to include the style definition in the CSS style sheet. Add sections to cover for the alignment none, left, …:

    .alignnone {
    border:1px grey solid;

    .alignleft {
    border:1px grey solid;

    … etc …

  40. http://Liz%20Jamieson says

    So don’t use the pre-sets and have one more go at delving into the HTML. You can do it. The irony is that when you realise how easy it is you’ll wonder why it ever went wrong. Computing is like that. When you get over the frustration and disappointment. I guess computer types like me are used to battling with problems into the small hours. It’s how we get things done. It’s not patience – it’s tenacity.

  41. I tried and it completely fucked up – so sorry not going there again! It wouldn’t delete the old information rearranged the new and basically tied me up.

    The right hand one worked fine – I changed the code without a problem – but the text wasn’t butting up evenly – I probably have to align it I guess.

    I’m afraid I can’t get the pre-set ones to work at all – it just shoves the image in left or right and leaves the text below.

    Anyhow I might be brave enough to try again – but I don’t have the time at the moment and am at work all day tomorrow and possibly the day after.

    Thanks for your patience – better than mine!

  42. http://Liz%20Jamieson says

    Hi Jenny – thanks for publishing my fridge on Fridge Friday by the way!

    Please try this and see if if works for you. I am always encouraging people to look under the bonnet of their web sites, and this is a great way to start. You get more control this way not that I’m a control freak or anything . . .

  43. LIZ! This is awesome!!! I started doing this Make Me Laugh Monday thing and have been hoping for a “magic click” to get my text around the MMLM image… perfect timing. What a great question for Paula to ask – and what a great gal to answer it so thoroughly for all of us to benefit from! I am sooo excited to try it!

  44. http://Liz%20Jamieson says

    Wow – that has really looks good Paula. Well done. It’s strange how a simple thing like left or right aligning a photo can give the article a more polished look.

    I don’t know why your second image failed to display well. If you wanted to align right you just have to change left to right on the float, and change the margin-right to a margin-left. Also you need to place the cursor in the correct position which would be at the *beginning* of a sentence. Lastly you would need to make sure the sentence you chose to use as the place to position the cursor was miles away from the previous picture so that they didn’t interfere with one another.

    Getting back to what you did do, I took a look and it isn’t quite right, but as luck would have it, it has displayed well.

    The blue line that needed to go in precisely where I specified isn’t complete and has some extra spurious characters in it at the end. Also the description of the image is missing. I also suggested that you remove the Link URL from the image (see above) – it is not necessary but it prevents the photo from being clickable – which usually is not required.

    Probably the best thing to do is to keep a notepad file with the style alteration in it (the line you tried to cut and paste), make sure it is absolutely right and then paste that in. But be sure you are in the HTML editor (not the visual one) when you do it. That might be why it wouldn’t cut and paste?

    Please (like this is school?!) can you go back into the HTML window and fix it. Look at it calmly and you’ll see the line you should have added is not exactly as I specified it. Change it so it is. And add a title attribute as in my example. You must have forgotten to do that at the Media Library stage, but you can do it manually now if you like. Is that cow called Desiree? Well, it would be nice to have a title of say “Desiree is happy to be outside” or something like that that appears when the user hovers their cursor over the photo.

    Lastly why does the point and click pre-set work? It *does* work. But it doesn’t work as well as doing it the way I’ve described. The HTML way sounds harder at first, but after you have done it a few times you’ll be typing that extra line, in the right place without even thinking. It is just a small familiarity thing.

    The pre-set doesn’t allow you to adjust the vertical alignment – your photo would not be precisely aligned with the text as it is in your post. Nor does it allow you to change the colour and width of the border. Also, doing it this way moves you one step closer to de-mystifying HTML. And if one day you want fuschia pink borders, 10 pixels thick around your images, you can.

  45. Brilliant Lizzy and thank you.

    The only problem I encountered was trying to cut and paste your piece of changed code into my HTML draft – it wouldn’t paste. I also tried another image further down on the right hand side – I changed the code accordingly – it worked just fine but I didn’t like the end result. Though keeping to the margin the text was messy – maybe I should have blocked that piece of text?

    Anyhow have a look and see what you think.

    And thanks again for your very clear, descriptive and easy to follow steps.

    Just one query, why doesn’t the pre-set aligned left or right in the wordpress image file work?


  1. EnnisP says:

    […] Two is Liz, who I recently met online and have found to be very responsive and helpful. She has several sites but the one that got my attention was here. […]

  2. […] How To Add Images With Wrapping Text in WordPress? Question: How To Add Images With Wrapping Text in WordPress? Answer: Yes, I recently got an superb articles where you get the full instructions of that matters. How To Add Images/Photos With Wrapping Text in WordPress via the HTML Code Window […]

  3. […] British sausages… she has got serious technical skillz! So, WordPressians, visit her post on How To Add Images/Photos With Wrapping Text In WordPress. Ok, you can leave a comment before you go… Published by jennyonthespot on May 14, 2008 in […]