Plugin Sale! Save 15% on pro plugins with discount code: FALL2020
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

Jeff Starr
About the Author
Jeff Starr = Fullstack Developer. Book Author. Teacher. Human Being.
WP Themes In Depth: Build and sell awesome WordPress themes.
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 »
.htaccess made easy: Improve site performance and security.
Thoughts
Past week here in WA state has been hellish. So much smoke, like living in a chimney.
Now in September, I’m where I wanted to be in March.
Spent some time updating my article on unsafe characters, once again current with latest IETF specification.
Just realized that “Neo” is an anagram for “One”. As in, “he is the One” (The Matrix).
To get VLC app to load all songs (including subfolders), go to Preferences ▸ Show All ▸ Playlist ▸ Subdirectory behavior ▸ Expand.
Switching from PhotoShop to Affinity Photo is one of the most liberating work-related things I've done in 20 years.
Finally got my collection of Pro WordPress plugins updated. Everything now better than ever and current with WP 5.5.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.