WordPress in an Hour or Less: The Get It Done Guide to Installing and Using WordPress (9 page)

If you take a closer look at the Widgets screen (from the Dashboard, choose
Appearance > Widgets
if you haven't done so already), you will see the widgets included with the default installation of WordPress.  As the following illustration shows, there are widgets for providing user navigation, for adding lists of your site's pages or most recent posts, for adding a calendar that shows your site's posts, for adding a search box enabling viewers to search your site, for adding a box to contain text, and more.

From the Widgets screen, widgets are
drag-and-drop
, so to add desired functionality to a particular sidebar or footer in your theme, you simply click and drag the desired widget from the Available Widgets area of the Widgets screen into the particular sidebar (or footer) and place it where desired.  You can also move an existing widget currently within a sidebar up or down to rearrange them in the order that they will appear on the viewer's screen.  And you can drag any existing widgets from a sidebar back into the Available Widgets area of the Widgets screen if you don't want to see them on the sidebar.

As an example, drag the Recent Comments, Archives, and Posts widgets off the sidebar for the Twenty Eleven theme,
and then drag both the Search widget and the Calendar widget from the Available Widgets area onto the sidebar.  (The sidebar will display a box asking for a title of the Calendar, once it is in the sidebar; enter 'My Blog Dates' and click Save).  Click your site's name in the toolbar, and you will see that the sidebar has changed in appearance to reflect the removal of the Comments, Archives, and Posts widgets and the addition of the Calendar and Search widgets (see illustration).

Another extremely useful widget is the text widget, which lets you place a desired text message inside a sidebar.  Drag the text widget into a sidebar, and a text box opens, with space for a title and for the desired text, as shown
in the following illustration.

Add your desired text, and click Save.  When you view the site in a browser, you will see the text, as shown in the following example:

You can do a lot more than just display plain old text if you're willing to get your hands a little dirty with HTML code.  You can use HTML code in a text widget, assuming you have a working knowledge of HTML.  When WordPress sees the HTML code, it automatically interprets and processes the code.  (It will also process JavaScript, if you happen to be familiar with that programming language.)

If you have no prior knowledge of HTML coding, you may find a short introduction to a few commonly-used HTML tags to be useful when adding text within a text widget.  For example, HTML coding for making text display in a very small or a bolded font involves a beginning and an ending tag, surrounded by angle brackets.  Hence, you can make your text very small or bolded by enclosing the text inside of the starting and ending tags shown below.

This test is very small.

and this will be bolded

One trick used by web designers that requires a bit of HTML code is the trick of adding an image, such as a photograph or a company logo to a sidebar.  All you will need is the following HTML code:

and between the two quotation marks, you enter the full path and filename where the image is stored. If you upload the photo or graphic to your WordPress Media library, WordPress will not only store your image on your web server, it can also provide you with the full directory path to the image.  Here's how you do this:

1.  From the Dashboard, choose
Media > Add New
.  The Upload New Media screen appears.

2.  Find the desired image on your hard drive, and drag it to the Upload New Media area of the screen.

3.  Make a note of the file URL shown on the screen.  This path and file name represents the location where your image has been stored in the media library of WordPress under your hosting server account. (You can click and drag through the entire length of the File URL box, right-click the selection, and choose
Edit > Copy
to copy the directory path and filename to your Clipboard.)

4. Click the Save All Changes button below, to save the image to your WordPress Media Library.

5.  Choose
Appearance > Widgets
, and drag the text widget to the desired sidebar location.

6.  In the text box of the widget, add the following HTML code and don't forget the quotation marks surrounding the path of the file you stored in your media library, as noted in step three. (If you copied the path and filename to the clipboard, you can just place your insertion pointer between the two quotation marks, and choose
Edit > Paste
from the menus.)

For example, my particular site's code for a picture displayed using a text widget was as follows:

Yours will differ, depending on your site name and where your file is stored in your media library.

7.  When done, click Update to update the changes to the text box.  When you next display your site, you will see the graphic image in the sidebar, as shown in this illustration:

You can even use the technique described previously to display an image that also serves as a link, to another page of your site or to another website entirely.  You do this by enclosing the HTML code described earlier inside the starting and ending tags for an external link.  You begin the tag with the tag, and end with the tag.  So, your link will follow this format:

Click the image to go to this site!