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.

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.

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.

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)

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