WordPress presentation hacks

One thing missing from the default WordPress setup is the lack of previous/next links. Fixing this is not really a problem though, as WordPress includes a number of template functions, among which are next_post and previous_post. Both of these take care of all the necessary logic, so that the correct links are displayed, and only when necessary, i.e. only when displaying a single post. I decided to put the links at the top of the post page, next to the post metadata such as categories and author (in the file /index.php):

<div class="meta"> 
    <span class="nav-prev"><?php previous_post('&laquo; %', ''); ?></span> 
    <span class="nav-next"><?php next_post('% &raquo;', ''); ?></span> 
    <?php _e("Filed under:"); ?> <?php the_category() ?> &#8212; <?php the_author() ?> @ <?php the_time() ?> <?php edit_post_link(); ?> 
</div>

Another thing that I thought would be nice, was only showing excerpts on pages with a large number of posts. This is also quite easy, thanks to the get_excerpt template function:

<?php if(sizeof($posts)>get_settings('posts_per_page')) : ?>
  <div class="storyexcerpt"> 
    <?php the_excerpt(); ?> 
  </div>  
<?php else: ?>
  <div class="storycontent"> 
    <?php the_content(); ?> 
  </div>  
  <div class="feedback"> 
    <?php wp_link_pages(); ?> 
    <?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?> 
  </div>  
<?php endif; ?>

Finally, I wanted to fiddle a little with the CSS, styling the posts so that a category specific icon is displayed next to posts in that category. To accomplish this, I had to add some category information to the class attribute of the div containing the post:

<div class="post<? foreach(get_the_category() as $cat){ print(' post-category-'.$cat->category_nicename);}; ?>">

With this in place, the CSS is easily tweaked to display an icon next to the post title (note that only the last one of the rules will be in effect for posts in multiple categories, so ordering is important):

.post-category-wordpress h3 { 
  background: url(/images/wp-button.png) no-repeat right;
}
.post-category-foaf h3 { 
  background: url(/images/foaf-tiny.png) no-repeat right;
}

Improving this approach to be able to handle more than one category icon at a time is left as an exercise for the reader…

2 thoughts on “WordPress presentation hacks

  1. Good point. The class is there for styling reasons, but I suppose it should be possible with recent CSS support to style the elements based on the rel attribute.

    But do also notice that there are link elements in the head section of each page…

Comments are closed.