Adding Images to a WordPress Sidebar

As a follow-up to my previous blog post (Adding Images to WordPress Pages and Posts), I have created a video tutorial to walk you through the process of adding images to a WordPress sidebar:
VIEW VIDEO!

TUTORIAL SUMMARY

There are a few ways to add images to a WordPress sidebar: do it manually, use the image widget, or use a plug-in. The manual method takes longer, but once you know the steps you should be all set. If you are uncomfortable with HTML code, go with one of the many plug-ins that will add an image widget area to your sidebar.

Manually Add an Image to the Sidebar

Manually adding an image to the sidebar can be made easier by copying the code from a page or post. For this purpose, I always have a page or post where I can experiment and play.

1. Create a New Post or New Page and name it something like “My Play Page” or “My Development Page”.
2. Make sure you select the “Visual” tab at the top of the editor, since it’s more user-friendly. Then put your cursor in the content field.
3. Click the ADD MEDIA button, which brings you to the MEDIA LIBRARY.
4. All the images that you’ve uploaded are stored in the Media Library. Find the image you want and select it.
   There are filters and a SEARCH bar at the top of the INSERT MEDIA window to help you find images in the library.
5. With the image selected, its details will appear in the right sidebar. Notice that this is where you can fill in the fields for caption, alternative text (for accessibility), and description. Look further down and you’ll see the ATTACHMENT DISPLAY SETTINGS. Adjust the settings for alignment, linking, and size as needed. I set the linking to None when I don’t want the user to go anywhere when the user clicks on the image.
6. Click on the button INSERT INTO POST. The image will now be in the page or post. Remember to click the SAVE DRAFT or UPDATE button when finished.
7. Select the “Text” tab at the top of the editor. This view shows the HTML code that generates the content. Select the image code and copy it (CMMD-C / CNTRL-C).
   
8. Go to the Widget area (click on Appearance > Widgets in the left sidebar).
9. Drag the Custom HTML widget into the Primary Sidebar area (or whatever area you want it to appear in).
10. Click the triangle to open the widget. Give the widget a title if you want. Place your cursor in the Content field. Paste the code you copied (CMMD-V / CNTRL-V).
11. Click the SAVE button.
12. An alternative is to use the Image widget. This is a bit easier than manually pasting the HTML code. The text field serves as the caption. Experiment with the sizes until you get one you like.

Use a Plug-in to Add an Image to the Sidebar

1. To install, go to the Plug-ins area (click on Plugins in the left sidebar). At the top of the Plug-ins listing, click on the ADD NEW button.
2. Search for the plugin by typing “Image Widget” in the Search field.
3. The plug-in I use in this tutorial is called Image Widget by Modern Tribe. Click the INSTALL NOW button.
4. Activate the plug-in. It will now appear in the list on the Plugins page.

Using the Image Widget

1. Go to the Widget area (click on Appearance > Widgets in the left sidebar).
2. Drag the Image Widget to the Primary Sidebar area (or whatever area you want it to appear in).
3. Click the triangle to open the widget. Click the SELECT AN IMAGE button. This brings you to the Media Library.
4. Find the image you want in the Media Library or upload a new image.
5. Click the INSERT INTO WIDGET button at the bottom of the screen.

Optimization

Before adding images, make sure the images are optimized! For tips on image optimization, check out my blog post How to Prepare Images for the Web.

Related Posts

Adding Images to WordPress Pages and Posts
How to Resize an Image in WordPress
How to Resize an Image in Photoshop
How to Create and Edit WordPress Galleries
Best Alternatives to Photoshop
Image File Formats: print vs. web

Save

Save

Save

Save

Save