HMTech.ca

Apr 27 2010

Add a Twitter Icon to your WordPress Sidebar

Filed under: Technology, Tutorials by: brennan

Want to add a button to your sidebar that links to your Twitter feed? This post will show you how to find, customize, and place a Twitter icon on your WordPress sidebar.

Step 1: Find an icon

Here are a few links to sites that provide various Twitter icons:

Twitter Icon Factory
100 Remarkable Twitter Icons
Search Google Images

Step 2: Modify it

You will probably need to modify the icon based on the background color of your website and the size of the area the icon needs to fit in. Most downloadable icons have a white border, which suits that majority of websites. However, if your website’s background is any other color, you will need to paint the border of the icon to blend in with your background.

As all Windows users will have access to it, I will show you how to modify the border of the icon using Microsoft Paint. However, any other image editing program should do the trick.

First of all, take a screenshot of your website and paste it into Microsoft Paint.

Next, open a separate instance of Paint and open the Twitter icon you downloaded in the first step.

*** Tip: Hover your mouse over the tools on the left hand side of Paint to discover their names.

Use the Select tool to select the entire icon. Right-click on it and select “cut”.

In the instance of Paint with your website, right-click and select “paste”. The result should look similar to the screenshot below:

Select the “Pick Color” tool and click anywhere on the background color of our website.

Now select the “Fill With Color” tool and click anywhere in the white area around the Twitter icon. This will fill in the white border of the icon with the background color of your website. The result should look like this:

Now use the select tool to cut a square around the Twitter icon. Cut it, open a new instance of Paint, and paste it in.

Save the new image somewhere you will remember as we will need it in the next step.

Depending on the size of your new image, you may need to resize it. Here is a link to a short tutorial that shows you how to resize images using Picasa.

Step 3: Upload it

On the left sidebar select the “Media” link. The Media Library should open.

Click the “add new” button at the top.

Click the “select files” button and browse your computer for the modified twitter icon.

After the image has finished uploading, copy the File URL as we will need it in the next step.

Click the “Save all changes” button.

Step 4: Create a text widget for the sidebar

The easiest way (I know of) to add an icon to the sidebar is to create a text widget and insert the HTML.

Click “Widgets” under Appearance on the left sidebar.

Drag a new text widget into the sidebar. There may already be existing widgets in the sidebar so insert the new text widget in whatever way looks best.

In the text widget type in the following HTML (obviously change the URLs to match your Twitter account and image):