Tutorial: How to put a custom button into a WordPress sidebar.

The few blogging tutorials that I’ve done have proven very popular. Recently I have had to do some of my own internet trawling to find out how to do things, in doing so I realised there was a lot more ground to cover when it comes to blogging how-to’s.

One of the things that I had some difficulty working out how to do was to put a custom button into my sidebar. By this I mean: an image created by yourself that links to outside sources like Flickr, Bloglovin, RSS, etc.

So, here’s how I got my buttons, there might be a better way out there, but if it helps..

  1.  Right, I’m going to use my Etsy button as my example. Now, to start off with you have to create your button. I did this on a free editing software called Photoscape that I downloaded, but really you can use any sort of photo editing software – Photoshop, Gimp, etc. If you’re up with the software you can create something on the computer, but otherwise you could just scan in something you’ve done by hand. By the way, If you want more interesting fonts, I use dafonts. They’re free fonts you can download, just check they’re free to use not just personally.
  2. Okay, the second thing to do is upload your image online. I did this by uploading it to flickr, but you could use other webistes such as TinyPic, etc. I uploaded my image so it was private, but that’s at your discretion.
  3. Now, you have to go to your wordpress dashboard, then Appearance and Widgets. On the widgets page transfer a text widget from the Available Widgets area to whichever sidebar area you want the button.
  4. Now comes the more complicated bit: into the widget type <a href=” then paste the URL you want to link to and add “><p align=”center”><img style=”border:none;” src=” this means your button will be centred in the sidebar and without a border.Keep this tab open.
  5. Now, in another tab, go back to your uploaded image in Flickr and click on it until you get the lightbox screen, as seen below, then click on the view all sizes button..
  6. Next you have to right click on you image and click on View image info, once you see the image info pop-up, copy the url next to where it says Location: .
  7. No go back to your open WordPress tab and paste the image URL into the open text widget right after the last speech marks. Then add “></a> after it.
  8. So, you should have something that looks like this: <a href=”The URL you want to link to“><p align=”center”><img style=”border:none;” src=”The Image URL“></a> The only spaces there should be are between the p and align and then also between img and style , and before src , the last thing to do is make sure you click save on the text widget. Just to be clear, the text doesn’t have to be in bold or colour, that was just for emphasis.

I hope this helps!!


No Comments

Please Leave a Reply!...