WordPress – Adding Images to Your Post and Pages

WordPress makes it easy to add images to your layout. Images can be used in your pages or your posts. There are a few ways you can add images to your site in WordPress. You can use the File Editor on the posts or pages page. You can use the insert picture icon to insert a picture that you want to link to. And you can use CSS to insert a picture. I always use CSS because I like for my images to float so that the text will hover around it. I will show you all three ways to add images in WordPress.

Adding Images Using Your File Editor

Login to your WordPress Admin Panel. Go to Write and then Post or Page. Scroll down to the blue box in the middle that says File, Title, and Description. Click on Browse to locate your image on your hard drive. You can type in a Title and Description but it is not a must. Then click Upload. Now your page will reload and you should see your image in the blue box. Make sure the Browser Tab is clicked. To add that image to your page or post, click one time on the image. You will see a few options; Using Thumbnail, Not Linked, Send to Editor, Delete, and Close Options. Click on Send to Editor and that will place it in your content box.

Adding Images Using Your Insert Image Icon

Login to your WordPress Admin Panel. Go to Write and then Post or Page. Scroll to your Content Box where you type. In the top of that box you will see a little tree. Click on the tree to insert an image. A window will pop up and ask you to type the link of the image. You can do this one or two ways. One, you can link to a picture on another site or two, you can upload images to your server using a FTP Manager. If you are linking to an image on another site just copy and paste or type in the URL of that picture in the link field. If you are uploading your images, it is best you create a folder for images in your WordPress Directory. For example, create a folder called wp-images. Upload all your images to that folder. To place the image on your post or page type in your site url, the folder, then the name of the image in the link field. Like this:

http://www.yoursite.com/wp-images/myimage.jpg

You can type the title of the image if you wish then click Insert and it will insert it in your post or page.

Adding Images Using CSS

The easiest way to do this is to short hand it. You will need to upload the images to a folder first. Just like I showed you in the example above. Go to a page or post that you have typed a good bit of text on. To do that, login to your WordPress Admin Panel, click Manage > Pages or Posts. Find the page or post that you want to use and click Edit. Once your page loads click on the little HTML icon in the content box. In that window place your mouse where you want your image to go and type the following:

Replace image.jpg with the name of your image. And replace wp-images with what ever you named your folder to store your images in. You can float it anyway you wish. To float it right, type right where I have left and do the same for middle. The padding is in there to keep the text off the picture. The higher the number, the further the text will be away from the image.

So just place that little bit of code in your HTML window in WordPress and that will insert an image and float it. I have set up an example to show you the difference in the options. WordPress makes it simple to add images to your page but often CSS is needed to make the images look right.