Adding images to header and sidebar in WordPress
Due to ”popular demand” I will try to create a series of short tutorial posts answering some technical questions I have been asked here at WA.
(Some of the questions will probably be answered within the certification training as well, but I’m sure these short posts will also come in handy here for people looking for quick answers to these questions.)
How you can add images to certain places within your WordPress site varies depending on your theme. In this tutorial I will show in a very conscise manner how images can be added to the Media Library and how you can add them to your blog’s header and sidebar.
In the Certification training there is a video tutorial about adding images that complements this tutorial (Course 2, Lesson 5: Making Use of Visuals, starting at about 12:40)
The Media Library
The images that you want to add to your WordPress blog will have to be added to the Media Library first. On your WordPress site’s admin menu (on the left side), go to Media -> Library. Here you can see all images you have added so far. You can add a new image by clicking ”Add New” next to the Media Library title. You can also go to the same place from the menu, Media -> Add New. Then, either drag and drop the image files from your computer to the area surrounded with a dashed line or click ”Select files” to browse files from you computer.
When you write a blog post or add a new page, you can also add images directly to the Media Library when writing the post. So there is no need to go to the Media Library first separately to add the images.
Adding images to the sidebar
Head over to Appearance -> Widgets.
On the Widgets page you can see a section called ”Sidebar”. This is where you can add all your sidebar content. To the left there is an area called ”Available widgets”. If you want to add a new image to the sidebar, drag the block titled ”Image” from the left side to the Sidebar area. You can also rearrange the sidebar by dragging the added components by grabbing them from the title area and then moving to the new place.
When you have added the image block to the sidebar, add the image by clicking the ”Add image” button. You can choose an image from the Media Library or upload a new image in the ”Upload Files” tab.
When you have added the image, you can also add a title, but you don’t have to. Then click ”Save”.
Adding images to the header
This can be a bit trickier as the header part of the WordPress site varies quite a bit from theme to theme.
Usually you can add your logo or other header image by going to Appearance -> Customize. Depending on you theme you should find a place where you can choose which image you wish to use as a logo in your theme’s customization options. Typically this should open the standard Media Library view where you can choose the image the same way as explained in the sidebar chapter.
The size of the logo image can also be restricted by the theme. If your image doesn’t look as you were hoping it should, you can either edit the image to better suit the theme’s requirements or find out if the theme allows you to edit the size of the logo area.