• Website Home
  • About
  • Services
  • Portfolio
    • Recent
    • Archives
  • Shop
    • Catalog
    • Order

ASK Design Blog

Designer | Artist | Teacher

  •  
    • Blog Home
    • Web Design
    • Graphic Design
    • Art
      • Licensed Art
    • Links
    • Calendar
    • Contact

    Adding Images to a WordPress Sidebar

    June 23, 2016 by ProfK Leave a Comment

    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. AddMediaButtonClick 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).
      copy-html-code
    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.

    install-pluginUse 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.
    appearance-widget-linkUsing 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

    Filed Under: WordPress Tagged With: add images to sidebar, Wordpress sidebar images

    Reader Interactions

    Leave a Reply Cancel reply

    Your email address will not be published. Required fields are marked *

    Primary Sidebar

    Subscribe to Mailing List

    Sign up to get periodic updates on Anne's design and art adventures, and receive useful info. via her blog.
    * = required field

    We never share our email list with anyone.

    Looking for Something?

    My Art in a Book!

    kornegger loseyourmind front cover
    Several of my paintings are in this book (including the cover)
    BUY THE BOOK!
    My blog post about designing the book: Self-Publishing Adventures

    Testimonials

    I received the notecards on Friday and it was on my to do list today to email you my deep appreciation for them. They are amazing and I am so glad to have them to share. I am sure I will order more in the future. You are such a gifted artist and I thank you for sharing in a way others can use the art.

    — Shari Spokes

    Your new pastel "Lettuce Lake” is really beautiful. Very, very nice.

    — Tony from Belmont, MA

    My dear sweet sister. I can’t tell you how much I love your pictures. I so much wanted something and was so sorry that I couldn’t pick something out at your sale. On the other hand, I so much wanted something that you had chosen for me. Its been on my mind and suddenly, your beautiful pictures arrived. They are beyond beautiful and I cried when I saw them. Sending you love and my bestness.

    — Marti from Reno, NV

    Affiliate Partners

    We receive compensation when you purchase a service or product via the links on this blog.

    Web Hosting

    ThemeOfMonth

    Great Software Deals!

    MacUpdate Logo

    themeforest banner

    Photo, Video & Design Software

    Copyright

    © 2000-2020 Anne S. Katzeff. All rights reserved. Unless noted, all artwork and text are copyrighted by the artist. Images may not be reproduced, manipulated, or used in any way without Anne’s written permission.

    Categories

    Graphic Design

    • AIGA
    • Design Is History
    • Janice Moore
    • Mass. Contractors

    Web Design

    • 978 Grid System
    • A List Apart
    • A List Apart
    • Adobe Color Tools (formerly Kuler)
    • AWWWards
    • Smashing Magazine
    • underthesite
    • www schools

    Tech-Computer

    • Adobe TV
    • Orramac
    • Teknoziz

    Comments

    In an effort to reduce spam, comments are restricted. Please email Anne if you have a comment or question that you are unable to post. Thanks for understanding.


    Archives

    Typography

    • 1001fonts
    • Adobe Type
    • Adobe Web Type
    • Bitstream
    • Dafont.com
    • Emigre
    • Font converter (free)
    • Font Spring
    • Font Squirrel
    • Google Fonts
    • I Love Typography
    • identifont
    • Typeinspire
    • Typewolf
    • Typoretum

    Photography

    • Creative Commons

    Footer

    Subscribe to Mailing List

    Sign up to get periodic updates on Anne's design and art adventures, and receive useful info. via her blog.
    * = required field

    We never share our email list with anyone.

    Subscribe to RSS Feed

  •  ASK Design Blog
  • Contact

    Website
    Email

    Connect and Share

  •  
  • Copyright © 2021 · Optimal Theme · Built on the WordPress Genesis Framework· Customization and design by ASK Design