WordPress Tutorial –  How to Use a Text Widget to Customize a WordPress Sidebar

Create a custom sidebar with text, an image and a badge

WordPress Text Widget: Create a custom sidebar box like this with text, an image and a badge.

RELATED POSTS:
How to Use the WordPress Gravatar Widget to Create an About Me Box in Your Sidebar

How to Add a Flickr Photo Widget / Badge to WordPress Sidebar

This Intermediate level WordPress tutorial shows how to use a text widget to customize a sidebar in WordPress. The final product of the tutorial can be seen here in the Business Blogging 101 website’s right sidebar. The HTML code used in this example is below.

NOTE: this video tutorial uses version 2.5 of WordPress. The latest version of WordPress is now 2.7.1. The only difference in this case is that in version 2.7.1 Widgets are now located under Appearance > Widgets (using the navigation buttons in the left side of the WordPress Dashboard). Here is a screen shot of the WordPress 2.7 Dashboard highlighting the new Text widget interface. In version 2.5, Widgets are located under Design > Widgets. Everything else is exactly the same. Use the comment form at the bottom of this post to ask a question if you get confused.

Widgets are a useful feature of most new WordPress themes. These themes are called “widget enabled” or “widgetized” themes. They allow you to add custom content to your sidebars with little or no knowledge of HTML or other code.

In an earlier tutorial, I showed how to add Flickr photos to a WordPress sidebar using the Flickr photo widget.

The example I use in this tutorial shows how to create a custom text box with a short biographical note. Part of that text is a link. In PART TWO of this tutorial, I show how to insert an image into the same custom sidebar box, along with a LinkedIn profile “badge”. You can use these Text Widget techniques to put whatever you want into your own WordPress sidebar.

HTML code used in this tutorial example:

<img src=”https://mcbuzz.files.wordpress.com/2008/08/3058dc0.jpg&#8221; /><br />

I’m an <a href=”https://mcbuzz.wordpress.com/about/”>online marketing consultant</a>, specializing in Web 2.0 social media marketing, search engine optimization, pay per click advertising and WordPress websites for business.

<a href=”http://www.linkedin.com/in/mcbuzzmarkmclaren”><img src=”http://www.linkedin.com/img/webpromo/btn_viewmy_120x33.gif&#8221; border=”0″ alt=”View Mark McLaren’s profile on LinkedIn” width=”120″ height=”33″ /></a>


How to Use a Text Widget to Customize a WordPress Sidebar (Part 1)


How to Use a Text Widget to Customize a WordPress Sidebar (Part 2)

WordPress 2.5+ Tutorial – How to Upload and Insert an Image Using WordPress

My Sample Caption for This Image

My Sample Caption for This Image

Related post: WordPress 2.5+ Tutorial – How to Position an Image and Wrap Text Around an Image

Inserting an image using WordPress version 2.5 or later is slightly different than inserting an image using WordPress version 2.3 or earlier. Versions 2.5 and 2.6 are essentially the same. Version 2.6 is the latest version as of July 2008.

Inserting an image that you have already uploaded to WordPress but haven’t used in a particular post or page is actually a bit confusing in version 2.5 or later. You need to be able to find the elusive “Insert into Post” button. It’s not obvious.

There are many other settings and features in the “Add media” tools in the WordPress editing interface. This tutorial covers only the most basic aspects of uploading and inserting an image.

So check it out.


How to Upload and Insert an Image Using WordPress 2.5+

Using a Free Blogging Service vs. Blogging on Your Own Hosted Site

Using a Free Blogging Service vs. Blogging on Your Own Hosted Site is a slideshow from a July, 2008, presentation by Mark McLaren of McBuzz Communications.

Who can learn from this presentation? Anyone who is new to blogging or at a beginner level of blogging.

Topics covered: Free blog services like WordPress.com and Blogger.com; Third-party hosted blogging; How to decide which of these is best for you; What is a Plugin? What is a Theme? And what is a Widget?

First used as part of a live presentation at Social Media Camp Seattle 2008, these slides have been modified to include much of the spoken component given by Mark McLaren at Social Media Camp.

WordPress Tutorial – How to Add Flickr Photo Widget to WordPress Theme Sidebar

This Intermediate-level WordPress Tutorial shows how to add Flickr Photo Widget to your WordPress blog’s sidebar so that you can display thumbnails of your Flickr photos. The Flickr Widget comes with WordPress 2.5+ on the WordPress.com hosting site. Your WordPress theme also must support Widgets. If you have questions about Widgets, send me a comment by clicking on the Comments link (or using the form) at the bottom of this post.

If you google something like “wordpress photo sidebar widget”, you will find many ways to display photos in your WordPress sidebar. If there’s one you already use that you like, let us know! The nice thing about using WordPress.com for your blog/website is that things like the Flickr Photo Widget are installed automatically – or Automattically, if you prefer (a little WordPress pun, there). Check out the Automattic website if you have a minute to learn more about what the creators of WordPress are up to.

Before you can add the Flickr Photo Widget, you need to first create a Flickr account at Flickr.com and upload photos to the account. If you need a tutorial on how to do that, send me a comment.

After you create your Flickr account, this tutorial shows you how to add the Flickr Widget to your WordPress sidebar and insert the RSS address to display Flickr thumbnail images in your sidebar. The thumbnail images link to the full-size image in your Flickr account. Pretty cool!

More About Changing Fonts and Font Size Using WordPress

This WordPress tutorial video (below) shows you how to change a font in a heading or a paragraph. This is something you can do for a specific heading or paragraph.

If you want to make a “global” change to the fonts used by your WordPress theme, you have to edit the style.css file that is part of your WordPress theme files.

