Wordpress Tip: Essential UI Friendly Features

Published April 6, 2008 • 0 Comments • 2 Delicious Bookmarks

User Interface (UI) has been a hot topic recently.

Mozilla is betting their money on it, Jakob undeniably knows it and even Wordpress itself emphasized it in their latest release.

So when you are designing your next Wordpress theme,you will need to keep UI in mind. I have put together a list of some of the best UI features that Wordpress has to offer, but unfortunately many themes don’t include most of them. Fortunately, many are extremely easy to add. Feel free to add any I’ve missed in the comments.

Top 6 Wordpress Theme UI Essentials

1. On the single.php template, always show the previous and next post links.
   This is one that I regretfully omitted in some of my first Wordpress theme designs. This is such an easy thing to add (within the Loop), and gives your visitor a way to check out your next post rather than having to hit the back button to return to your homepage.

   <?php previous_post('Previous Post: %', '', 'yes'); ?><br />
   <?php next_post('Next Post: %', '', 'yes'); ?>

2. Add the Auto-discovery link for RSS in the header.
   This is another no-brainer, but inexplicably this isn’t added to some blogs. The way I see it, you should provide your visitors with every way imaginable to subscribe to your RSS feed. RSS is the lifeblood of any blog and there is no excuse for not having this one line of code in your header.php template file.

   

   <link rel="alternate" type="application/rss+xml" title="Entries RSS" href="<?php
   bloginfo('rss2_url'); ?>" />

3. When you display a post’s comment number, it should be an active link to the comments section on the single.php template.
   
   There is a template tag that does this automatically:

   <?php comments_popup_link
   ('zero','one','more','CSSclass','none');
   ?>

   … but there is also one that doesn’t. This one gives you more flexibility in design and styling, but if you use it, just make sure you link it to the comments section of the page.

   <a href="#comments" title="Comments"><?php comments_number('zero', 'one',
   'more', 'number'); ?></a>

4. Create an ‘Add New Comment’ link above all other comments.
   
   This simple link will allow your visitors to quickly skip all comments and reach your comment form to participate in the conversation as fast as possible. (The example below assumes your form in comments.php has an id=”commentform”)

   

   <a href="#commentform" title="Reply">Add New Comment</a>

5. Link to that post’s specific Comments RSS Feed.
   
   Pretty easy to add, and it all goes back to Step 2 – subscribers are the lifeblood. An alternative to this would be to add the “Subscribe to Comments” plugin, but having both certainly would never hurt.

   <a href="<?php the_permalink(); ?>/feed" title="Subscribe to the comments for this Post"
   >RSS</a>

   You can also take this a step further by adding an auto-discovery link in the header.php template, much like the way Step 2 above does for the main site feed.

   <?php if (is_single()) { ?>
   <?php while (have_posts()) : the_post(); ?>
   <link rel="alternate" type="application/rss+xml" title="<?php the_title(); ?>
   Comments" href="<?php bloginfo('url'); ?>/?feed=rss2&amp;p=<?php the_ID(); ?>"
   />
   <?php endwhile; ?>
   <?php rewind_posts(); ?>
   <?php } ?>

   If you want to take this even one step further, I would suggest adding the Subscribe to Comments plugin. After many requests for it, I have stated making it a regularly used plugin in my work.

6. Provide each comment with it’s own permalink.
   
   What happens if someone (maybe you in another post?…) needs to reference a comment left on one of your posts? The answer is they can’t unless you’ve added this code to your comments.php template file.

   So in my comments.php file, I find this (or something similar) and make sure that I see the id="comment-<?php comment_ID() ?>" in the <li>.

   <ol class="commentlist">
   <?php foreach ($comments as $comment) : ?>
   
   <li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">

   I then add something like this linking to that comment ID within that same <li>

   <a href="#comment-<?php comment_ID() ?>"><?php comment_date('F jS, Y') ?></a>

FYI: For any WP work that I have done previously for you that doesn’t include some of these small bits of code – please contact me so that I can add it to your theme free of charge.