When creating pages or posts on your WordPress website one of the most common things that you will do is add images. In this 101 tutorial we will look at two different ways of adding images to the WordPress admin panel: through the ‘Media‘ area and in the page/post edit screen.
Adding Images in the Media Section of the WordPress Admin Panel
Everything we will do is performed in the admin panel, so the first step is to log into your admin panel.
By default, you will access the log in screen through the /wp-admin URL. So, if your domain is www.mydomain.com, the URL to log into your admin panel will be www.mydomain.com/wp-admin. Once logged in you will need to navigate to the ‘Media‘ link on the admin menu.
When hovering your mouse over the ‘Media‘ link you will see a ‘Library‘ link. You can click this to access the media library page. Alternatively, if you click on the ‘Media‘ link then, by default, it will also take you to the media library page.
Once the page has loaded you will see all images that have been added to the website from the admin panel. To add a new image click on the ‘Add New‘ button which is located next to the “Media Library” title.
(An alternative option is to hover your mouse over the ‘Media‘ link, but instead of clicking on the ‘Library‘ link, click on the ‘Add New‘ link instead).
After you click on the ‘Add New‘ button a section underneath will display. This will prompt you either to drop files from your computer into that location, or to click on the ‘Select files‘ button where you can select the image from your computer.
WordPress will then upload the image and display a progress bar underneath the ‘Drop files here‘ section.
That’s all you need to do to add an image to the ‘Media‘ section of the WordPress admin panel.
Changing Image Attribute Information in the Media Library
The next step is optional but I recommend that you take it whenever you upload new images. Images have various attributes that you can amend. Some, such as the ‘Alt‘ text, are important as they can have an effect on Search Engine Optimisation (SEO).
After you have added an image you should go into your ‘Media Library‘ where you will see your image in a kind of preview. If you click on the image it will pop up an ‘Attachment Details‘ section where, on the right hand side, you will see information about the image as well as some
attributes that you can change.
WordPress will automatically save any changes you have made.
Adding an Image in the WordPress Page/Post Edit Screen
The final method we will look at to upload an image in the WordPress admin panel is through the Page/Post edit screen. In this tutorial I am using WordPress version 5.0.3 which uses the new Gutenberg editor. If you are using an older version of WordPress the method will be similar but the following screenshots will appear in a different form.
When you are in the area where you want to add an image you will need either to click on the image icon or the ‘+‘ icon and select ‘Image‘.
Next you will see an area that looks similar to the ‘Drop files here‘ section that we covered above. It works in the same way to upload your image. Once it has been uploaded the image will display.
Changing Image Attribute Information on the Page/Post Edit Screen
If you click on the image after it has been uploaded, the Meta Box on the right side of the screen will show some information that you can add to it. At the very least I recommend you select the ‘Image Size‘ that you want and the ‘Alt‘ text. The alternate text is an attribute for images. It is text that will self-generate if the image itself cannot be displayed for some reason. It is one of the many factors which is used in SEO.
In this tutorial we have covered the two main ways to add images to WordPress from the admin panel. I recommend making it a habit when adding images to add attribute information such as the ‘Alt‘ text after you have uploaded your image. It is not much effort and can help slightly with your website’s SEO.
If you would like any more in depth tutorials about images in WordPress please let me know in the comments.