• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • About
  • Contact Us
  • Disclosure
  • Brand & Web Development ➩

techmomogy

modern mom life

  • Tech
    • Streaming
  • Reviews
  • DIY
  • How-to
  • Travel & Events
    • Disney
  • Shop
    • Shop My Style
    • Shop My Home
    • Shop My Tech
    • Shop My Beauty
    • Shop My Fitness
    • Shop My Boys’ Style

0 June 29, 2016 Blogging Tips & Tricks

How-To Add a Custom Graphic to Your Sidebar

This post may contain affiliate links. Click here to read our full disclosure.

I love to help other bloggers as much as I can, so I’m going to start sharing some of my (new and old) tips & tricks for WordPress – although this could work on any platform!  If you’re looking to create a custom graphic for your sidebar and you’re unsure how to add it and make it clickable, I have the code for you. Scroll down for how to add a custom graphic to your sidebar.

How To Add a Custom Graphic to Your Sidebar - Techmomogy - PIN

Yes, there are plugins that can help in adding an image/graphic to the sidebar, but I always recommend trying not to use plugins unless absolutely necessary.  This task is easy once you know how to do it – so bogging down your site with another plugin is, in my opinion, unnecessary.

“Size graphics twice as big as you want to display them so they appear nice and crisp on ultraHD displays.”

Here we go:

Step 1 – Create your graphic

Recommended sizes for the sidebar is 350 pixels wide by whatever height you want.  Size graphics twice as big (example for 350px by 250px graphic is 700px by 500px) as you want to display them so they appear nice and crisp on 4K/ultraHD/retina displays and we will use our code to display them at half the size.

Step 2 – Upload the graphic & grab the URL

The easiest way to upload a graphic you would like to host on your site is to do the following: Click “Add New” under “Media” in your WordPress dashboard and upload the file. Click the filename once the upload is complete and grab the URL of the file as shown below.

Image URL - Techmomogy

Step 3 – Use this code in a TEXT widget

Clickable Image (displayed at image size)

Centered Clickable Image (displayed at image size)

Scaled Clickable Image (I recommend half the pixels of the graphic created. So for the 700px by 500px example above, this code should have height = 350px and width = 250px)

Scaled Clickable Image HTML - Techmomogy

Non-clickable Image (displayed at image size)

Centered Non-clickable Image (displayed at image size)

Scaled Non-clickable Image

Step 4 – Check the graphic in the front end.

Check your computer and mobile too to make sure it’s displaying how you want.

That’s it.  See?  No plugin needed.  

Hope this tip is helpful!

Nicole K.

0

Categories: Blogging Tips & Tricks Tags: Blog Design

Nicole is a former structural engineer turned homeschooler, brand & web developer and social media manager. Obsessions include coffee, Disney, DIY and, of course, tech. READ MORE →

Nicole Kobilka: View My Blog Posts

KEEP UP TO DATE!

don't miss any new posts from techmomogy!

Previous Post: « MOANA – New Teaser Trailer Now Available!
Next Post: [Instagram]Excited to share this #DIY… »

Reader Interactions

Leave a Reply Cancel reply

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

Primary Sidebar

  • Bloglovin
  • Email
  • Facebook
  • Instagram
  • Pinterest
  • RSS
  • Twitter
  • YouTube

Hi!

About
Mom of 2, former engineer turned Brand & Web Developer & homeschooler. I blog about tech, DIY, travel, Disney & my sons. Serious HGTV/Fixer Upper fanatic.
Learn more ➩

Keep up to date!

don't miss any new posts from techmomogy!

Insta Stories

Categories




  • Home
  • About
  • Contact Us
  • Disclosure
  • Brand & Web Development ➩

Copyright© 2023 techmomogy · Design by squishy