How-to: Lifestream with WordPress

Are you looking to implement a lifestreaming / microblogging solution for WordPress that makes it easy to share links to interesting content along with regular blog posts?

Why lifestreaming?

Lifestreaming fosters a more direct, personal, and valuable relationship with your readers by making your blog more open and “real”. Your blog is your mothership and microblogging is a great way to keep your mothership unique and fresh.

Can I do it with WordPress?

I took a look around and there are a few plugins that provide this functionality along with a theme or two that have it built in. If you like the themes that offer this functionality then by all means go grab one of those and get microblogging! When it comes to plugins I am a big believer in home-rolling your own solution if it isn’t too hard. This has three distinct and important advantages over using a plugin:

• Speed: Your blog uses fewer resources, staying light and quick.
• Future-proof and reliable: Fewer moving parts, less likely to break.
• Worry Free: Avoid worrying about unsupported/outdated plugins.

As you can see, I think a custom solution is the clearly the best way to go. Let’s learn how to set up our lifestream inside a basic WordPress theme sans plugins.

What we need

The first step is to determine what new types of posts you want to include in your lifestream: photos, links, quotes, etc. For this example we are going to use links but you can replicate this same functionality in any of the above categories.

Here are the two important pieces we need implement to get up and running:

• Post Setup: Create a publish a post for our new links category.
• Presentation Layer: Present readers with a unique view of posts in our special links category.

Post Setup

Below are the quick and easy steps for creating your new post:

1. Log in to your WordPress admin panel and create a new post.
2. Add a new category called links and make sure the box is checked for that category.
3. Add a new custom field to the post by scrolling down to the Custom Fields section of the post editor. For the Name use link and for the Value type a test URL.

Now your post is ready, go ahead and publish it. If you were following these steps for something else, like quotes or photos, name your category and custom field appropriately (eg. quotes or photos).

Presentation Layer

For the presentation layer we need to focus on two template files: index.php and single.php. Open up your theme’s index.php template file and look for the loop.

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
  <div <?php post_class() ?> 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') ?> <!-- by <?php the_author() ?> --></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; ?>

We need to tell WordPress to display our links category posts differently on our homepage. We also want to style the post title differently to indicate it is a link, not a regular blog post. Let’s do just that by replacing line 4 (which displays the post title) with this:

<?php if ( in_category( 'links' )) : ?>
  <div class="link">Link</div>
  <h4><a href="<?php echo get_post_meta($post->ID, 'link', true); ?>" rel="bookmark"><?php the_title(); ?></a><span><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">#</a></span></h4>
<?php else : ?>
  <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<?php endif; ?>

Below is a line-by-line breakdown of the code we just inserted.

1. If we are in the category named links.
2. Output a basic div containing the word “link” that we can style later. This is to notify readers that this post is a link and not a regular blog post.
3. Output the link we specified in the Custom Fields section of our post and a hash (#) linking to our original post. The title of our post now links to the external link instead of the blog post itself.
4. If we are not in the category named links use this code instead.
5. Output the normal post title wrapped in a link to the original post.
6. End the If statement.

We need to repeat the same process for the single.php template.

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
  <h1><?php the_title()?></h1>
  <p><?php the_tags('Tags for this entry: ', ', ', '.'); ?></p>
  <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="entry single">
      <?php the_content(); ?>
    </div>
    <p class="postmetadata">This entry was posted by <?php the_author() ?> at <?php the_time('g:i a') ?> on <?php the_time('F jS, Y') ?>.</p>
  </div>
<?php endwhile; ?>
<?php comments_template('', true); ?>
<?php else : ?>
<?php endif; ?>

Let’s replace the post tags (line 4) with a message to visit the external link.

<?php if ( in_category( 'links' )) : ?>
  <p>Visit this link:<br /><a href="<?php echo get_post_meta($post->ID, 'link', true); ?>" rel="bookmark"><?php echo get_post_meta($post->ID, 'link', true); ?></a>
<?php else : ?>
  <p><?php the_tags('Tags for this entry: ', ', ', '.'); ?></p>
<?php endif; ?>

The code we just inserted will display the external link when we are in the links category and the tags for the post when we are not.

Ready to rock!

Now use your finely tuned CSS skills to get everything looking great and you are ready to rock!

Bonus Tip: WordPress provides category specific feeds out of the box, so why not use them? Your readers will have the option to pick and choose what part of your lifestream they want to follow.

Enjoy this post? Read more like it in Tutorials.