Configure Your Widgets To Setup Your Site
If you want to add images and text, such as links and banners, to your sidebars in Wordpress you need to use Widgets.
They are key to setting up and configuring your Wordpress site to be structured in the way you need and to show the information you want.
They are also essential for adding monetization to your website or blog in that they help you easily display affiliate links and banners as well as other relevant text and images.
Widgets as very easy to use and are essential fo every Wordpress site owner.
Widgets are accessed via the Appearance section of your Wordpress 2.7 (and up) admin dashboard underneath Themes.
After installing and activating your theme you should checkout the widgets available to you and configure them to suit the needs of your site.
Just click on Widgets to get to the page which will allow you to control all the widgets and sidebars on your site or blog.
Default Widget Layout And How To Change It
When first installed Wordpress will display a default set and order of widgets. This may appear strange at first because when you look at the Widgets page in your admin dashboard it will indicate that their are no Widgets installed, but in fact there are. If you look at any Wordpress site after the initial install of the software you will see a page similar to the following:
You can see from this Wordpress website home page that by deafult the Pages, Archives, Categories, Blogroll and Meta widgets are displayed.
However as soon as you add just one more widget via the admin dashboard they will all dissappear and the widget you added will be displayed instead. This happens on a sidebar by sidebar basis.
How To Add Widgets To A Sidebar
Look down the l eff-hand side of the widgets page to see the widgets you can add to sidebars on you site. The current sidebar to which you will be adding widgets is determined by the sidebar selected in the drop down list on the right of the widgets page, as in the image below:
To add a particular widget just click on the ADD link next to the widget.
Note: If there is no Add link then you have already used a widget which can only be used once. Other widgets like the Text widget can be used many times over.
When you click the ADD link the widget selected will be added and displayed in the bottom position for the sidebar selected from the drop down list on the right of the widgets page.
In the example below 5 widgets have been added in this order: Recent Posts, Pages, Categories, Tag Cloud, Calendar and Text…
To change the order of the widgets just drag and drop the widget you want to move up or down to the position in the order that you want it to appear in the sidebar.
In the above, the Text widget has been dragged to the top of the list so that it will appear at the top of the sidebar on your site. Yes, it’s that easy!
Just click on SAVE CHANGES below the list to apply the new widgets you have selected to your site. The home page will then look like this…
How To Edit A Text Widget In A Sidebar
Text widgets are the best way to display text, images banners and other links like affiliate links in your Wordpress sidebars. They accept HTML code and so you need to know enough about this to set them up.
If you are just adding affiliate links these will be provided to you by your merchant or affiliate network so all you will need to do in this case is add the code the provide to the widget.
To edit a Text Widget just find it in the list of existing Widgets for the sidebar as listed on the right-hand side of the widgets page and then click on the EDIT link on that widget. The following edit box for that widget will then be shown as seen below.
Remember if you select a different sidebar from the drop-down list you always need to click SHOW to list the widgets for that sidebar.
In this example 3 pieces of HTML code (surrounded by “<p>…</p>” tags to center the items) have been added as follows:
[1] Wordpress logo image with a hyperlink to this website
[2] The text “Wordpress Logo”
[3] Text link “FREE WORDPRESS TRAINING” linking to this site
All 3 bits of code are setup to center the text or image in the widget and a heading for the widget has also been added: Text Widget & Image
Click on DONE in the edit box and then the SUBMIT CHANGES button to apply the edit to the sidebar.
The image above is the resulting sidebar as displayed on the Wordpress home page at the site.
See – it really is easy!
- 
Hi -
Thanks for the instructions – but it is easy if you can do it.
How does a relative newbie like me, using an e-book image I have made add that to a sidebar, using html ? *Gulp!*
1 – Can I have the image on my own computer or does it have to be on a webpage so I can do this?
2 – What is the recommended size for e-book images in a sidebar? I assume they can be too big?
3 – Is sidebar 1 the “inside” sidebar or is it sidebar2?
Really good site you have here ….. THANKS!
Some answers…
1. You can use an image that is on your own computer or already on your website – it’s up to you…
1a. If the image you want to use is on your own computer then you will need to upload it to your website. You can do this using F T P. Suggest you create a folder at the top level of your site called images and reference the image from there in your html code in the text widget. (eg: http: // yourdomain.com/images/imagename.jpg <- ignore the spaces!)
1b. Alternatively you can upload images from your own computer to your Media Library within your site’s Wordpress admin dashboard. Look for the Media option in the menu to the left of the dashboard. Click on Media and then Add New. Then click on the Select Files to browse your computers folders. Select the image you want and click Open to upload it. Then Save Changes to add it to your Wordpress media library. You can then reference the image in your text widget html code as in this example: http: // yourdomain.com/wp-content/uploads/2009/06/imagename.jpg and note that you need to use the current year and month in the url)
2. No recommended size for images, BUT as you say they can be too big. Any image you put in a sidebar needs to be no greater than the width of the sidebar. Height does not matter as the sidebar will expand vertically to accommodate the image. Getting the width right is somewhat trial and error and experience helps as you will soon get to know what fits and what doesn’t. The images in the side bar on this site are a max of 250 pixels to give you an idea.
3. The number and names of sidebars in Wordpress is determined by the themes so you will need to read the theme documentation to work out which is which or just add some widgets and use trial and error to see what happens – it should be easy to work out.
Hope this helps!
ps Post on using images in Wordpress on it’s way very soon…
From a 66 year old newbie who has been struggling up the steep learning curve for a couple of months, thank you and thank you again. I couldn’t work out which took precedence the theme or Wordpress; now I understand. I have left this as a general comment on your generous and very useful help. You have certainly decreased the gradient of the learning curve for me – I might even manage to get my site up this week.
THANK YOU, this is a great guide and it’s been so helpful.
Thank you for the wordpress code.
Carlos