The image upload and insert feature has been around since WordPress 2.5, but remains very confusing for many users. In this tutorial we show you how to use this feature to upload and insert images directly into your Pages and Posts.

Part of the problem with understanding this feature is that the WordPress team set up a few default settings that are incorrect, so you need to pay close attention the selections. Follow these steps to simplify—and hopefully better understand—the process.

Step 1. Open the Editor for the Page or Post where you want to insert an image. Place the cursor in the Editor where the image will be inserted.

If you want to left-justify the image with text wrapping around the right, or wish to right-justify the image with text wrapping around the left, position the cursor just before the start of the text that needs to wrap. Center-justified images should always be between paragraphs, so create a few blank lines and set the cursor between the paragraphs.

Step 2. Select the “Add an image” icon found just above the Editor window. This is the first of foour small icons next to the words, “Upload/Insert.” The Add an Image subpanel should appear with a number of selections that you will have to make.

Step 3. If you see a message that says, “You are using the Flash Uploader…”, click on the Browser Uploader link. The Flash Uploader is junk and doesn’t work correctly most of the time. Use the Browser Uploader.

Click the Browse button and navigate to the place on your PC where the image you wish to insert is stored. Select the image. Click the Upload button.

Step 4. After the image is uploaded the subpanel box will expand. Scroll down to see the selections. It is very important that you make the correct selections.

You can edit the image if you wish, but the WordPress image editor is a bit crude. It is better to edit the image to the correct dimensions before uploading it.

The initial title will be the same as the name of your image file. The title will be used to represent the image in the Media Library and will also show up as a tool tip when a user does a mouseover on the image, so it is a good idea to change it to something more meaningful and descriptive. In this example, we changed the image file name 1rc51a1 to “Honda RC51 motorcycle”.

Add some Alt Text. Alt Text is used to describe the image for spiders and is used by the screen readers that vision-impaired users may utilize when they use the Internet. This can be a good place to add some keywords that focus on the keyword theme for the web page. The idea is to use text that describes the image or reinforces the topic for the page.

A Caption and Description is optional. A Caption will appear below an inserted image. The Description is used with the Media Library and does not display on a web page.

Step 5. Scroll down further. If there is a URL in the Link URL box and you do not wish to create an image link, select the None button below the Link URL, If you do want the image to link to another web page, enter the correct URL in the box. The link URL that WordPress inserts is usually invalid.

If you select File URL, WordPress inserts a path to the image. This could be useful if users wish to download the image or view it in a new window, but for the most part is a useless feature.

The Post URL inserts the URL for the current Page or Post, which is sometimes incorrect and pretty much useless. The real choices are to either select None to remove any URL being displayed or to use a URL to another web page.

For the Alignment, select the type of positioning you wish to use. This will only work correctly if the proper CSS rules have been set up in the theme’s style sheet. They are there by default with the Twenty Ten and Twenty Eleven themes, but may not exist with other themes and will have to be added.

To left-justify an image with text wrapping around the right side, position the cursor at the beginning of the line of text that you want to wrap around the image.

To center-justify an image, hit the return key a few times to create a few blank lines. Place the cursor at the beginning of one of the blank lines.

To right-justify an image with text wrapping around the left side, position the cursor at the beginning of the line of text that you want to wrap around the image.

Select the image size that you wish to insert. WordPress will always create thumbnail of the image, but may also create other variations depending upon how it is configured. It will create Medium and Large variations only if you upload a very large image. For our example, the image that we uploaded was not very large, so it only created a thumbnail. The Full Size image was therefore selected using the radio buttons.

Step 6. Click the “Insert into Post” button. WordPress will generate the HTML code and insert it into the Page or Post that you are working with. If you click on the “Save all changes” button prior to clicking the “Insert into Post” button, the image will be uploaded into the Media Library and you will have to insert the image using a slightly different process. Those instructions follow this section in the guide. The image and the selections are also uploaded to the Gallery when the “Insert into Post” button is clicked.

If you make a mistake, you can always edit the HTML code in the Page or Post using the HTML version of the Editor.

Note: The Uploader will not work correctly unless the permissions for the /wp-content/uploads/ directory is set to 777. I have also seen problems if you try to upload the same image using the same file name twice. If you need to upload the same image or two variations of an image that are named the same, change the name for one of the images before using the Uploader.