openswitch

So you like the way Tumblr does blogging eh? But you want to use the much more robust WordPress blogging software to build your own tumblog? Well, that’s what I’m writing about here, how to make a tumblog with WordPress.

First things first. You need to go read Shawn’s article on how he made a tumblog with WordPress. That was my starting point, and really he was one of the main reasons I got turned on to tumblogging. As you’ll see in this post, however, I’ve done just a few things differently to accomplish my own goals.

Step #1: Create categories

A WordPress tumblog uses categories to display posts differently on the front page and on single pages. I have eight categories total. They are Journal, Conversation, Photo, Podcast, Quote, Thought, URL and Video. Before I went to a tumblog style I had something like thirty categories which I was using to categorize my posts by topic. With a tumblog, however, the categories are not going to be used to differentiate posts based on topic. Instead they’ll be used to display them differently based on media type. It’s easier to manage your posting, in this case, by deleting all the categories you previously had and just have available the cats you’ll use for your tumblog. We’ll be installing a plugin later with which we’ll tag our posts by topic instead of using categories.

Oh, and as you create your categories it’ll help to write down their ID number. When we call a category in our index.php we’ll need to refer to it by its ID, not its name.

Step #2: Let’s get hackin’!

OK, if you followed my advice and read Shawn’s tutorial linked above, you’ll notice that he’s using Matt’s Asides technique for his index.php. This includes nifty stuff like wp-texturize and other magical formulas. However, I didn’t have the need for the asides technique. Instead, I just established a standard Loop on my index.php and then put in a bunch of conditional php statements. Here’s a trimmed down copy of my index.php.

<?php get_header(); ?>

<div id=“content”>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div class=“posted”><h2><a title=“Permanent link to <?php the_time(‘F j, Y’); ?>” href=“http://openswitch.org/<?php the_time(‘Y/m/d’); ?>”><?php the_date(’‘,’‘,’‘); ?></a></h2></div>


<!— conversation —>



<?php if ( in_category(4) && !is_single() ) : ?>

<div class=“post”>

<span class=“permalink”> <a href=”<?php the_permalink() ?>” rel=“bookmark” title=“Permanent Link to <?php the_title(); ?>”>¶</a></span>

<div class=“post_body”>

<div class=“conversation”>

<?php the_content(); ?>

</div>

</div>

</div>


<!— journal —>



<?php elseif ( in_category(6) && !is_single() ) : ?>

<div class=“post”>

<div class=“post_body”>

<div class=“journal”>

<h3><a href=”<?php the_permalink() ?>” rel=“bookmark” title=“Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></a></h3><div class=“comments_invite”><?php comments_popup_link(‘No comments yet’, ’1 comment so far’, 

‘% comments so far (is that a lot?)’, ‘comments-link’, ‘Comments are 

off for this post’); ?></div>

<?php the_content(’[Continue reading this entry …]’); ?>

</div>

</div>

</div>


<!— ********************************** —>



<?php else: // If it’s a regular post or a permalink page ?>
			<div class=“post” id=“post-<?php the_ID(); ?>”>
				<div class=“posttitle”>
					<h3><a href=”<?php the_permalink() ?>” rel=“bookmark” title=“Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></a></h3>
				</div>
              <?php the_content(); ?>
				<p class=“postpredata”><?php _e(‘Tagged:’); ?> <?php the_category(’, ‘) ?> <br /><?php edit_post_link(‘Edit’, ‘’, ‘’); ?>
			</div>

<?php endif; // end if in category ?>




<?php endwhile; else: ?>

<p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p>

<?php endif; ?>




<div class=“navigation”><?php posts_nav_link(’ — ‘, __(’« Previous Page’), __(‘Next Page »’)); ?></div>

</div>

<?php get_footer(); ?>

OK, now I only included two categories in that snippet because the rest of my categories are coded the same way except for the cat ID. So to add more category calls to your index.php you’ll just duplicate the code you need. Also, notice that when we use the <?php the_date(); ?> call, it only displays the date once per page. If, however, you used <?php the_time(); ?> it would display the date or time upon each instance of the code.

Oh, and you’ll notice that on my site there are permalinks that magically appear to the right when you hover over most posts. To accomplish this you use the code I gave you above:

