Maria’s Guides

A quick how-to for WordPress users.

When I rolled my book support Web site, LangerBooks.com, into this site — my personal site and blog — I needed to make a clear distinction between the categories that I maintained to support my books and those that were part of my blog. I wanted to make it very easy for readers looking for more information and support to find the information they sought. I achieved this goal by displaying the two groups of categories separately, each under its own heading.

Check out the sidebar to see for yourself. The Book Support heading lists all book support categories (one per title that I support). A list of links appears under the Publisher Links heading that comes next. Then the Maria’s WebLog heading lists all categories that are part of my WebLog.

I could think of two ways to do this with WordPress. Unfortunately, I chose the hard way.

To get the category list in the sidebar, I included the wp_list_cats tag in the sidebar.php file. (Forgive me for not going into detail about that — Miraz and I cover it in detail in our upcoming WordPress book.) I prefer wp_list_cats over list_cats because I find it easier to enter the arguments in the single string format it offers.

The first (hard) way to separate the category list into two groups is with the exclude argument. For example,

wp_list_cats('sort_column=name&optioncount=0&exclude=10,15')

instructs WordPress to list all categories, sorted by name, without post count, except categories 10 and 15. To make this work, I had to construct two separate commands: one for Book Support that excluded the Maria’s WebLog categories and one for Maria’s WebLog that excluded the Book Support categories. At the time, this seemed to make sense, since I was not using a category/subcategory structure and I didn’t expect to add any more categories. In reality, I was just being lazy — and I paid for it.

Of course, I did add more categories. And what do you think happened? The new category was listed under both headings because it hadn’t been excluded from either one. So every time I added a category, I had to tweak one of the two lines of code in the sidebar.php file. Not exactly something I wanted to remember to do.

So I did it the smart (right) way. I created two new categories: Book Support and Maria’s WebLog. Then I went into the Manage Categories administration panel and I edited every category (other than the two new ones) so it was a subcategory of one of the new ones. Finally, I went back into the sidebar.php file and replaced the two original wp_list_cats lines with a line like this:

wp_list_cats('optioncount=0&child_of=35&sort_column=name')

This says to list all categories, without a post count, that are the child (subcategory) of category 35, sorted by name.

Now every time I add a new subcategory, all I have to do is immediately assign it to the correct main category. It will appear under the correct heading. Quicker, easier, and it works.

Of course, you can split your category list by as many parent categories as you like. You don’t even have to list them all in the sidebar. This seems to be the best way to do it. Give it a try and see for yourself.

Oh, and by the way, you can learn more about the wp_list_cats tag in the WordPress Codex. The Codex is an excellent source of information about WordPress with just two tiny problems: some information is a bit tough to find and other information isn’t exactly up to date. But the template tag information is right on target and easy to find.

A Firefox Web browser spelling checker extension.

As I’ve mentioned elsewhere in this blog, I’ve discovered that I’ve become almost dependent on automatic spelling checkers like the one in Microsoft Word to check my typing for spelling and typographical errors. Trouble is, an automatic spelling checker is not always available.

Like right now. I’m creating a new post in my WordPress-based blog. To do that, I fire up my favorite Web browser, Firefox, and fill in a form. If, while I’m typing, I realize that I’m not sure about the speling of a word, there’s nothing built into Firefox that’ll identify the misspelled word in a form.

I used to use the Dictionary widget to check my spelling. Press F12, type the spelling in the Dictionary widget box, and press Return. If I spelled it right, the definition appears. If I spelled it wrong, either a different word’s definition appears or the Dictionary widget tells me that the word can’t be found. I then spend some time typing in other suggestions. Not very productive or fun — although I have learned a few new words.

Enter RiteOfTongue by Terry Yuen. This Firefox extension adds a Suggest option to the bottom of the contextual menu that appears when you select a word in a form, hold down the Control key, and click on the selection (or just right click, if you have a two-button mouse).

To check the word’s spelling, choose Suggest and wait a moment.

If the word is correctly spelled, the Suggest option turns into a gray Correct item with a green check mark before it.

If the word is not correctly spelled, a pop-up menu displays possible suggestions. Pick the one you want to use and it’s automatically inserted in place of the selected word.

Of course, you have to check a word to correct it. If you think you have it spelled correctly and don’t bother to check it, this extension won’t help you.

