How to Install and Use the WordPress Text Widget

By Lisa Sabin-Wilson from WordPress For Dummies, 5th Edition

The Text widget in WordPress.com is a little different from the rest of the widgets on the Widgets page. Add the Text widget just as you would any other. After you have it settled in the sidebar, click the arrow to the right of the widget title. A text box drops down to let you type text or HTML code to insert a hyperlink or include an image file.

You have no real options to configure for the Text widget, but you can use this simple text box for several things. Here are a couple of examples of what you can use a Text widget for:

Type a short paragraph of text, such as a bio.
Insert the HTML code to display an image in your sidebar.

The Text widget accepts basic HTML that you can use to do things like insert an image, a hyperlink, or a list of items. You may need to brush up on some HTML markup to make that happen, but the next section gives you some basic methods to get you started.

Insert images in the Text widget

You may want to insert an image in your Text widget. The HTML markup to insert an image looks like this:

<img src="/path/to/image-file.jpg" alt="Image File Name" />

<img src=: This is the HTML markup that tells the browser that the website is looking for an image file.
*"/path/to/image-file.jpg": This is the actual directory path where the web browser can find the physical image file. For example, if you upload an image to your web server in the /wp-content/uploads directory, the physical path for that image file would be /wp-content/uploads/image-file.jpg.

The easiest way to include an image is to use the media uploader to upload your image, then copy the file URL and paste it as the path in this HTML markup code.
alt="Image File Name": The alt tag is part of the HTML markup and provides a description for the image that search engines pick up and recognize as keywords. The alt tag description also displays as text on browsers that can’t, for some reason, load the image file. For example, if the server load time is slow, the text description loads first to at least provide visitors with a description of what the image is.
/>: This HTML markup tag closes the initial <img src= tag, telling the web browser when the call to the image file is complete.

Insert hyperlinks in the Text widget

At times, you may want to insert a link (commonly referred to as a hyperlink) within the Text widget. A hyperlink is a line of text that’s anchored to a web address (URL) so that when visitors on your website click the text, it takes them to another website, or page, in their browser window. The HTML markup to insert a hyperlink looks like this:

<a href="http://wiley.com">Wiley Publishing</a>

<a href=: This is the HTML markup that tells the browser that the text within this tag should be hyperlinked to the web address provided in the next bullet point.
"http://wiley.com": This is the URL that you want the text to be anchored to. The URL needs to be surrounded by quotes, which defines it as the intended anchor, or address.
">: This markup closes the previously opened <a href= HTML tag.
Wiley Publishing: In this example, this is the text that is linked, or anchored, by the URL. This clickable text displays on your website.
</a>: This HTML markup tag tells the web browser that the hyperlink is closed. Anything that exists between <a href=“..”> and </a> is hyperlinked, or clickable, through to the intended anchor, or web address.

Insert lists in the Text widget

You may need to provide a clean-looking format for lists of information that you publish on your website. With HTML markup, you can easily provide lists that are formatted depending on your needs.

Ordered lists are numbered sequentially.

Ordered lists are easy to do in a program like Microsoft Word, or even in the WordPress post editor because you can use the What You See Is What You Get (WYSIWYG) editor to format the list for you. However, if you want to code an ordered list using HTML in a Text widget, it’s a little different.

<ol>
<li>Do the first thing.</li>
<li>Do second thing.</li>
<li>Do third thing.</li>
<li>Wrap up.</li>
</ol>

The beginning <ol> tells a web browser to display this list as an ordered list, meaning that it’s ordered with numbers starting with the number 1. The entire list ends with the </ol> HTML tag, which tells the web browser that the ordered list is now complete.

Between the <ol> and </ol> are list items designated as such by the HTML markup <li>. Each list item starts with <li> and ends with </li>, which tells the web browser to display the line of text as one list item.

Unordered lists are very similar to ordered lists, except instead of using numbers, they use bullet points to display the list.

The HTML markup for an unordered list is just like the unordered list, except instead of using the <ol> tag, use the <ul> tag (ul stands for unordered list).

Both the ordered and unordered lists use the list item tags <li> and </li>. The only difference between the two lists is in the first opening and last closing tags. Ordered lists use <ol> and </ol>, whereas unordered lists use <ul> and </ul>.