The Text Widget box is a built-in, reusable widget for WordPress in which you can use HTML and Javascript, as well as plain text. Highly versatile, I use them frequently to place links, create customized announcement boxes, and easily place code for feeding ads from all sorts of services. Like all other widgets, they are easy to use as well; just a simple drag-and-drop on the Widget page of your admin section. Here are three ways you can use can make the most of the Text Widget:
1. Placing Ads
The text widget can be a convenient way to place ads in your sidebars. Simply cut & paste the provided code into a text widgets that you’ve placed into a sidebar. You can add a header or title if desired, but it is not necessary. Just hit “save” and refresh to see the results.
I like to use widgetized spaces for an ad in the header. The space can be sized and positioned via CSS and then the website owner can change their ads code without entering the PHP files.
2. Using a Table
Tables are not a good way to layout an entire website, but they are still effective ways to organize a small section. Since the text widget take HTML you can wet up a simple table like the one below to display small buttons side-by-side.
You can include some inline CSS if desired, but if an element has already been declared in your main CSS file, it will be overwritten.
3. Customize the CSS for a Single Widget
In the previous suggestion, we built a table inside our text widget. Now you may want to customize the CSS further (to remove the borders for example). To do this, you’ll need to create some rules in your CSS file for just this text widget.
First you need to figure out the unique Id of your widget. “View Source” in your browser and find your widget. I like to write something unlikely in the widget like “elephant monkeys” to make it easier to find. Then find the beginning of the widget where the Div is. There will be a Id titled “text-xx” where xx is a number. That’s the unique Id of your widget.
Once you know the Id name, pop open your CSS file and create a new section. The # symbol stands for Id. You can now edit the appearance of just this widget.
When you’re finished making changes, save your file and refresh your website to view your handiwork. Now so long as you don’t delete this widget you can change the contents in the WordPress admin section and still use your specialized code.
If you need help with writing HTML and CSS, check out W3Schools for more information.
