Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Lesson 11 – Part 9 – Configure Text Widget

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

This video is part of our old WP eStore Course Go to our Updated WP eStore Course for current videos.

Welcome back to the ninth part of Lesson 11 of the Build Your Own E-Commerce Website tutorial series. In this part of the lesson we are going to format the text widget.

Let’s look at the demonstration site so that it’s clear what we’re trying to accomplish. What we’re going to have is a block of stuff here that will be essentially contact information. The way I prefer to do that with the Text widget, unless you’re really comfortable just writing your own HTML, is to create a sandbox page.

Create a Sandbox Page

Say Add New and call it Sandbox and then under Visibility let’s make it Private. Now nobody is ever going to see this so it doesn’t matter anymore. Come over here to the Visual view, put the cursor inside the text editor and then start off with your first heading.

Add the HTML Structure for the Text Widget

For example, I could call it Sales Information and Software of Book Orders and then I’d put my phone number in. Now we’re going to do this as a list and I’ll just show you why later. This is going to only be a one elements list and so it will be my phone number. It would be easier for us to make all of our styling of this text the same if they’re all in a list so that’s why we’re going to do it that way.

Add the Headings, List Items and Mailto

Then Technical Support. We’ll go ahead and do the list again. Then Email Sales and Support and we’ll do our list again. This one will be for product information, and then For technical support and then Sign Up to Receive our Newsletter and that’s the end of that list. Then finally US Mail Sales & Support and that’s just going to be a contact address so company name, address.  Okay, and so that’s got all of our information in it.

The next thing I want to do is to give these a heading. I’ve selected this and now we select Sales Information and Software of Book Orders and instead of being a paragraph we’re going to make it say a Heading 3 and then a Heading 3 like that. Then for these, what we are going to make these mailto links. Select the for Further product information, we’ll select – it’ll be mailto, colon and then call it support@, and you can do the same thing for the rest of these things, right? Then when somebody presses on this their email client pops up instead.

Add Text Widget

Come and look at it in our HTML view which is the way we’ll work on it now and you can see that it’s all set up. We’ve got our list, our list item, our headings and that kind of stuff. Now we’ll just go ahead and copy all of that, let’s update our page so we don’t lose this. We’ll come over here to Appearance and Widgets and under Sidebar 4 what we will do is we will add our Text widget and paste that information there and hit Save.

Come back here to our page and see what it looks like. So there we have it. We’ve got all of our stuff set up. If we hit Further Product Information, of course the mailto pops up here so you can see that, that works.

That wraps up Part 9 of Lesson 11 of the Build Your Own E-Commerce Website tutorial series, Configure the Text Widget.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
9 Comments… add one
9 comments… add one
  • chung tang December 3, 2010, 7:32 pm

    Hi Rick,

    For Some reason, my footer shows up just like your demonstrated in Firefox and Chrome but I cannot make it show up properly in IE…

    is there some css compatible code that i can write?



  • Bryan January 3, 2011, 9:22 am

    Rick, I couldn’t figure out why my Copyright mark was just showing up as a question mark. I finally made it work by writing it as the following in quotes “©” to make that symbol appear. Was there an easier way I missed?


  • Bryan January 3, 2011, 10:01 am

    Rick, my last comment didn’t make sense when the word processor automatically changed my code into the actual copyright symbol. What I was saying is that I wrote it as the “and” symbol followed by the letter “c” followed by a semi-colon.


    • Rick Anderson January 3, 2011, 10:47 am

      Brian, that is the HTML code for the copy right symbol. That is the only way to represent it in HTML.

  • Melissa O'Neil September 12, 2011, 2:09 pm

    Hi Rick,
    As I follow along and do this, nothing is changing on my site. The boxes do not move over etc. I know this is elementary, but I can’t figure out what I am doing wrong.

  • Melissa O'Neil September 12, 2011, 2:45 pm

    Where is the editing taking place? Is it in custom css?

    • Rick Anderson September 12, 2011, 3:32 pm

      Melissa – the code shown in this specific video goes inside of the text widget that you’ve put in your sidebar. I looked at your site and it appears that you have the PHP part of the footer working just fine. Unfortunately the CSS part is missing from your custom.css file. What is happening right now is that your footer sidebars are stacking on top of each other. You need to add the CSS that makes them sit side by side. The CSS styling is in Lesson 11 Part 3 and that code goes in the custom.css file.

    • Rick Anderson September 12, 2011, 3:34 pm

      You might consider trying my BYOB Thesis Footer Widgets plugin. It will allow you to create up to 3 rows of widget areas each containing up to 5 widget columns. You can get this plugin on my Facebook Fan Page –

  • Bob Bessette April 13, 2012, 3:39 pm

    I cannot get this widget to stay in my sidebar. It allows me to place it there in Appearance>Widgets but when I check the site it is not showing up. When I go back to Appearance>Widgets it is back in the Available Widgets and not in the sidebar.
    Any help would be appreciated.


Leave a Comment