One example of a global font change would be to change the font that is used for the title of each page and post. The Business Blogging 101 site has titles that use the Arial font and are a size of 16 pixels in height, with a medium blue color, and a light blue underline. By changing the style.css file, I could make the font a different family, like Times, and I could increase the size to 20 pixels; I could make the font color red; and I could remove the underline. That change would apply to every page and post on the site.

See the previous tutorial, Changing Fonts and Font Size Using WordPress for an overview of how to make a change to the style.css file. If you haven’t edited the files in your WordPress theme before, it can be a little challenging, so send me a comment if you have questions.

When you change a font – either globally or in a specific case – it’s a good idea to specify a group of fonts instead of just one. That way, if the first font is not installed on the computer of someone visiting your site, their browser will use the second one. If the second one is not installed, it will use the third, and so on.

Here are some suggested options for the font-family property. This will make sense when you watch the video below.

font-family:Verdana,Geneva,sans-serif;
font-family:Tahoma,Arial,Helvetica,sans-serif;
font-family:Georgia,Utopia,Palatino,’Palatino Linotype’,serif;
font-family:’Times New Roman’,Times,serif;
font-family:’Courier New’,’Courier’,monospace;


Here are code samples that go with this video tutorial.

<p style="font-family:'Times New Roman',Times,
serif;">This is a paragraph</p>

This is a paragraph

<h1 style="font-family:'Times New Roman',Times,
serif;">This is a heading</h1>

This is a heading

(You can find a discussion of “Web Safe Fonts” on Safalra.com.)


Changing Fonts and Font Size Using WordPress

This is a reply to a reader who asked about how to change fonts and font size in WordPress in the comments to the “How to Position an Image and Wrap Text Around an Image Using WordPress” tutorial. The reader asked if there is a way to create a special font format to use for captions under photos.

The “quick and dirty” way to change the font is to use the same “inline” Cascading Style Sheets (CSS) technique used in my tutorial for image position and padding.

See the video tutorial at the end of this post, and the video in the post called “More About Changing Fonts and Font Size Using WordPress” to see how to do it. They walk you through the steps discussed here.

I am borrowing from the examples at w3schools.com such as these CSS Examples. In particular, look at the explanation and examples of the CSS font family property, and look at this font formatting example which includes a handy tool you can use to experiment by making changes to the CSS code and seeing the results instantly.

Here is the inline technique to change a font from the default that a blog or website uses to the “serif” font “Times”. Fonts like Times or Times New Roman are serif fonts. Examples of “sans serif” fonts are Helvetica, Arial and Verdana.

Here are some options you can try for the font-family property (thanks to Safalra.com):

font-family:Verdana,Geneva,sans-serif;
font-family:Tahoma,Arial,Helvetica,sans-serif;
font-family:Georgia,Utopia,Palatino,’Palatino Linotype’,serif;
font-family:’Times New Roman’,Times,serif;
font-family:’Courier New’,’Courier’,monospace;

Insert the CSS information using the Code editing window (now called the “HTML” editing window in WordPress 2.5) just as you did in the “How to Position an Image…” tutorial. You have to add the p style=”…” and /p along with the left and right brackets on either side of the text as shown.

That’s the quick and dirty way. Again, check out the video below, and the next video in the post called “More About Changing Fonts and Font Size Using WordPress” to see how to do it.

What I say next really deserves a separate video tutorial (that hasn’t been made yet). If you would like me to make one, just send me a comment.


If you want to use something like a caption throughout your site, making an addition to the style.css file that is part of your WordPress theme is the way to go. (Note that on WordPress.com you have to pay an additional fee each month to be able to make changes to your theme files. If you don’t pay that fee, you can’t use the following technique.)

Again, check out the very cool examples at s3schools.com noted above.

To make a reusable format for something like a caption, what you would need to do is add the style information that appears between the style and /style tags in the font formatting example into your style.css file. That is, you put

p.sansserif {font-family: sans-serif}
or
p.caption {font-family: Helvetica, sans-serif; font-size: 10px; font-weight: bold; width: 300px;}

into your style.css file.

If you have third-party hosting for your WordPress site, you’ll need to use FTP software to download and upload the style.css file from you web hosting server. Your web hosting provider should be able to give you more infomation about FTP software. After adding the new code to your style.css file, save the file and upload it to your web hosting server using FTP. (If your blog is hosted on WordPress.com, you don’t have to worry about FTP. Just save the modified style.css using the WordPress dashboard.)

Then you need to add class=”sansserif” — or class=”caption” — to the p tag using the HTML Code editing window, just as you did to add padding to an image. Except in this case, you are assigning a class instead of a style to the paragraph.

I’m sorry if this is thoroughly confusing, but note that you have already used CSS to position and pad an image. The quick and dirty font change uses the same CSS style technique.

The second, more difficult font technique just goes one step further by placing the CSS code in the style.css file that is part of your WordPress theme as well as putting the p class=”…” into the HTML using the Code editing window.

Let me know if you have questions. I have a feeling you will!


Click on the video screen once to watch the tutorial here on the Business Blogging 101 page. Click again to view a slightly larger screen on the YouTube website.


The following are examples from the video tutorial.

This is a paragraph

Grapes in vineyard - free from iStockphoto.com

This is a caption

How to See If a Page or Document Has Been Indexed by Google

There is a post on the McBuzz Communications website about how to see if a page or document on your website has been indexed by Google. It’s an intermediate (or maybe advanced) topic, but anyone interested in optimizing a WordPress website or blog for search engines may find it useful.

How to See If a Page or Document Has Been Indexed by Google

%d bloggers like this: