7. Sidebar widgets

map-48x48.png

Meg’s PressGO! objectives

  1. To add at least a pages widget, a text widget and a categories widget to your sidebar.
  2. To customise those widgets.
  3. To put images into your sidebar using text widgets.

map-48x48.png

Your PressGO! objectives

What are you hoping to learn from this module? Your objectives can be the same as mine, but is there anything else you are expecting to learn? Write down your thoughts, discuss with a partner or small group in the class, or blog it!

Blog it here.

cal-blank-48x48.png

Introduction

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 module will help you set up a basic arrangement for your sidebar using widgets.

photo-48x48.png

Focus questions: What is a widget?

Have you heard the term ‘widget’ before? In what context? Do you have any idea what widgets on websites do? Write down your thoughts, discuss with a partner or small group in the class, or blog it!

Blog it here.

notes-48x48.png

Using widgets to customise your sidebar

Not all WordPress themes come with widgets enabled (for example, the ‘Ambiru’ theme does not support widgets) so make sure you are using a theme that will allow you to use widgets (the default ‘Kubrick’ theme has widgets enabled). 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.

tools-48x48.png

Exercise: Put widgets in your sidebar

  1. Go to Design > Widgets.
  2. From ‘Available Widgets’, clickchoose the widgets you want to appear in your sidebar by clicking ‘Add’.
  3. 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.
  4. Include the ‘Meta‘ widget because it allows you to access your site admin easily through the log in link included in the widget.
  5. You can arrange your widgets in any order by dragging and dropping them wherever you want.
  6. Don’t forget to save your changes.

tools-48x48.png

Exercise: Customise your widgets

Once you have widgets in your sidebar, you can start to explore their features and set up each widget as you please.

  1. Click on ‘Edit’ in the right of the widget to see the options for the widget.
  2. 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.
  3. When you have finished editing a widget, click ‘Change’ to save the changes to your widget.
  4. Click ‘Save changes’ to save all your changes to all your widgets.

notes-48x48.png

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:

DeliciousButton DiggButton technoratibutton

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”&gt; <img src=”http://www.meganpoore.com/images/DeliciousLogoSmall.gif&#8221; alt=”DeliciousButton” /> </a>

<a href=”http://www.digg.com/login”&gt; <img src=”http://www.meganpoore.com/images/DiggButtonSmall.jpg&#8221; alt=”DiggButton” /> </a>

<a href=”http://technorati.com/faves”&gt; <img src=”http://www.meganpoore.com/images/technoratibutton.jpg&#8221; 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.

  1. The code for making a hyperlink is made up of two ‘tags’: <a href=””> and </a> .
  2. The first bit, <a href=””>, means <make a hyperlink to “http://www.example.com”&gt; .
  3. The second bit, </a> means </end the link here> .
  4. 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”&gt; </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.
  5. However, my readers don’t see the text and link Post to del.icio.us. Instead, they see the del.icio.us icon: DeliciousButton. 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’.
  6. The tag that says ‘put in an image here is <img src=”” alt=”” /> and it means <image source=”http://www.example.com/exampleimage.jpg&#8221; 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>).
  7. 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.

There are many excellent websites that will help you learn the basics of html and that will give you html examples that you can past into your own pages.

tools-48x48.png

Exercise: Put images in your sidebar using a text widget

  1. Put a text widget in your Current Widgets area.
  2. Open the widget’s options by clicking on ‘Edit’ in the right hand side of the widget.
  3. Put in a title in the first box, if you want.
  4. Put your code into the text box. You can cut and paste my code from above if you want.
  5. Close out of the widget by clicking on ‘Change’.
  6. Don’t forget to save your changes to all your widgets by clicking ‘Save changes’.
  7. Now view your site to see if it’s worked.

weather-48x48.png

Reflection

Write down your thoughts, discuss with a partner or small group in the class, or blog it!

  • What have I learnt?
  • What is still unclear?
  • What do I need to follow up on?
  • Where to from here?
  • What other stuff I have read or accessed to help me make sense of it all?

Blog it here.
browser-48x48.png

Links and resources

HTML examples website

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: