tech-supportIf you’ve had a blog for very long, you’ve undoubtedly come across the need to add custom content to your sidebar. What kind of custom content, you may ask? Well let me give you a few examples of things you might want to add:

  • someone’s blog badge/button
  • a cute picture of your poodle (or your profile picture)
  • a “follow me on Twitter” link
  • code for an affiliate ad network

Pretty important stuff, huh?

Well, like I said, its easy peasy. The following is a simple tutorial on how to add a text widget in WordPress. Although WordPress has a lot of pre-formatted widgets (like blogroll, categories, archives, etc.) it doesn’t do everything for you. You need to know a few things about HTML code. Don’t worry…I’ll hold your hand through it.

So here’s what you do…

  1. From your WordPress Dashboard, go to the “Appearance” tab on the left hand column. Then press “Widgets” (If you are using anything prior to 2.7, go to “Design” near the top of the page and then “Widgets”).
  2. Go down the list on the left hand side of the page and click on the “Add” button on the “Text” widget.
  3. This will add a text widget to the right hand side of the page. From there, you can actually drag and drop it into whatever order you’d like.
  4. Next, click on the “Edit” button on the text widget that is now on the right hand side of the page. This will open up a blank window where you will add your code.
  5. Sometimes, other sites/administrators will give you the exact code to cut and paste in this area. So do just that, click “Change” at the bottom of the window, then be sure to click “Save Changes” at the bottom of the whole column. You can also add a title in the top field of the window. If you leave it blank, it will be…blank. But say you have something like a picture that you’d like to add and you’re starting from scratch…go on to the next few steps.
  6. You’ll need to first upload your photo to your blog or photo hosting service (like PhotoBucket). Then, you’ll want to note the address. It will look something like this:
    http://www.yourblog.com/images/yourpicture.jpg
  7. Next you’ll put the above address (URL) in an HTML “tag”. A tag is anything between a < and a > symbol. You’d write the following code exactly:
    <img src=”http://www.yourblog.com/images/yourpicture.jpg”>
  8. If you want your image centered, you’d add a <center> tag before and a </center> tag after the address. So your code now looks like this:
    <center>
    <img src=”http://www.yourblog.com/images/yourpicture.jpg”>
    </center>
  9. If you want to add a link to your image add the following before your <img> tag:
    <a href=”http://www.linkaddress.com”>
    then this after the <img> tag:
    </a>
    (Be sure to get all those ” and / and = in here!)
  10. That’s it. Want to learn more HTML? W3Schools offers wonderful tutorials on HTML and more.

Questions? Pipe up and let me know!

Related Posts with Thumbnails