A Defined and Navigable Space

My 100 posts project needs a home. I want all 100+1 in their own group, with easy navigation between them, and I’d like some sort of countdown widget.

For a countdown I chose KB Countdown Widget.

KB Countdown Widget

KB Countdown is a sidebar widget that comes with nice documentation and several pre-configured options. You can even add html. My only complaint is that because of this plugin I didn’t have a reason to learn to write the php myself, but, hey, it’s done today instead of later, so I think I’ll live. You can see it in action at the top of my left column.
By Adam R. Brown.
Configure at Presentation > Widgets.

Count the years/months/days since, until, or between events. Optional bar graph for tracking progress between two dates.

Adding Tag Tags to a WordPress Theme

I want each post to show a list of any associated tags. I think the end of the post is the best place for a list of tags, and because categories are the big stuff of what the post is about I’m going to leave categories at the top. Tags feel more like a “related posts” sort of a thing, which is more expected at the bottom of a post.

According to the codex, to add a list of tags that are associated with a specific post, I need to use the following:

<?php the_tags(); ?>

First available with WordPress Version 2.3, this template tag displays a link to the tag or tags a post belongs to. If no tags are associated with the current entry, the associated category is displayed instead. This tag should be used within The Loop.

The WordPress Codex on the_tags

To list the tags at the end of a post, paste

<?php the_tags(); ?>


<?php the_content(__('Read more'));?>

and before

<?php endwhile; else: ?>

In my theme I only needed to add it to index.php. In yours, you may also need to do the same to single.php. Here’s what it looks like in my index.php:

<?php the_content(__('Read more'));?>
<div style="clear:both;"></div>

<?php the_tags(); ?>
	<?php endwhile; else: ?>

<?php _e('Sorry, no posts matched your criteria.'); ?>
<?php endif; ?>


If you try adding this code and nothing shows up, check to make sure you’ve added it before the endwhile; else: bit that marks the end of The Loop.

Adding Previous Post and Next Post Links

To help people cycle through my series, today I added links for going backwards and forwards between posts. The WordPress Codex has some straightforward examples of how to use next and previous links.

This is the basic code:

<?php previous_post(); ?>    <?php next_post(); ?>

The parameters for both of these tags are format, text and title. These parameters should be separated by commas and enclosed in apostrophes. I made use of them like so:

I chose to insert two pair of left angle brackets, followed by the permalink: '« « %'

Add “Back” and a colon: 'Back: '. If no link is present, no “Back” and colon will show. To make it clearer exactly what these links are, I have labeled them with “back” and “next.” Other choices are words like “previous” and “forward,” but my command decision of today is that I like “back” and “next” because they are nice and short.

Use the title: 'yes'

So far, we have this:

<?php previous_post('&laquo; &laquo; %', 'Back: ', 'yes'); ?>

<?php next_post('% &raquo; &raquo; ', 'Next: ', 'yes'); ?>

Because some of my titles are long enough to trigger a line break, I want a line break between my longer previous post and next post links. Also, I think they’d be a little easier on the eyes if “Back” floated to the left, and “Next” floated to the right. I used floated divs for this, choosing not to add a class to my stylesheet because it wouldn’t cut down on the amount of code. If you do a View > Source and this is no longer so… well, could be that I changed my mind. ;-)

<div style="float: left">
<?php previous_post('&laquo; &laquo; %', 'Back: ', 'yes'); ?>

<div style="float: right">
<?php next_post('% &raquo; &raquo; ',
 'Next: ', 'yes'); ?>


Tuck it in between

<?php the_tags(); ?>


<?php endwhile; else: ?>

and I’m done with the previous and next post links.

Voila. Home sweet 100+1 post home.

WordPress Post Category Icons

When I started my blog last month I had planned to fairly quickly add three custom graphic elements. Category avatars were at the top of my list.

Category avatars are a nice way to automatically add visual interest to a blog that is mostly text. Author avatars help, but are not practical for a single-author blog where you’d see the same image over and over again.

These are from the graphics part last month’s wish list:

  • A nice feed icon
  • An avatar for each WordPress category
  • Think about holiday graphics

Looking back over my list, it occurred to me that I could do a quick temporary fix for all three with one operation. I can add code that associates an image with each category, and use holiday themed RSS feed icons for my images. The code part will be finished, and in a week or two I can make images to use long-term. All I need are some holiday themed feed icons that are large enough to work in an avatar-like space.

In my wanderings I found 12 free Christmas RSS feed icons that go with the dark red that I like. At about 100px square they’re the perfect size.

Adding the Category Icons

Because the_category_ID is depreciated, I don’t want to follow the same plan as in my post about adding WordPress post author avatars, where I used the author ID to select an image name.

According to WordPress, the_category_ID was replaced when posts gained the capacity for multiple categories.

Their example of how to replace the_category_ID will return the ID number of whichever category applies to the post you are viewing. If the post is in two categories, two ID numbers will be returned.

foreach((get_the_category()) as $category) {

    echo $category->cat_ID . ' ';
} ?>

Getting a list of categories associated with a post is not hard. What I wanted was one image associated with the specific category of the post. With the help of the WordPress Codex, these are the two solutions I came up with.

