Text widgets can be your best friend in WordPress. They give you the ability to add a unique div class, html, and other script inside of them making the possibilities for their use almost endless. In some previous posts, I’ve described how you can add a special div class to an individual text widget giving it a unique styling. I’ve also told you how to add a button into your text widget. While those posts are helpful for people familiar with the basics of text widgets, I realize that many people are unaware of how to add an image into a text widget, link that image, or style the text within the widget to meet their needs. So, this post is going to get back to the basics.
Basic Text Entry and Styling
The first thing you need to understand is the use of tags. Tags are used to surround the element you want to style, and you must always have an opening tag and a closing tag for the code to read correctly. The opening tag will always begin with a < and end with a > while the closing tag will always begin with a </ and end with a >. For example, if you want to make the text “Now” bold, you would simply put <b>Now</b> or <strong>Now</strong> within the text widget. Below is a list of the most basic html styling code:
<b>text here</b> or <strong>text here</strong>
(Change the number to correspond with the heading you prefer. Remember that 1 is the largest.)
(simply put this at the point you want the text to break to the next line.)
<a href="DesiredLinkURL"> Text to Be Linked</a>
<ul>all bulleted content here</ul>
<li>each individual bullet item here</li>
<ul> <li>First Bullet Point</li> <li>Second Bullet Point</li> </ul>
<ol>all numbered content within here</ol>
<li>indvidual numbered items here</li>
Extra Styling Features
Your text widget will naturally take it’s text font, size, and color from your basic text styling detailed in your style sheet. Sometimes, though, you’d like to highlight text within your text widget a little differently than you have it styled for your general posts. To do this, you just need to add a “span class” to your text. Below are some more examples of what I’m referring to.
Changing the color of your text:
<span style="color: #008000;">Text to be colored</span>
(Change the number to the color hex of your choice.)
Changing the font of your text:
<span style="font-family: 'Georgia';"/>
(change font name as desired, but just make sure that it’s a common web font or one that you’ve installed to your theme so that everyone will be able to view it.)
Changing the size of your text:
<span style="font-size: 12px;"></span>
(change the number as desired.)
Multiple Changes: If you want to use all three of the styles above for some text, simply add each element within the quotation marks of the span style. This is how all of the styles above would look:
<span style="font-family: 'Georgia'; font-size: 12px; color: #008000;">This text would then become green using Georgia 12 pt. font</span>
*Hint: If you are ever unsure of the code, the easiest way to get the correct code is to do a draft post using the Visual editor, then switch to the html view and see the code it puts out to give you the desired effect. 😉
Adding Images to a Text Widget
Adding an image is very easy to do, but you must first have your desired image uploaded to the internet somewhere. It can be stored on your website or in another image location such as Image Shack, Picassa, etc. You’ll need access to the url of where the image is hosted. Once you’ve done that, you just need to add in a tiny bit of code to make it appear!
Adding an image:
<img src="URLtoYourImage" />
Adding a link to your image:
<a href="desiredlinkurl"><img src="URLtoYourImage" /</a>
Implementing These Ideas
- Use your text widget as a Vertical Menu (using some of the styling techniques listed above.)
- Use your text widget to display and link to your social networks
- Use your Text Widgets as cute graphic headers for your other widgets (simply leave your widget titles blank and put the image you created as a title within a text widget directly on top of the widget it goes with.)
Again, if you get a little confused, just look at the html of one of your posts that features an image to get ideas on what you can do. I hope these simple tips help, and please leave your comments if you have any questions or suggestions.
© 2011 – 2012, reflectingthedesigner.com. All rights reserved.