And I’ll use that excuse for any typos or spelling errors you see in my blog from this point on.

Instructions for using the AdRotator plugin to generate random ad images with links.

I’ve been wanting to do this forever. In fact, it was the first thing I explored when I started using WordPress late last year. Unfortunately, I didn’t have enough understanding of how plugins and theme files worked to get anywhere.

Things are different now. I know what I’m doing. And this particular task is quite simple, as you’ll see here.

The Goal

My goal was to be able to display small advertising images at the top of the navigation bar. The image would appear randomly from a pool of images and, when it appeared, it would be associated with a specific URL. When the image appeared, the site visitor could click the image to go to a Web site or page.

I wanted to use this for wickenburg-az.com, a site I spend an awful lot of time working on with no compensation. The idea was to charge a nominal fee to add an image to the pool for a month. The money I collected would cover the cost of running the site.

Keep in mind that I could use any size image and place it anywhere in the header, sidebar, or footer. I wanted a 170 x 120 pixel image at the top of the sidebar. (I already run a strip of Google text ads at the bottom of the page, as I do here. I think too much advertising on a Web site is extremely obnoxious. But how much is too much when you have bills to pay?)

The Plugin

I won’t go into detail about my search for the plugin. It was neither long nor exciting. I wound up with AdRotator by Angsuman Chakraborty, which was really designed to work with Google AdSense and other prepacked blog advertising tools. But as I read the comments for the plugin’s description, I was assured that it would do what I needed to do.

But how do I use it? The User Manual was difficult to find. It wasn’t very user-friendly, either. (No offense to the plugin author. Frankly, I think that every programmer should team up with a tech writer to get documentation written. Programmers program. Writers write. Programmers don’t usually program and write — although an exception does come to mind.)

So I decided to write up a quick How To piece that would explain how to use AdRotator to do just what I wanted it to do. This isn’t AdRotator documentation. It only explains how to use the plugin for one particular task.

Also, these instructions don’t explain every single step in minute detail. If you want that kind of explanation, buy a Visual QuickStart Guide. Instead, these instruction assume you have already mastered the basics of using your image editing software, an FTP client, a text editor, and WordPress.

Create the Ads

First, use image editing software and your FTP program to create and upload the ad images.

1. Decide on an ad size based on where you plan to place the ads. I used 170 wide by 120 tall so it would fit in the sidebar column of my theme (modified Connections).
2. Use your favorite image editing software to create each image in the desired dimensions.
3. Save the images as GIF, JPEG, or PNG format files with the appropriate file name extension.
4. Use your favorite FTP client to upload the images to a folder within your WordPress wp-content folder. I created a folder called ads (real creative, huh?) and put them there. For obvious reasons, the folder’s permissions must be set so its contents are readable.
5. Put away your image editing software; you’re done with it for now.

Install and Activate the Plugin

To use any WordPress plugin, you must download it, install it, and activate it.

1. Download the plugin. This was pretty challenging, since I had a hard time finding a link to it. You can find a link on this page or simply click Download the plugin.
2. Use your favorite FTP client to upload the AdRotator.php file to your plugins directory inside your wp-content directory.
3. Go to the Plugins adminsitration panel in WordPress and activate the AdRotator plugin.

Create the Reference File

Now comes the part that seems to confuse most people (according to the comments). You need to create a plain text file that includes HTML for displaying the ad graphics with links to their URLs.

1. Fire up your favorite text editor. Do not use a word processor like Microsoft Word! I use TextWrangler, which I can’t say enough nice things about.
2. Create a new text file.
3. For each ad/URL combination you want to include in the pool of ads, create a line in the text file that includes the following code:

   <a rel="external nofollow" href="http://advertiserurl.com" title='advertiser name or slogan'><img src='http://yoursite.com/wp-content/yourimagefolder/imagefile.jpg' border="0" /></a>

   Of course, you’ll substitute real URLs and text for what is shown above. A real example from my setup would be:

   <a rel="external nofollow" href="http://www.flyingmair.com" title='Helicopter Tours and Charters'><img src='http://www.wickenburg-az.com/wp-content/ads/flyingmair.jpg' border="0" /></a>

4. Save the file with a Web-friendly name and the .txt file extension. In my example, I named it ads.txt (not very creative).
5. Use your favorite FTP software to upload the file to the wp-content folder in your WordPress installation.

