Text Widget Basics

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:

Bold Text:

<b>text here</b> or <strong>text here</strong>

Italicized Text:

<em>text here</em>

Headings:

<h1>text here</h1>

(Change the number to correspond with the heading you prefer. Remember that 1 is the largest.)

New Paragraphs:

<p>text here></p>

Line Breaks:

< br/>

(simply put this at the point you want the text to break to the next line.)

Centering Text:

<center>text here</center>

Creating Links:

<a href="DesiredLinkURL">
Text to Be Linked</a>

Bulleted Lists:

<ul>all bulleted content here</ul>
<li>each individual bullet item here</li>
  • Example:
    <ul>
    <li>First Bullet Point</li>
    <li>Second Bullet Point</li>
    </ul>
    

Numbered Lists:

<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.

August 3rd, 2011 at 3:29 pm

I know this has nothing to do with the post but I was just wondering if there was a way to remove the comment box from a certain page. Like my main page, the first thing visitors see has the comment box and it looks weird. Just wondering if you had any idea how to get rid of it.

August 5th, 2011 at 8:49 am

You just need to uncheck the Discussion box below the editing section of your post. If you don’t see it, go up to “Screen Options” and make sure the discussion box is checked so that it appears as an option to leave on comments or remove them on every page you edit.

Bailee
August 30th, 2011 at 9:22 am

I have struggled with customizing text in widgets and greatly appreciate this “basics” post with the code and explanations. THANK YOU!

March 14th, 2012 at 7:18 pm

What a godsend!

Using your guide, I not only got my fonts to appear as I wanted, but it has been really helpful in reinforcing my HTML acquisition.

Thanks for your good work and help!

In Joy!

March 14th, 2012 at 9:59 pm

Glad to help. :)

sandra
April 11th, 2012 at 11:29 am

Although I am scared of touching any theme css or php files, I am always grateful for posts like this one. Thank You.

On the subject of text widgets, is there anyway to display the title of individual text widgets in the dashboard/appearance/widget page. Currently I have 20 text widgets in this area.

They are all labelled ‘Text’, which means I need to open each one individually to find out what is in it before I can use it. I am working with over 800 pages, all with right side-bars that need to have text widgets in them. Is there a plugin that could help with this.

Thanks so very much in advance
Sandra

April 12th, 2012 at 12:04 am

Good question, Sandra. All you need to do is give the text widget a title when you first create it and save it. Then, after saving it, remove the title and save again. The title will remain in the Dashboard but will not appear on the main site.

May 3rd, 2012 at 10:43 am

I was trying to use the font code for a text widget, but cannot get it to change. Where does the actual text go? After the end and if so do I need something to close out the command?

May 4th, 2012 at 4:50 am

the text that you want to change the color of needs to be “wrapped” inside of the code. So, as mentioned, you have opening tags and closing tags. The opening tag is what gives the style and is enclosed by carrots. The closing tag does just what it says, it closes the commands given so that it only applies to the text within.

May 4th, 2012 at 5:09 am

Look at the examples above to see what you should do. For changing the font, you’d want to use the span class, and yes, the text would need to be enclosed within the opening and closing tags. Change the color to whatever you want using the appropriate hex symbols.

<span style="color: #cccccc">Your Text Here</span>
Amanda
October 7th, 2012 at 8:54 pm

I was hoping this post could have given more insight to an issue I am having, and maybe it does and I’m just not understanding? I use blogger and my problem is that I have century gothic used as my content font. When I view it in firefox or ie, it shows correctly, but when I check it on my ipad, it shows the secondary font of arial. I see other sights that have my same font and it shows on all of those platforms no problem. Do you know the trick to this?
Thanks!

October 9th, 2012 at 9:03 pm

You can use “At Font Face Kits” or something similar to embed fonts into the site. Otherwise, the platform in use will use only the default fonts available which may be different depending upon what device you are using.

November 25th, 2012 at 4:14 pm

I’ve added the Text Widget to my header. To change the color of the text, where do I add the following to my Style.CSS?

Text to be colored

My Style.CSS is below

/* Header widget */
#widget-header {
position:absolute;
right:0;
top:100px;
z-index:1;
}

November 26th, 2012 at 7:36 pm

You would need to add some more just below that looks something like this. You would change the color hex, font family, etc to match your theme.

#widget-header text
color: #000;
font-family: "Georgia";
line height: %150;
padding: 10px;
}

It’s also good to add the same type of section only with

#widget-header p

as well as

#widget-header a

for links and

#widget-header a:hover

for hovered links. You may consider also doing

#widget-header li

for bullets. Look through your current CSS and copy the css used for that if you want it to look the same.

LEAVE A COMMENT

Powered by sweetCaptcha


Anti-Spam Protection by WP-SpamFree

Reflecting the Designer by Reflecting the Designer