<span class="permalink"> <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">¶</a></span>

and use this styling:

.post span.permalink {
    border-width: 0px;
    font-size: 12px;
    width: 6px;
    height: 9px;
    position: relative;
    float: right;
    top: 0px;
    right: 0px;
    display: none;

}




.post:hover span.permalink {
    display: block;

}

Of course, feel free to mess with the styling of your front page and feel equally free to add and remove <div>s to suit your needs.

Step #3: Install tagging plugin

You want to use the best tagging plugin around, and that’s Ultimate Tag Warrior. This will come in handy because you’ll be able to describe what each post is about with tags, leaving the categories free to display the posts differently.

See, I might post a video about drugs, and that would be in the category “video”. I then might write a text entry about drugs, that would go in the category “journal”. But I’d want to tag them both with the tag “drugs” because while the media is different (video vs. text) the content is the same. Tags allow me that flexibility.

Step #4: Style individual pages

If you’ve gotten this far and your blog still works, congrats! Stuff like this can be complicated and it almost always involves a lot of trial and error. Don’t give up if it doesn’t work at first. Keep hacking!

You’ll notice that while the categories will be styled differently on the front page, we haven’t yet told WordPress how we’d like them to be styled on the individual post pages. To do this we first must create a new file. Create a new blank file on your computer and save it as “single.php” Now, upload this to your theme’s directory. So, for me, I upload it to openswitch.org/wp-content/themes/defrotzed/single.php since my theme is called “defrotzed.”

So now, when someone clicks on a permalink to view an individual post page, WordPress will automatically recognize this file as the one to use to display the content. That’s why it’s important that it be called “single.php” and not anything else. WordPress is looking for this file by default.

The code that goes into single.php is exactly the same as the front page except for two things: displaying our Ultimate Tag Warrior tag list and a slight tweak to the conditional statement. Here, again, is a snippet of my single.php file:

<?php get_header(); ?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div class=“posted”><h2><a title=“Permanent link to <?php the_time(‘F j, Y’); ?>” href=“http://openswitch.org/<?php the_time(‘Y/m/d’); ?>”><?php the_date(’‘,’‘,’‘); ?></a></h2></div>

<!— conversation —>



<?php if ( in_category(4) && is_single() ) : ?>

<div class=“post”>

<span class=“permalink”><a href=”<?php the_permalink() ?>” rel=“bookmark” title=“Permanent Link to <?php the_title(); ?>”>¶</a></span>

<div class=“post_body”>

<div class=“conversation”>

<?php the_content(); ?>

</div>

</div>

</div>

<div class=“tags”><?php UTW_ShowTagsForCurrentPost(“commalist”, array(‘last’=>’ and taglink‘, ‘first’=>‘tagged: taglink‘,)) ?></div>

<br /><br />


<!— journal —>



<?php elseif ( in_category(6) && is_single() ) : ?>

<div class=“post”>

<div class=“post_body”>

<div class=“journal”>

<div class=“comments_invite”><?php comments_popup_link(‘No comments yet’, ’1 comment so far’, 

‘% comments so far (is that a lot?)’, ‘comments-link’, ‘Comments are 

off for this post’); ?></div><?php edit_post_link(‘e’, ‘<span class=“editlink”>’, ‘</span>’); ?><h3><a href=”<?php the_permalink() ?>” rel=“bookmark” title=“Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></a></h3>

<?php the_content(); ?>

</div>

</div>

</div>




<div class=“tags”>

<?php UTW_ShowTagsForCurrentPost(“commalist”, array(‘last’=>’ and taglink‘, ‘first’=>‘tagged: taglink‘,)) ?>

</div>


<!— ********************************** —>

<?php else: ?>
			<div class=“post” id=“post-<?php the_ID(); ?>”>
				<div class=“posttitle”>
					<h3><a href=”<?php the_permalink() ?>” rel=“bookmark” title=“Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></a></h3>
				</div>
             <?php the_content(); ?>
				<p class=“postpredata”><?php _e(‘Tagged:’); ?> <?php the_category(’, ‘) ?> <br /><?php edit_post_link(‘Edit’, ‘’, ‘’); ?>

		       </div>



<?php endif; // end if in category ?>

<?php if ( comments_open() ) : ?>

<?php comments_template(); // Get wp-comments.php template ?>

