Coding a WordPress blog for Twitter integration
Tuesday, June 2nd, 2009Twitter is often likened to the evolution of blogging and compared to it in a competitive sense, but I think that isn’t really a fair comparison. Twitter is definitely a streamlined version of blogging, but to accomplish that Twitter had to strip out many integral features of blog software. In my opinion one of the best implementations of both blogging and Twitter is to combine them.
Last year I coded techognized (above) to integrate twitter posts and traditional longer form blog posts on the same page, and more recently, Boing Boing Gadgets (below top) has just redesigned their site to display tweet-like mini posts in the same column as normal posts. In hindsight, I like BBG’s approach better, so with simpler.me (below bottom) – my latest site design – I coded twitter inline with other blog posts.
Here is how to do that.
It’s actually pretty simple, if you know the basics of editing WordPress theme files. Before breaking out your text editor of choice to code, here are a few steps to lay the groundwork:
- Create a WordPress category (I named mine “Twitter”) and note the category ID number.
- Install the Twitter Tools plugin and configure it to create blog posts from your tweets, filed in the category you created in step 1.
Now to the coding. Our objective here is to remove the blog post’s title based on if the post is a tweet or not. To do this we will use a simple PHP ‘if’ function in the site’s index.php file:
<?php if (!in_category(‘[Twitter category ID number]‘)) { ?>
[Information your are cutting out in Twitter posts goes here -- title/header, etc.]
<?php } ?>
Basically, we are saying “If a post is NOT in the Twitter category, show the header/title/etc information”. Here is how that would look in the default WordPress Kubrik theme’s Loop:
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id=”post-<?php the_ID(); ?>”>
<?php if (!in_category(‘[Twitter category ID number]‘)) { ?>
<h2><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2>
<?php } ?><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; ?>
<div class=”navigation”>
<div class=”alignleft”><?php next_posts_link(‘« Older Entries’) ?></div>
<div class=”alignright”><?php previous_posts_link(‘Newer Entries »’) ?></div>
</div><?php else : ?>
<h2 class=”center”>Not Found</h2>
<p class=”center”>Sorry, but you are looking for something that isn’t here.</p>
<?php get_search_form(); ?><?php endif; ?>
Your blog now should display posts from twitter without the title/headline, while leaving your other posts untouched. You can use this same method to edit out the author and timestamp if you wish. Remember, you may have to touch up your CSS afterward in case removing the header fouled up your margins or spacing.
Hope this post has been useful!