Reference the Ads

Now you need to reference the AdRotator plugin in the theme file in which you want the ad to appear. Normally, this will be header.php or footer.php (for banner ads) or sidebar.php (for ad boxes or towers).

1. Open the theme file in which you want to reference the ad.
2. Include the following code exactly where you want the ad to appear:

   <?php echo getad('adfilename'); ?>

   Of course, you’d replace adfilename with your file name excluding the .txt extension. So in my example, it would be:

   <?php echo getad('ads'); ?>

3. Save the theme file you edited.

Check Your Work

That’s all there is to it. To check your work, display any blog page that uses the theme file you modified.

If you’re great at following instructions and I didn’t make any mistakes in the instructions here, it should work fine.

If you’re human (like I am), you’ll have to fix a number of tiny boo-boos you made along the way. The mistakes I made include wrong image URL (duh) and incorrect formatting (theme-dependent). I also made some ugly images the first time around and had to make new ones that looked better. I’m a writer, not an artist.

If you make some errors and your fixes don’t seem to be working, clear your browser’s cache. Then reload a page. It should be okay.

If you want to see how mine came out, visit http://www.wickenburg-az.com/.

Tips

A few tips for making advertisements less painful for site visitors:

• Keep image file sizes small. I recommend less than 20K, but definitely less than 100K.
• If the ad image is textual and you’re placing it on a colored or patterned background, consider saving the image as a GIF with transparency.
• Animate GIFs look cool if properly done. Unfortunately, I can’t make one that isn’t terribly obnoxious.

And one tip for making advertisements more painful:

You can create multiple txt files, each with its own lists of images and links, and reference each one in a different place on your blog. This makes it possible to combine header, footer, and sidebar advertising on one site. Just don’t expect me to visit often; I really do hate ads.

No plugin required!

When I first started using WordPress, it kind of bugged me that the only place I could see a count of posts, categories, and comments was in the Dashboard. I wanted that information available to site visitors, too.

So I rolled up my sleeves, took out my favorite text editor (TextWrangler), and began exploring WordPress template files.

I found what I was looking for right in the index.php file in the wp-admin folder. That’s the file that displays the Dashboard administration panel. I did a search for Blog Stats (the heading under which the information I wanted appeared). I found the following code:

<h3><?php _e('Blog Stats'); ?></h3>

<?php

$numposts = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->posts WHERE post_status = 'publish'");

if (0 < $numposts) $numposts = number_format($numposts);

$numcomms = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->comments WHERE comment_approved = '1'");

if (0 < $numcomms) $numcomms = number_format($numcomms);

$numcats = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->categories");

if (0 < $numcats) $numcats = number_format($numcats);

?>

<p><?php printf(__('There are currently %1$s <a href="%2$s" title="Posts">posts</a> and %3$s <a href="%4$s" title="Comments">comments</a>, contained within %5$s <a href="%6$s" title="categories">categories</a>.'), $numposts, 'edit.php',  $numcomms, 'edit-comments.php', $numcats, 'categories.php'); ?></p>

This code includes PHP and HTML to get and display the information I wanted, along with links to administrative pages. It would require some editing to make it display the way I wanted it to.

I copied all of this code and pasted it into the sidebar.php file for my theme in the place I wanted it to appear. Then I started editing to remove the links and change the way the information was presented. I ended up with this:

<h2><?php _e('Site Stats'); ?></h2>

<ul>

<li>

<?php $numposts = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->posts WHERE post_status = 'publish'");

if (0 < $numposts) $numposts = number_format($numposts);

$numcomms = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->comments WHERE comment_approved = '1'");

if (0 < $numcomms) $numcomms = number_format($numcomms);

$numcats = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->categories");

if (0 < $numcats) $numcats = number_format($numcats);

?>

<?php printf(__('There are currently %1$s entries and %3$s comments, contained within %5$s blog categories.'), $numposts, 'edit.php',  $numcomms, 'edit-comments.php', $numcats, 'categories.php'); ?></li>

</ul>

i saved the sidebar.php file to my theme folder and reloaded a page that included the sidebar. Voila! It worked!

You can see what it looks like in the Site Stats area in the sidebar of any page of this blog. You might notice the Users Online information there, too; that’s created with a plugin.