Category Images Using get_the_category

This one uses get_the_category and cat_name to show one image for posts that are associated with more than one category.

<?php $cat = get_the_category(); $cat = $cat[0];
 { echo '<img src="http://domain.com/wp-content/cat-img/' . $cat->cat_ID . '.png"
alt="' . $cat->cat_name . '" />'; } ?>


How does WordPress decide which category to use for the image, when there is more than one category associated with a post? In this case, the choice depends on what category name comes first in the alphabet. Check the list of category names in your WordPress post edit window and you’ll see that they are in alphabetical order, too.

This can be a little confusing, because permalinks don’t use the same method to name the directory associated with a category. When faced with a choice of more than one category, permalinks use the slug of the category with the lowest cat_ID number.

I want the image to match the directory.

Category Images Using elseif and in_category

Using in_category() and specifying which category goes with which image will give more control. Here I am manually choosing which image to display for the first two categories. In all other cases the image “3.png” will be used.

WordPress uses the category ID with the lowest number for both the category’s permalink directory and the image selected to associate with the post.


<?php if ( in_category(1) ) {
echo '<img src="http://domain.com/wp-content/cat-img/1.png" />';

} elseif ( in_category(2) ) {
echo '<img src="http://domain.com/wp-content/cat-img/2.png" />';

} else {
echo '<img src="http://domain.com/wp-content/cat-img/3.png" />';

There may be a more elegant way. I am at the beginning of my journey into php. If anyone would like to offer feedback, please comment. Note — actual php is not allowed by the comment form.

Next Steps

Because a feed icon feels like it should be a clickable path to a feed, the images should be linked to my RSS feed. I chose to wrap each image tag in a link to http://ablereach.com/feed/ instead of an individual category feed, because there may be significant gaps between posts in any given category: this is a single person blog.

Next, I edited my style sheet to add some styling to float my images to the left, add a little space around them and eliminates any border.

.icons {display:inline;
        float: left;
        border: none;
        margin: 5px 10px 5px 0px;}


Then, all that remained was to add an alt to the images, a title to the anchors and paste the finished code into my theme. Happy, festive and finished.

Soooo, would anyone like to lay bets on my chances of finishing new category avatars before the jolly holly theme is hopelessly out of date?

One step at a time!

Adding Post Author Avatars

One of the neat things about WordPress is that a non-programmer can add personalized tweaks fairly easily, with a basic understanding of nesting. The trick is to find what something is called and simplify goals. Simplification is often a matter of not requiring special treatment for specific situations, unless that is something you already know how to do. Of course, once you know a thing it becomes infinitely simpler to accomplish.

In this case, I wanted avatar images to appear automatically at the top left of a multi-authored Kubrick-based theme. I wanted the “Pages” content to be associated with the site as a whole, not with any individual writer. Guest blog authors have their own WordPress user accounts. Some posts are attributed to site staff and can be represented by a logo. Already, that gives me a few places to start.

WHAT: an image

<img src="filename.jpg" />

When doodling about how to accomplish something, I like to start on familiar territory, as simply as possible.

To make it easier to keep track of my images, I created a folder called avatars, and placed it in the wp-content folder. Using <?php echo get_option('home');?> to define the root domain of the blog makes this bit of code reusable, should I want to use it for another site. The result is an as-yet undefined file name with a URL that looks like this:

<?php echo get_option('home');?>

WHO: post authors

Next I decided how to tell WordPress to display a specific image for each author. Because all authors have a user ID, which image to display can be taken care of by associating the image with the user ID of the current post’s author. I looked in the file “/wp-includes/author-template.php” to see how WordPress defines things author. This is also how I found the code I used to define my alt descriptions.

The result is a file name that looks like this:

<?php the_author_ID(); ?>.jpg

For this to work, the avatars folder I made in the last step needs to contain an image for each author ID that is named to correspond to that ID. The file name “1.jpg” would be inserted by WordPress when the person with ID number “1” is the author. You can find author ID numbers listed by user names, under the Users tab.

ALT: describe the image

Following the same logic, I chose to use the following to automatically create my alt descriptions:

<?php the_author(display_name); ?>

Easy peasy.

HOW: control image styling

Elizabeth AbleAdd a class to your stylesheet that will control and enhance image styling.

I like to float author avatars to the left and give them a little padding and a border. Below is the css I used for the image at left.

.avatar {display: inline;
         float: left;
         padding: 4px;
         border: 4px solid #efefe7;
         margin: 5px 10px 7px 0px;}


WHERE: choose placement in template files

The following will work in Kubrick-based themes, as well as many others. Your own theme may have design elements that require a little tinkering, or even have different template files.

To place an author avatar only in blog posts, add the code below into index.php. Do the same in page.php if you also want avatars on static Pages.

Add these lines just before <?php the_content.

<img src="<?php echo get_option('home'); ?>
/wp-content/avatars/<?php the_author_ID(); ?>.jpg"

class="avatar" alt="<?php the_author(display_name); ?>" />

And that’s it.

Hat tip to CodeHighlighter plugin by Wongoo Lee.