<ol id="tweets">
 <li data-template>
  <img src="{{profile_image_url}}" />
  <h3>{{from_user}}</h3>
  <p>{{text}}</p>
 </li>
</ol>

…and populate it with JSON data from the Twitter API, which you could load with a couple lines of jQuery. It works with browser as far back as IE6 and doesn’t require any dependencies.

It seems like a friendlier way to deal with JSON data, and it offers the advantage of any templating system: you can separate the logic and data from the presentation.

• Full cross-browser compatibility…even with IE6. It uses some scripts to add support to those uncool browsers. You can use the new HTML5 elements today. Even the video element.
• @font-face
• Server configuration templates (available for Apache, NGINX, and other servers) to add caching and compression.
• Mobile optimizations
• Print stylesheet
• IE6 pngfix is included
• Plenty of utility classes like .no-js and .clearfix

It’s definitely worth checking out for future reference. The reset stylesheet is fairly similar to the one I tend to use, and the HTML seems fairly well-optimized, with the scripts loading in the footer and everything.

This isn’t anything new, but I recently had an interesting realization. This concept would be a lot more powerful when coupled with Custom Taxonomies, which have been a part of WordPress since version 2.8 or so.

Imagine a movie-related blog. You could have a “Departments” taxonomy set up to separate posts into reviews, production news, upcoming release announcements, box office info, etc.. You then build your theme to separate these different content types into different parts of the site, each with their own distinct “look.” (Sort of like having multiple blogs under one site, if you want to think of it that way.)

Then you can have other taxonomies setup that allow you to tag a post with actor names, movie franchises, directors, etc.. These extra taxonomies could be used to create other sorts of templates. Want to create a landing page for updates about the “Harry Potter” franchise? Create a new template with spaces that pull data from the appropriate taxonomies, and style it how you want it.

If you poke around the CNET News site, you’ll get a good idea of what I’m talking about. All of the “blogs” that are all part of the greater site have their own different stylings, and posts have metadata that allows them to be displayed in different spots. WordPress could easily be used to build something like that.

How about having the best of both options? Have one full post, and the rest can be excerpts.

To set this up, find the Loop in your theme’s index.php file. It should look something like this:

<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?></small>
<div class="entry">
<?php the_content('Read the rest of this entry »'); ?>
</div>
<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
</div>
<?php endwhile; ?>

Replace it with something more like this:

<?php $counter=0; while (have_posts()) : the_post(); $counter++; ?>
<div class="post" id="post-<?php the_ID(); ?>">
<?php if ($counter > 1) { echo getThumbnail($post->ID); } ?>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?></small>
<div class="entry">
<?php
if ($counter < 2) {
the_content('Read the rest of this entry »');
} else {
the_excerpt('Read the rest of this entry »');
}
?>
</div>

It will display the first post in it’s entirely, and the remaining posts will be shown as excerpts. Note that you can still use the More Tag to override it and cut-off a particularly long post anyway.

If you don’t feel like messing with the Loop, you could use Daniel Scocco’s Homepage Excerpts plugin, which essentially does the same thing, while allowing for a bit of configuration, without having to play around with counter variables and conditional statements.

Personally, I would use the design during development, and swap it out with a unique theme when all the coding work is done. But if you’re trying to put together a web app, and you don’t have any design know-how, and don’t want to hire a designer, you could conceivably use this. I’d just recommend customizing it a bit, so it doesn’t look like you have the exact same template as someone else.

You can view a live demo of the template, and download it here.

The five most recent posts that I’ve marked as “Featured” will appear in the list, along with a “view all” option that takes the clicker to a custom date-based archive.

How does it work? It’s done with multiple loops and categories.

Creating the Sidebar List

1. Create a new category called “Featured.” Note its ID (mine is 72, so I’ll use that throughout this tutorial).
2. Add a few posts to the category.
3. Paste the following code into your sidebar, where you want the list to appear.


<ul>
<?php
$postslist = get_posts('category=72&order=DESC&numberposts=5');
foreach ($postslist as $post) :
setup_postdata($post);
?><li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li><?php
endforeach;
?>
<li><a href="http://www.webmaster-source.com/featured/">[View All]</a></li>
</ul>

Be sure to replace the bold “72” with the ID of your category. Seeing as this is another loop, the code must be located below your main loop (which means your get_sidebar() command must be below the main loop in your template). If your template’s sidebar is in the wrong place, you could use the $wpdb->query() function. However, I will not provide pasteable code, as most themes’ sidebars are below the main loop (and it’s much better if it is, as your content will be higher up, which is better for search engines).

