Spring Sale! Save 30% on all books w/ code: PLANET24
Web Dev + WordPress + Security

WordPress Basics: Uploading and Displaying Images

This article continues a series of tutorials covering the very basics of using WordPress. In this part 5 of the series, you will learn how to upload and display images (and other media) with your WordPress-powered site. Estimated time required: 15 minutes.

Upload & display images

To upload and display images (and/or any supported file type), follow these seven simple steps:

1. Login and go to the Write Post panel
If you haven’t already, log in to the WordPress Admin Area. After you are logged in, go to the “Write Post” panel by clicking the “Write” tab and then the “Write Post” sub-tab (see example). The text fields displayed in the Write Post panel will be blank unless you are editing an existing post.
2. Scroll down to locate the Upload subpanel
The “Upload” subpanel is located immediately below the post text field. Scroll down a bit — it is the same width as the post text field and is colored light blue (see example). Initially, the only tab you will see is the “Upload” tab. However, after you upload your first file, two additional tabs will appear: the “Browse” and “Browse All” tabs. As you may have guessed, the “Upload” tab opens the file upload feature, while the “Browse” tabs open a thumbnail gallery of your uploaded files.
3. Upload a file
Under the Upload tab, click the “Browse” button. This will open into a folder on your local machine. Navigate to and select the image which you would like to use in your post and click the “Open” button (see example). The path to the image should now appear in the text field next to the Browse button. Next, add a title to your image file in the “Title” text field. Also if you wish, you may add a file description in the “Description” text field, although it is not required.
4. Click Upload
With all of the information in place, click on the “Upload” button located in the lower-right corner of the Upload File subpanel (see example). To cancel your order, click the cancel button. After your file is uploaded (this may take some time — be patient!), a thumbnail version of the file is automatically created and should appear under a new tab called “Browse”. Additionally, a thumbnail should appear in the other tab, “Browse All”.
5. Additional Uploads
You may wish to upload more than one file. If so, repeat steps 3 and 4 for each additional file. Notice that there are two different tabs available for viewing thumbnails of uploaded images, “Browse” and “Browse All”. To view only thumbnails for images uploaded during the current session, click on the “Browse” tab. To view all uploaded files available, click on the “Browse All” tab. Once you have several files uploaded, you will notice navigational tabs to the right of the Browse tabs (see example). These enable you to navigate through the uploaded files in incremental fashion. Also, note that multimedia files will not display a thumbnail, but rather will display an options link.
6. Setting the Options
Each uploaded file is represented under the browse tabs with either a thumbnail (for images) or a text link (for multimedia files). Each item also provides a set of options when it is clicked. Click on a thumbnail, for example, and you will be presented with five overlayed menu options (see example). The first of these options tells WordPress whether you want to work with the original image or its automatically created thumbnail. The next option tells WordPress whether you would like to display the thumbnail or image (depending on your previous choice) as-is, linked to its corresponding image, or linked to a page. After making that decision, use the next menu item to automatically insert the required code into the post-editor text-field (directly above). Once the code has been inserted, you may change anything you wish, but make sure you know what you are doing first. The next option enables you to delete the uploaded file and last option simply closes the menu box.
7. Publish the Post
After you have uploaded and inserted your image(s) or file(s), complete the post and publish it to the internet (for help with this, check out Publishing Posts. That’s all there is to it! Don’t forget to check your new post to verify everything looks as expected.

That concludes our WordPress Basics series. Thank you for following along, may you have much success with WordPress.

More Information

About the Author
Jeff Starr = Creative thinker. Passionate about free and open Web.
GA Pro: Add Google Analytics to WordPress like a pro.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
USP Pro: Unlimited front-end forms for user-submitted posts and more.
Thoughts
I live right next door to the absolute loudest car in town. And the owner loves to drive it.
8G Firewall now out of beta testing, ready for use on production sites.
It's all about that ad revenue baby.
Note to self: encrypting 500 GB of data on my iMac takes around 8 hours.
Getting back into things after a bit of a break. Currently 7° F outside. Chillz.
2024 is going to make 2020 look like a vacation. Prepare accordingly.
First snow of the year :)
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.