You can customise your sidebar by dropping and dragging ‘widgets’ into your sidebar arrangement. A widget is just a ‘thing’ that contains code that lets you present your site as you want. The various widgets in WordPress include ones for adding text, for displaying categories and archives, and for including a calendar in your sidebar. This page will help you set up a basic arrangement for your sidebar using widgets.
Using widgets to customise your sidebar
All you have to do to put widgets in your sidebar is to drag and drop them in the order you want them to appear.
Puting widgets in your sidebar
- Go to Design > Widgets.
- From ‘Available Widgets’, clickchoose the widgets you want to appear in your sidebar by clicking ‘Add’.
- At least place a Categories, Pages and Text widget to your sidebar. If you have written pages, then you must include the Pages widget. Your widgets will appear in the ‘Current widgets’ area.
- Include the ‘Meta‘ widget because it allows you to access your site admin easily through the log in link included in the widget.
- You can arrange your widgets in any order by dragging and dropping them wherever you want.
- Don’t forget to save your changes.
Customising your widgets
Once you have widgets in your sidebar, you can start to explore their features and set up each widget as you please.
- Click on ‘Edit’ in the right of the widget to see the options for the widget.
- Edit the properties of each widget as you want. For example, you might want to change the title of your Pages widget from ‘Info’ to something else.
- When you have finished editing a widget, click ‘Change’ to save the changes to your widget.
- Click ‘Save changes’ to save all your changes to all your widgets.
Using text widgets to put images in the sidebar
Text widgets allow you to write stuff and put it in your sidebar — that much is obvious. But you can also use the text widget to customise your sidebar even further by putting in some code that will display pictures and such like. For example, if you look at the PressGo sidebar, you’ll see these icons, which take people to bookmarking sites:
I made them by writing some simple code and inserting the code into a text widget. Here is the code I wrote (each section of code represents one of the images above):
<a href=”http://del.icio.us/post”> <img src=”http://www.meganpoore.com/images/DeliciousLogoSmall.gif” alt=”DeliciousButton” /> </a>
<a href=”http://www.digg.com/login”> <img src=”http://www.meganpoore.com/images/DiggButtonSmall.jpg” alt=”DiggButton” /> </a>
<a href=”http://technorati.com/faves”> <img src=”http://www.meganpoore.com/images/technoratibutton.jpg” alt=”technoratibutton” /> </a>
Here’s what the code means. Let’s take the code for the first image which is the del.icio.us button (del.icio.us is a website that allows you to keep track of your bookmarks by tagging them up and then putting them on the Web instead of on your computer). Now, let’s break it down.
- The code for making a hyperlink is made up of two ‘tags’: <a href=””> and </a> .
- The first bit, <a href=””>, means <make a hyperlink to “http://www.example.com”> .
- The second bit, </a> means </end the link here> .
- That’s what’s ‘behind the scenes’. But it’s no good just to put up a link that says <a href=”http://del.icio.us/post”> </a> because it doesn’t include information for the viewer about where the link takes us. So, between the two tags, that is, between the >< bit, you have to give your audience a place to go to. If my code was <a href=”http://del.icio.us/post”>Post to del.icio.us</a>, then my readers, when they clicked on the link when it displays in the sidebar, would see Post to del.icio.us because Post to del.icio.us is what appears in between the >< tags.
- However, my readers don’t see the text and link Post to del.icio.us. Instead, they see the del.icio.us icon: . That’s because instead of putting the text Post to del.icio.us between the >< tags, I’ve put a picture (the del.icio.us icon) between the >< tags. I’ve done this by putting in another bit of code that says, ‘put in an image here’.
- The tag that says ‘put in an image here is <img src=”” alt=”” /> and it means <image source=”http://www.example.com/exampleimage.jpg” alternative name=”exampleimage” />. You’ll notice that the tag ends with />. The / indicates that the tag ends here (just as </a> means </end the link here>).
- So, the whole thing makes a hyperlink, but it makes a link to two things: firstly, to the del.icio.us post page and, secondly, to the del.icio.us icon.
Putting images in your sidebar using a text widget
- Put a text widget in your Current Widgets area.
- Open the widget’s options by clicking on ‘Edit’ in the right hand side of the widget.
- Put in a title in the first box, if you want.
- Put your code into the text box. You can cut and paste my code from above if you want.
- Close out of the widget by clicking on ‘Change’.
- Don’t forget to save your changes to all your widgets by clicking ‘Save changes’.
- Now view your site to see if it’s worked.
Links and resources