There are many Widgets that come with WordPress, and many more you can add with Widget WordPress Plugins. The Text Widget is not a WordPress Plugin, it comes with the basic installation of WordPress and WordPress.com. The Text Widget helps you add content that goes beyond these, helping you add simple or complicated things to your sidebar or any widgetized area of your blog.
Many don’t know what to do with it, are afraid or uncertain how to use it, and fearful of HTML, so let’s make this simple and easy and help you explore all the things you can do with the WordPress Text Widget.
What Can I Do with the WordPress Text Widget
There are so many things you can do with the WordPress Text Widget. Here is just a sample.
|Table of Contents
- Article promotions
- Children’s drawings
- Comment Policies
- Copyright Policy
- Disclosure Notice
- Email and contact information
- Favorite Posts
- Image links
- Images and photographs
- Link Lists
- Maps and directions
- Social Media Links
The Text Widget is designed to hold text and HTML code. The most basic HTML code is used, so go forward with confidence that you can add almost anything you wish to the WordPress Text Widget as long as you are patient, careful, and follow the simple instructions.
Let’s look at some of the basic things you can do with a Text Widget. From there, it’s up to your imagination.
How Do I Add a WordPress Text Widget
The WordPress Text Widget is one of the widget options that comes in the basic installation of WordPress and WordPress.com, no Plugin required. It adds an HTML container to your WordPress Theme’s sidebar. If the WordPress Theme has been totally widgetized, you can add the Text Widget to the header, footer, or other areas within the Theme.
- Go to Themes > Widgets in the WordPress Administration Panels.
- Open the sidebar you wish to add the Text Widget to.
- Find the Text Widget in the list of Widgets.
- Click and drag it to the spot you wish it to appear within the sidebar or other container on your Theme.
To Open and Edit the Text Widget, click the down arrow to the right of the Text Widget title.
- Set the Text Widget Title.
- Add the text or HTML to the box or edit it.
- Optionally, choose to Automatically add paragraphs to wrap each block of text in an HTML paragraph code (recommended unless manually coding everything).
- Click Save to save the Text Widget.
- Click the “close” link to close the Text Widget.
To see the changes instantly, open your site in a new tab in your browser and look. Go back and make changes if necessary, then reload the tab with the site view to see the changes.
WordPress Text Widget Code Examples
The WordPress Text Widget has long been a favorite of mine, helping me to break through Theme restrictions to add customized bits of information and images.
Here are some simple examples you can use to add some flair to your own WordPress blog.
Text in the Text Widget
Adding text to the Text Widget is the simplest thing you can do. You can tell the world what your blog is about, include a photograph of yourself or your brand/logo, direct readers to specific areas of interest on your blog, make announcements…the list is really endless.
A Text Widget consists of the title of the Widget and the text box holding the words or code you add. Fill in both with text, making two line breaks (ENTER keystrokes) between paragraphs, choose “Automatically add paragraphs” and save. View the results by reloading your site’s page in a separate tab.
I could have titled it “Welcome” or “What You Need to Know” and put the text in the text box, but it didn’t look right. Depending upon your WordPress Theme options and your ability to control the look of the Text Widget, you can use either one. Later in the article I’ll show you how to change the CSS styles for the Text Widget box.
Adding an introduction and description near the top of your sidebar is a great way of welcoming visitors to your blog by helping them understand
Adding Links to the Text Widget
Links in the WordPress Text Widget can be a list or within a sentence. Use properly coded HTML anchor tags to create the links.
To put links within a sentence, add them as you would within a blog post. You can use the WordPress Post panel to create the sentence or paragraphs with the links and copy the HTML and paste it into your Text Widget.
To manually create a link in a sentence, use the following example which was titled “Blogging Tips,” editing appropriately.
Use Google Alerts to set up keyword search terms and have Google search for trends, article ideas, and topics within their database and news indexes, bringing the latest results to your email inbox.
To create a list of links, which could be a list of blogs you recommend, links to specific articles, categories, or tags on your blog, use the HTML Lists code. You can do this in the Post HTML editor or manually.
[TIP: Do not use 'target="_blank" to open the link in a new page. To do so without warning is a violation of web standards.]
This is an example of my manually created Most Popular Posts list before WordPress.com added the feature to do it automatically.
<ul> <li><a href="http://lorelle.wordpress.com/2007/09/30/customizing-your-wordpress-theme-footer/" title="Customizing Your WordPress Theme Footer">Customizing Your WordPress Theme Footer</a></li> <li><a href="http://lorelle.wordpress.com/2006/04/10/what-do-you-do-when-someone-steals-your-content/" title="What Do You Do When Someone Steals Your Content">What Do You Do When Someone Steals Your Content</a></li> <li><a href="http://lorelle.wordpress.com/2007/02/11/how-to-install-configure-and-use-wordpress-plugins/" title="How to Install, Configure, and Use WordPress Plugins">How to Install, Configure, and Use WordPress Plugins</a></li> <li><a href="http://lorelle.wordpress.com/2006/03/16/adding-rss-feeds-to-wordpress/" title="Adding RSS Feeds to WordPress">Adding RSS Feeds to WordPress</a></li> <li><a href="http://lorelle.wordpress.com/2007/02/07/wordpress-plugins-for-images-photographs-and-graphics/" title="WordPress Plugins for Images, Photographs, and Graphics">WordPress Plugins for Images, Photographs, and Graphics</a></li> <li><a href="http://lorelle.wordpress.com/2007/02/28/random-wordpress-plugins-rotating-banners-header-art-images-quotes-and-content-on-your-blog/" title="Random WordPress Plugins: Rotating Banners, Header Art, Images, Quotes, and Content on Your Blog">Random WordPress Plugins: Rotating Banners, Header Art, Images, Quotes, and Content on Your Blog</a></li> <li><a href="http://lorelle.wordpress.com/2007/02/17/video-music-podcasts-audio-and-multimedia-wordpress-plugins/" title="Video, Music, Podcasts, Audio, and Multimedia WordPress Plugins">Video, Music, Podcasts, Audio, and Multimedia WordPress Plugins</a></li> </ul>
You can add text to introduce your list of links, and even add images to the list of links. We’ll cover that in the next section.
If you wish to add contact information such as your social media sites, email, and other contact information via the Text Widget, you can do so.
Get the social media links to your Facebook, Twitter, Google+, and other social media sites. Put them in a text link or wrapped around an image, as described below.
To add your email address, instead of
mailto and add your email address disguised or obfuscated for your own protection and security. See Protection From Harvesters on the WordPress Codex and my article on protecting your email for more details and specifics.
Adding Images to the Text Widget
You can add any graphic or photographic image to the WordPress Text Widget. The image width must not exceed the width of the sidebar minus some padding (if your sidebar is 200 pixels wide, set the image to be 180 pixels width to start). Keep image file sizes small to speed up page loading.
To add an image to a Text Widget:
- Upload the image first to the WordPress Media Library.
- Click the File URL button to put the image file location in the form above it (see screenshot below).
- Copy the link that appears in the form for Link URL.
- Click Save Changes.
- Exit the Media Library.
- Go to Appearance > Widgets.
- Add or edit the Text Widget in which you wish the image to appear.
- Enter the following, pasting in the image location or URL and editing the HTML accordingly, and save.
<img src="[Image Link URL]" alt="[description - what is this]" />
Here is a full example:
<img src="http://lorelle.files.wordpress.com/2008/03/blogging-tips.png" width="120" alt="Articles about blogging tips" />
Save and preview the results.
Here are some tips for fine tuning the image in the Text Widget.
- If the image is too wide, either upload a smaller image, or reduce the width by setting the width in the image smaller and removing the height, similar to the example above.
- If you wish to float the image to the left or right so text will wrap around it, add
class="alignright"to the HTML anchor tag’s code. Ensure the image will not crowd the text in the sidebar by making it small enough to fit.
- To center the image in the sidebar’s text widget, add
class="aligncenter"to the code.
- To make a row of images, remove the align classes and put a space between each image.
- To make a column of images, use the center alignment (option) and put each image on its own line with one to two spaces between them.
Adding Links to Images in the Text Widget
In my sidebar, I have a variety of images wrapped in links. Clicking them will take you to another page on my site. These are excellent ways of promoting specific pages, articles, article series, books, products, categories, tags, and other content on your site.
If you choose to link the image to an off-site location, make sure the image clearly indicates the visitor will be leaving the site.
<a href="http://lorelle.wordpress.com/books/blogging-tips/" title="Blogging Tips Book By Lorelle VanFossen"><img src="http://lorelle.files.wordpress.com/2007/05/bloggingtipsbook.jpg" alt="Blogging Tips - book cover, copyright Lorelle VanFossen"></a>
Save and reload your test page and click the link. If it doesn’t work, check the code carefully to ensure that all the < and > and quote marks are in the right place.
To make a row of linked images such as I did with my social media links, use the tips above under creating images in the text widget to align them in a row or column or otherwise.
This is what I used to create the list of article series badges/icons in the sidebar. The images are wrapped in links to the article series or category and set two images per line with a space between the link and image codes. No alignment styles are added. This creates a simple column of images to create a directory listing of popular article series I’ve written, promoting them.
Adding Images to a Link List
Sometimes you might want to add an image to a link list, before or after each text link in the list. Some like to add symbols or icons to represent the content found on the link’s destination.
To add images to a link list, place the image within the link anchor tag just before the anchor text. Depending upon the image, you might want to add a space between the image and anchor link tags.
Make sure the image is sized to not distort the lines or words. As the images are not key to the entire navigation of the site as they are accompanied by text, there is no need to add the ALT information, just leave it blank.
<ul> <li><a href="http://lorelle.wordpress.com/about/" title="About"><img src="http://lorelle.files.wordpress.com/2008/03/about.png" width="120" alt=" " /> About</a></li> <li><a href="http://lorelle.wordpress.com/books/" title="Books"><img src="http://lorelle.files.wordpress.com/2008/03/books.png" width="120" alt=" " /> Books</a></li> <li><a href="http://lorelle.wordpress.com/contact/" title="Contact"><img src="http://lorelle.files.wordpress.com/2008/03/contact.png" width="120" alt=" " /> Contact</a></li> <li"><a href="http://lorelle.wordpress.com/site-map/" title="site Map"><img src="http://lorelle.files.wordpress.com/2008/03/site-map.png" width="120" alt=" " /> Site Map</a></li> <li><a href="http://lorelle.wordpress.com/subscribe/" title="subscribe"><img src="http://lorelle.files.wordpress.com/2008/03/subscribe.png" width="120" alt=" " /> Subscribe</a></li> </ul>
Adding Video to a Text Widget
You can add video in a variety of ways to a WordPress Text Widget. The video can come from any source such as YouTube, Vimeo, Viddler, WordPress.tv, or DailyMotion. Do remember that you cannot add unapproved video embed codes to WordPress.com blogs. See WordPress.com Videos Support for the specific list and shortcode examples.
The most simple method is to add it to a post and copy the HTML and paste it into the Text Widget.
Like images, take care that the video does not force itself to be too wide. Some shortcodes will allow control of the width and most embed codes will also allow control of the width. If you change the width, either remove the height or set it properly to maintain perspective.
You can also use the embed code from any video service. This is an example from WordPress.tv, using WordPress shortcodes.
This is a sample from WordPress.tv, Viddler, and Vimeo on this WordPress.com blog.
[wpvideo IlQ8Xujq] [viddler id=76616e19&amp;w=190] [viddler id=ba1ed7b4&amp;w=190] http://vimeo.com/7835100 [wpvideo pbVUmXjA]
For full version WordPress blogs, you can simply use the video’s embed code, such as this example.
Adding Maps to a Text Widget
Here is the Text Widget code for a text link with directions from the San Francisco Airport to the offices of Automattic and WordPress which will work in a sentence and with WordPress.com blogs.
<a href="http://g.co/maps/h8se" title="Map with directions from the San Francisco Airport to the offices of Automattic and WordPress">Driving Directions to Automattic Offices</a>
To include the actual map helps the visitor even more. They can zoom in and out of the map and move it around. It can be a map showing a location or featuring the directions from a nearby landmark by car, public transportation, walking, etc.
To use the Google Maps embed code in full versions of WordPress, you would use an example like this:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=d&amp;source=s_d&amp;saddr=San+Francisco,+California+(San+Francisco+International+Airport)&amp;daddr=3+Pier,+San+Francisco,+CA+94111+(GigaOM)&amp;hl=en&amp;geocode=Fdj9PQIdAZW0-CGPprokJLPSNw%3BFbi-QAId-GO0-CkB_2BLZ4CFgDFQ8lZCVq-Eqw&amp;sll=37.707336,-122.393851&amp;sspn=0.225986,0.506744&amp;vpsrc=0&amp;mra=pd&amp;ie=UTF8&amp;ll=37.707455,-122.393875&amp;spn=0.18297,0.02288&amp;t=h&amp;output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=d&amp;source=embed&amp;saddr=San+Francisco,+California+(San+Francisco+International+Airport)&amp;daddr=3+Pier,+San+Francisco,+CA+94111+(GigaOM)&amp;hl=en&amp;geocode=Fdj9PQIdAZW0-CGPprokJLPSNw%3BFbi-QAId-GO0-CkB_2BLZ4CFgDFQ8lZCVq-Eqw&amp;sll=37.707336,-122.393851&amp;sspn=0.225986,0.506744&amp;vpsrc=0&amp;mra=pd&amp;ie=UTF8&amp;ll=37.707455,-122.393875&amp;spn=0.18297,0.02288&amp;t=h" style="color:#0000FF;text-align:left">View Larger Map</a></small>
Ads, Affiliates, Events, Subscriptions, and More
For those using the full version of WordPress, you can use the above tips and techniques for adding affiliate links, advertising, promotions, subscriptions, forms, events, and many other things to the WordPress Text Widget.
If you have a book to promote and sell, or a specific project you wish to highlight or feature, you can include it in a Text Widget with a link around it to its destination.
Working with a newsletter WordPress Plugin or service. Get the embed code for their subscription and add it to the Text Widget.
To highlight an event, you can write a text announcement about the event with a link to it or use a badge or graphic wrapped in a link as described above. I do this often in my sidebar to highlight conferences I’m speaking at or participating in.
If you travel and attend many conferences and events, you can keep a schedule in a Text Widget and update it when an event passes or new one lands on the schedule. You can group it chronologically or by month or year depending upon the number of events. Put them in lists with links to the event information or a page on your WordPress blog announcing the event.
Here’s an example using an Amazon affiliate link with the book image saved on my site, which can speed up page loading:
<a href="http://www.amazon.com/gp/product/0470877014/ref=as_li_ss_il?ie=UTF8&amp;tag=amazoncode-123&amp;linkCode=as2&amp;camp=217145&amp;creative=399369&amp;creativeASIN=0470877014"><img border="0" src="http://lorelle.files.wordpress.com/2008/03/all-in-one-wordpress-dummies.jpg"></a><img src="http://www.assoc-amazon.com/e/ir?t=&amp;l=as2&amp;o=1&amp;a=0470877014&amp;camp=217145&amp;creative=399369" width="1" height="1" border="0" alt="" style="border:none!important;margin:0!important;" />
Styling the Text Widget
Full versions of WordPress and those using the CSS Extra option for styling WordPress.com blogs can style Text Widgets in a variety of ways. You may never want to make any changes, but with a little CSS experience, you have the option to customize the look and feel of each Text Widget.
Most WordPress Themes present Widgets in an unordered list format. The following code is a simplified example.
<div id="primary" class="sidebar"> <ul> <li id="text-1" class="widget widget_text"><h3 class="widgettitle">Widget Title for First Text Widget</h3> <div class="textwidget">Text within the text widget area.</div> </li> <li id="text-2" class="widget widget_text"><h3 class="widgettitle">Widget Title for Second Text Widget</h3> <div class="textwidget"><p>Text for second widget text area.</p></div> </li> </ul> </div>
The CSS styles include:
widget:The class for the widget item within the list.
widget_text:Another class for the widget item within the list.
h3.widgettitle:The heading HTML tag within the widget area to hold the Widget title.
textwidget:The class for the text area of the Text Widget
li.widget, li.widget_text, li.textwidget:Styles directly associated with the list item.
ul.sidebar ul:The HTML child container for lists within the Widget lists, if chosen to be styled differently.
li.sidebar li:The list item for a child list within the Widget lists.
p.widget, p.textwidget:The paragraph HTML tag within the widget areas to style text.
p.widget a, p.textwidget a:The HTML anchor tag to style links within the widget and text widget areas.
Each sidebar or widgetized section is set in a parent style such as
#primary, #secondary, #footer, etc., as well as the class for
footer, etc. To permit further styling control, each text box automatically generates its own ID such as
text-1, text-2, etc., going down the sidebar list. Check your WordPress Theme source code and stylesheet for specifics as they may be different.
You may also be able to add styles within the Text Widget itself.
What Will You Do With Your WordPress Text Widget
There are so many things you can do with a WordPress Text Widget. Use your imagination. Put pictures of your kids or their crayon drawings in the sidebar. Post your manifesto. List your to do list or new year’s goals. Just saw a movie you can’t get out of your mind, put the trailer video in a Text Widget. Got a favorite song? Why not add a link to the MP3 for everyone to listen.
I can’t possibly cover all the many ways you can use the Text Widget, so share yours. What fun things have you done with the Text Widget on your WordPress blog.