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(); ?>

after

<?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; ?>

<h2>Comments</h2>
 

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>
<div style="float: right">
<?php next_post('% &raquo; &raquo; ',
 'Next: ', 'yes'); ?>

</div>
 

Tuck it in between

<?php the_tags(); ?>

and

<?php endwhile; else: ?>

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

Voila. Home sweet 100+1 post home.

This entry was posted in Tools and Tutorials, Usability, WordPress. Bookmark the permalink.

Comments are closed.