Creating a Custom Archive

Create a new file called featured.php. This will be your template for the archive. Upload it to your theme directory, after adding something like this into it:


<?php
/*
Template Name: Featured Posts
*/
?>


<?php get_header(); ?>
<div id="widecontent">

<h2>Featured Posts</h2>

<h3>2008</h3>
<ul>
<?php
query_posts('year=2008&category_name=Featured');
if (have_posts()) :
while (have_posts()) : the_post();
?><li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li><?php
endwhile;
endif;
?>
</ul>

<h3>2007</h3>
<ul>
<?php
query_posts('year=2007&category_name=Featured');
if (have_posts()) :
while (have_posts()) : the_post();
?><li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li><?php
endwhile;
endif;
?>
</ul>

</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

You’ll have to modify it a little so it will work with your theme. Note that you have to add a loop for every year you have posts (every new year, you need to put a new one in).

Create a new Page (Admin->Write->Page) and call it “Featured Posts” (or something of the sort). Set the Post Slug to “featured” and the Template to “Featured Posts.”

Load yourdomain.com/featured/ into your browser to make sure everything works.

Note that this isn’t the only way to create the archive. You could just use the default, at yourdomain.com/category/featured/, or you could use $wpdb->query() to create a more advanced archive. It’s up to you, as well as your experience level. $wpdb->query() is generally the domain of plugin authors, and the large majority of bloggers should probably steer clear.

Well, enjoy your new Featured Posts system.

Don’t put it off any longer, it’s time to clean-up your post pages (the single.php template in WordPress).

Social Bookmarking

First of all, get rid of that “DiggIt” widget. If someone’s going to digg your post, then they’ll find a plain text link sufficient. Also, you save yourself the embarrassment of having “0 Diggs” stamped on all of your posts. Get rid of it, and save yourself an HTTP request to Digg’s servers.

While you’re removing the DiggIt widget, kill some of those social bookmarking icons. Keep them down to five or less. You can use the wonderful Share This plugin to sweep them under a virtual rug, gaining you a cool “Share By Email” form as well. If you want, you can keep some of the more commonly used bookmarking links if you want, but Share This can replace the rest.

Post Metadata

“This entry was posted by Bob on Monday, September 24th, 2007 at 10:15 am and is filed under Stuff, Rubbish, Cool. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.”

That’s kind of a waste of space, isn’t it? If you’re creative, you can shorten that line a bit, and maybe apply some styling to it. You definitely want to keep the date/time and post author together, though you could move them up the page, so they’re under the post title. The trackback URL and comments feed are useful, though they don’t have to be crammed in with the categories (and tags). This is one of the hardest parts of your template to declutter. You can probably work it out. Freelance Switch certainly did.

The postmeta paragraph is styled into a horizontal bar, showing the post date and comments RSS, along with their social bookmarking links and a “print article” function. The trackback URL link is moved to the spot where the trackbacks are displayed (separate from the comments), and the author name is moved to a spot under the post title.

Related Posts

Similar Posts is a great WordPress plugin that shows links to posts that are related to the one being displayed. If someone lands on a post page from a search engine or social bookmarking site, this plugin may keep them on your site, reading your content. Even for regular users, it can help unearth old posts that may be still be useful to someone.

Yes, you want to keep this plugin (or install it if you don’t have it). However, don’t just paste the template tag in and forget about it. You need to find a place to put the list of posts where it won’t clutter things too much. ProBlogger, and several other blogs (like Freelance Switch) have found an interesting solution. Look at this image:

See? The related posts are combined with some other useful links. I’ve been doing a similar thing here on Webmaster-Source lately, and it has made things look a bit tidier.

RSS Subscription Links

After reading a good post, people are likely to subscribe if they’re presented with an RSS button. Normally you put your RSS button up above the fold. If someone has just finished reading your post, are they going to scroll up and look for your button? Nope. That’s why you add a second subscription link at the end of your post. It works well, and has affected my subscriber count significantly.

That said, don’t just throw an RSS icon down after your post. Place it carefully so it fits in with some other elements (see previous section, “Related Posts”). Make sure it’s noticeable, and out of the way at the same time. Confused yet?

Conclusion

There are plenty of things you can put on your post pages, but not all of it is useful. Before putting anything in your post template, carefully evaluate whether there’s a good reason too (the same goes for your sidebar!). Also, be sure to find a good spot to put it, where it won’t get in the way, but will still serve it’s purpose.