<?php endif; ?>

<?php endwhile; else: ?>

<h2>uh oh.</h2>

<p>Sorry, no posts matched your criteria. Wanna search instead?</p>
				<?php include (TEMPLATEPATH . ‘/searchform.php’); ?>

<?php endif; ?>


<?php posts_nav_link(’ — ‘, __(’« Previous Page’), __(‘Next Page »’)); ?>



<?php get_footer(); ?>

So now the tags will be displayed on individual pages, not cluttering up the front page. Too, notice that I’m only calling the comments_template if comments are open. This was important to me because if comments aren’t open then I didn’t want anything to be displayed, I didn’t want any “Sorry, comments are closed” statement or anything. Makes for a cleaner look, I think.

Step #5: Style your other pages accordingly

You now have the knowledge you need to style other pages the same way. Do you want your search results page to style posts differently based on category? How about other pages you might have? Play around with it until it’s exactly how you want it. And don’t worry, if you screw up and have to start from scratch it’s OK. If you don’t break WordPress at least once in your life you aren’t trying anything new. BE DARING!

Last step: Full feed makover

The main problem with tumblogging (well, not really a problem, more like a challenge) is the feed. Tumblogs typically are updated 10+ times per day. If you keep your stock WordPress feed then your subscribers will be getting 10+ feed updates every day. This will turn many people off to your site. No one likes a swamped inbox; be it an email inbox or a feed reader inbox.

At the same time, however, you likely still want to share with your readers all the cool links you find, and all the beautiful pictures you come across. You need a solution specifically for a WordPress tumblog. The solution is to update your feed only once per day but have that one update, that one feed item, include all of your posts, links, photos, vids, etc. Your content still gets disseminated but you’re not bogging down your readers with the super-human task of reading 10+ items every day.

You could try to hack something out yourself to accomplish this feed feat, but why reinvent the wheel? Ronald Heft Jr. has already done the work for you with his Tumblefeed plugin! Simply install it, activate it and your feed will update once per day at midnight. Ron was so kind as to work with me on this solution and I can attest that this plugin is very good.

Now, basically what the plugin will do to your feed by default is take all your posts, strip the titles, and just serve up the content of the post. This is fine for most people, but I wanted a little more versatility in my feed so I changed it a little bit. The section I needed to change in the plugin is this:

// Normal WordPress loop outputting the excerpts
		while ($dayPosts->have_posts()) : $dayPosts->the_post();
			// Use get_the_excerpt instead of the_excerpt_rss since we're modifing the_excerpt_rss (aka endless loop)
			$content .= '<p>' . get_the_excerpt() . '</p>';
		endwhile;

Note that this same section is repeated further down in the plugin but lists “get_the_content” instead of “get_the_excerpt”.

I changed the above section of the plugin to this:

// Normal WordPress loop outputting the excerpts
		while ($dayPosts->have_posts()) : $dayPosts->the_post();
			// Use get_the_excerpt instead of the_excerpt_rss since we're modifing the_excerpt_rss (aka endless loop)
                      if ( in_category('6') )
				$content .= '<p>' . the_title('<strong>', '</strong><br />', false) . ' ' . get_the_excerpt() . '</p>';
                      elseif ( in_category('8') )
				$content .= '<p>' . the_title('<strong>', ':</strong> ', false) . ' ' . get_the_excerpt() . '</p>';
                      elseif ( in_category('1') )
				$content .= '<p>' . '<em>Thought:</em> ' . get_the_excerpt() . '</p>';
                      elseif ( in_category('14') )
				$content .= '<p>' . '» ' . get_the_excerpt() . '</p>';
                      else
			$content .= '<p>' . get_the_excerpt() . '</p>';
		endwhile;

So now, category 6, 8, 1 and 14 display differently in my feed too! If a post is not in one of these categories, it gets displayed in accordance with the “else” statement; in this case just the content wrapped in <p> tags to establish some spacing between posts in the feed. Remember though, that if you change the plugin for “get_the_excerpt” then you have to change it further down in the plugin for “get_the_content” in the same way.

Conclusion

OK, you should be all set to go! If you found this tutorial helpful please let me know in the comment form below! It makes me feel all warm and fuzzy inside when someone uses something I write.