DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Transforming Your WordPress into a Tumble-Hybrid

Transforming Your WordPress into a Tumble-Hybrid

UPDATE: I decided to release my Tumble-Hybrid theme. It is a ported sandbox version. It is much better than the asides version detailed below … though you are free to use it too, if you prefer!

So, how did I make this blog into what I called a Tumble-Hybrid? I’m going to try and explain the steps I took to make it, rather than make my own theme available for download. I think half the fun is actually learning how to do it on your own. It’s also more of a theme hack, than it is a theme. So, the steps below are what you need to do to convert your WordPress weblog into a Tumble-Hybrid. Note: You’ll have to make slight adjustments to fit your theme.

1. Find or make yourself a solid one column theme. Forget sidebars. Sidebars are normally filled with unnecessary clutter anyway, IMHO. Simplicity is the goal. You want your streamed consciousness to be the focal point, not a bunch of useless clutter. Also, less clutter means low maintenance. Low maintenance is a good thing. The whole point of a Tumble-Hybrid is to free yourself up from the over-produced weblog and experience more real-time life and living, which you will now log of course. Writing paragraphs upon paragraphs of pure punditry is time-consuming, distracting, and sucks the life and fun out of this medium. Besides, who are you writing to anyway?

2. Create some WordPress categories to file your different posts. Tumblelogs clearly separate thoughts, quotes, dialogue, video, photos, links, etc. Create these categories in wp-admin. It might be helpful too if you actually wrote down the individual category numbers for each category. You’ll need these CAT ID numbers for the index page php.

3. Grab your one column theme’s index.php file. Open the file in your text editor. Now, what’s next is very similar to Matt’s Asides method. In fact, I am using a modded version of the hack to run this Tumble-Hybrid. In essence, all I’m doing is assigning a specific div class to each of my categories so I can style each cat differently. It’s really not hard, or revolutionary. It is fun though. At any rate, the below code is what powers my index page. Splice it into your own, but be very sure to change the category ID numbers to reflect your own cat IDs, and remember your own theme’s XHTML structure. You will also have to swap the div classes to catch your own preferred styles. Note: Don’t copy and paste this code, as the conversion process I used tweaked single and double quotes and a few slashes. Scroll down to the bottom of this post and download a phps version and use that as your reference.

<?php get_header(); ?>

		<div class="content">

<?php //if (have_posts()) : while (have_posts()) : the_post(); ?>
		<?php
if ($posts)
{
function stupid_hack($str)
{
return preg_replace('|</ul>\s*<ul class="linklog">|', '', $str);
}
ob_start('stupid_hack');
foreach($posts as $post)
{
start_wp();
?>

<div class="era"><a title="Permanent link to <?php the_time('F j, Y'); ?>" href="http://www.lofitribe.com/<?php the_time('Y/m/d'); ?>"><?php the_date('','',''); ?></a></div>

<?php if ( in_category(42) && !is_single() ) : ?>
<div class="post" id="post-<?php the_ID(); ?>">
<div class="inlinestream"><?php echo wptexturize($post->post_content); ?>
<span> <?php comments_popup_link('0', '1',
'%')?> <a href="<?php the_permalink(); ?>"
title="Permalink: <?php echo 
wptexturize(strip_tags(stripslashes($post->post_title), '')); ?>"
rel="bookmark">#</a> <?php edit_post_link('e'); ?></span></div></div>

<?php elseif ( in_category(43) && !is_single() ) : ?>
<div class="post" id="post-<?php the_ID(); ?>">
<span class="tumblink"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">#</a></span>
<div class="inlineslice"><?php echo wptexturize($post->post_content); ?></div></div>

<?php elseif ( in_category(44) && !is_single() ) : ?>
<div class="post" id="post-<?php the_ID(); ?>">
<span class="tumbqlink"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">#</a></span>
<div class="cat-quotes"><?php echo wptexturize($post->post_content); ?></div></div>

<?php elseif ( in_category(45) && !is_single() ) : ?>
<div class="post" id="post-<?php the_ID(); ?>">
<span><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></span>
<div class="cat-conversation"><?php the_content('Read the rest of this entry &raquo;'); ?></div></div>

<?php elseif ( in_category(46) && !is_single() ) : ?>
<div class="post" id="post-<?php the_ID(); ?>">
<div class="inlinelink">&raquo; <?php echo wptexturize($post->post_content); ?>
<span> <a href="<?php the_permalink(); ?>"
title="Permalink: <?php echo 
wptexturize(strip_tags(stripslashes($post->post_title), '')); ?>"
rel="bookmark">#</a></span></div></div>

<?php elseif ( in_category(47) && !is_single() ) : ?>
<div class="post" id="post-<?php the_ID(); ?>">
<div class="inlinevideo"><?php echo wptexturize($post->post_content); ?><br /><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></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">
					<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h1>
				</div>
				<p class="postpredata"><?php _e('Tagged'); ?> <?php the_category(', ') ?> on <?php the_time('F dS, Y ');?> with <?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?> <?php edit_post_link('Edit', '', ''); ?></p>

				<div class="entry">
					<?php the_excerpt(); ?>
				</div>

			</div>

<?php endif; // end if in category ?>
<?php
}
}
else
{
echo '<p>Sorry, but you are looking for something that is not here.</p>';
}
?>

<div style="clear:both;"></div>

<div class="pagenavied"><?php if(function_exists('wp_pagenavi')) { wp_pagenavi('', '', '', '', 10, false); } ?></div>

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

So, the above will let you style the thoughts, quotes, dialogue, video, photos, and links categories independently. You also have the option to post the occasional full-blown weblog post. I like this feature, because sometimes I want to post a thorough post too. You can also still create as many categories beyond your “Tumbled” categories as you wish. That’s a good thing.

4. I wanted to push the independent styles beyond the index.php page too. In other words, I wanted the independent styles to appear on the single pages. This was done via a plugin by Ryan Boren: Custom Post Templates. So, download the plugin, an un-comment the section shown below:

// Add custom checks here. For example, give posts different templates
// depending on what categories they are in.
//if ( in_category(’1′) && file_exists(TEMPLATEPATH . ‘/single-cat-1.php’) )
// return TEMPLATEPATH . ‘/single-cat-1.php’;

Change all three cat numbers in the above “if,” so it corresponds to the cat number you want to style for the single page views. Copy and paste the entire “if” and repeat the cat number changes for each category style you want to display independently via single page views. Upload the plugin and activate it in admin.

5. You then have to create the independent single.php files for your theme, as called in the plugin’s “if” statements. If you look, the name for these files are already there in the plugin’s TEMPLATEPATH call ( /single-cat-1.php ). You will need to create as many of these files, according to their category numbers, as you want to display in the single page view. So, if your “Tumbled” categories have category ID’s 1, 2, 3, and 4, you will need to create and upload to your theme folder single-cat-1.php, single-cat-2.php, single-cat-3.php, and single-cat-4.php. Just make sure the cat numbers on your index.php page, the plugin, and the single-cat-#.php all correspond.

6. To group posts by day on the index page you can use the following method (again, avoid copy and paste by going to the end of the article and downloading the phps example):

Find the following line on the index:

<?php //if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php
if ($posts)
{
function stupid_hack($str)
{
return preg_replace(’|</ul>\s*<ul class="linklog">|’, ”, $str);
}
ob_start(’stupid_hack’);
foreach($posts as $post)
{
start_wp();
?>

Post the below code directly under it:

<div class="era"><a title="Permanent link to <?php the_time('F j, Y'); ?>" href="http://www.lofitribe.com/<?php the_time('Y/m/d'); ?>"><?php the_date('','',''); ?></a></div>

7. That’s it! All that is left for you to do is the CSS. You can also add as many “Tumbled” categories as you wish. Just be sure to follow the if, elseif, and else sequence. In other words, any new “Tumbled” categories have to be added as elseif calls and they have to be placed between the if and elseif statements, or you’ll get php errors. Also, for every added “Tumbled” category, be sure to add a corresponding line to the Custom Post Templates plugin and create a new single-cat-#.php file in your theme (if you want to independently style the single page view).

I went in the direction of a “hybrid” existing somewhere between the streamed consciousness publishing of a Tumblelog and necessary (IMHO) features of a weblog with less emphasis on over-produced effort. Thus, the “hybrid” nature of whatever it is that you would now call my blog.

Note: If you are copying and posting code from the examples above, watch the single quotes. For some reason the code converter I used put a few tweaked single quote marks in there. So, replace them in your text editor before you upload. There’s only two tweaked single quotes, that I could see: lines 7 and 21, in the index.php example.

Note 2: The code conversion thing I used really tweaked the single and double quotes in the displayed code above. So, just skip the copy paste, and download the example index.phps file. Download

20 Comments

  1. Posted August 8, 2007 at 7:30 am | Permalink

    Cool, thanks man. I am going to give this a shot.

  2. Posted August 8, 2007 at 9:59 am | Permalink

    Seems fairly straightforward, this is a great tut. I’m going to link it to my post on how to create a tumblog in Textpattern. Think we’ll start a blogging revolution? :D

  3. Posted August 8, 2007 at 10:08 am | Permalink

    @Nick - Feel free to send me note if you have questions while you are implementing.

    @Ben - I don’t know man. 1000 others probably already have done this, and we just haven’t bumped into them yet! LOL! I do think most people are tired of the struggle that is writing long, detailed blog posts. It’s not fun. We all have enough work to do everyday, without taking on that sort of venture … Besides, if we are going to write that much, write a book and publish it. The reward is much better, I hear. :)

  4. Posted August 8, 2007 at 10:39 am | Permalink

    @Shawn: Thanks for posting this tut. I think it’ll keep me on WP for a little while longer (sorry Ben).

    @Ben: You know it’ll be a revolution when Tumblelog-Hybrid has it’s own Wikipedia entry.

  5. Posted August 8, 2007 at 11:02 am | Permalink

    Thanks again Shawn, BTW, I think I will use your theme “Air”, it seems as if it would go perfectly :)

  6. Posted August 8, 2007 at 11:11 am | Permalink

    That theme is very, very basic. So, you will probably have a lot of fun making it your own!

  7. Posted August 8, 2007 at 11:46 pm | Permalink

    Shawn, I downloaded the file and did some test runs with it spliced into my index file. No blow ups, but I’ve got a lot of styling to do so I’m back with my previous index.php for now.

    I do have a couple questions about your categories and how you styled them. Categories 44-46 are pretty self explanatory (quotes, conversations and links, respectively). But could you explain or give examples of #’s 42 and 43? Is “inlinestream” just a thought or idea? What’s an inlineslice? Are those images?

    Also, just to clarify, anything that doesn’t fall under one of the special categories just gets displayed like a regular old blog post (i.e., you don’t need a special category for “all else”), right?

  8. Posted August 9, 2007 at 11:14 am | Permalink

    Scott - Yes, my div class “inlinestream” styles my small thoughts and/or ideas. “inlineslice” is the class I assigned to art, photos and/or pictures. You can check my style sheet for examples. Feel free to use anything you find of use there too.

    Yes, any category that isn’t called as a “Tumbled Category” on the index page is displayed as a regular blog post. So, you can still have as many regular categories as you want, and they will be displayed as regular posts. I truncate all of these posts, so the excerpt only appears on the index page. No, you don’t need a special category for the “else” call, as it calls all regular posts.

    I hope that helps clarify things for you!

  9. Posted August 11, 2007 at 12:15 pm | Permalink

    hmmm… it’s a nice idea, but it seems kind of cluttered-on all the examples I have seen. It’s just hard for me to differentiate between posts. Maybe you need a huge, stylized hr between posts, or just some more space, or an offset heading (or date, like tumblr). just my thoughts.

    p.s. I’m still looking for and easy way to make this work on wordpress.com, but it’ll probably cost me…

  10. Posted August 13, 2007 at 11:42 pm | Permalink

    hey this is pretty interesting is there anyway to keep the tumble posts out of the RSS feed I am afraid my reader might go into shock if I start posting too much. :D Also I would prefer to have a separate page with all my tumbles.

  11. Posted August 13, 2007 at 11:50 pm | Permalink

    Ronald Heft Jr. a.k.a. Cavemonkey50 is purportedly working on a plugin to take care of the feed. I’m excited about what he is doing (it posts the day’s posts to the feed once per day).

  12. Amos
    Posted August 14, 2007 at 12:08 am | Permalink

    This is great. I started fiddling with my site a couple weeks ago, trying to get a more hybrid type blog myself. What I like to call a mutt in my mind. I also settled on using Matt’s inline asides route, but I only used one div and styled from there. Never even considered using elseif’s. Probably never would have so a big thanks for that.

    I think, still playing with the hybrid idea, but I think I like the use of sidebar(s). I agree they tend to get messy. The impulse is to use them like junk drawers, and they don’t really work in a pure tumblelog type setting, but, if kept simple, I think they can keep the content/tumblelog area clutter free.

    What makes a hybrid I suppose is the question. The use of comments? Your site looks more like a traditional tumblelog to me. Mine is still flirting with a traditional weblog, but a mutt can be just about anything so suppose the question is besides the point.

    In any event I’m gonna have to play around with this method of yours. I really appreciate you sharing the knowledge.

  13. Posted August 14, 2007 at 12:21 am | Permalink

    Hello, Amos! Thanks for the thoughts. You asked:

    “What makes it a Tumble-Hybrid?”

    Well, the simple fact is you can’t take an already existent blog and turn it into a Tumblelog. I’m sure those who began as a full-blown Tumblelog would be the first to say so! So, I tried to land somewhere between the two, because I wasn’t about to dump all of my past content and start all over. There is also the comment thing too. Also, I have the ability to post lengthy, essay-like content. So, there’s a number of reasons this is a “Tumble-Hybrid.” It looks like one, and it acts like one, but it has the functionality of a full-blown weblog too.

    “I really appreciate you sharing the knowledge.”

    No problem. There’s two kind of people out there, IMHO. Those who happily admit they stand on other people’s shoulders to see further, and those who pretended they thought of something all on their own for personal glory. This is a community thing bro. Any knowledge I have was given to me freely by others. So, give it back, I say.

    Have fun!

  14. Posted August 14, 2007 at 12:58 am | Permalink

    Well said Shawn, and I couldn’t agree more with your take on community. I’m no Wordpress Wizard, and probably will never put in the time to become one, but I feel it’s important to be generous with what little I’ve learned, and never fail to acknowledge and support the folks that I’ve learned from, and will learn from.

    As far as the hybrid, I agree it’s a combination of snippets and full content. Seems to be taking the idea of asides or sidenotes and running with it.

    Thanks again for the info Shawn.

  15. Posted August 14, 2007 at 1:41 pm | Permalink

    I’ve also been working on something like this; on July 14th I published Crear un Tumblelog con WordPress (es) and just last night I finally published a “final-beta” version: Typographic (english documentation) — yukei.net

  16. Posted August 17, 2007 at 12:35 am | Permalink

    Hey Shawn,
    Great tutorial. On your main page, how are you grouping multiple entries under one date? I might be missing it, but I don’t see it in your code sample.

    Thanks!

  17. Posted August 17, 2007 at 12:54 am | Permalink

    Hey, Jordan. I added it to the tut. See step No.6.

  18. Posted August 17, 2007 at 1:26 am | Permalink

    Oh man, thanks Shawn!

    I was using the_time() instead of the_date(). No wonder I couldn’t see how it worked.

    Thanks again!

  19. Posted September 9, 2007 at 3:56 pm | Permalink

    Very cool design! Useful information. Go on!H

  20. Posted February 19, 2008 at 2:23 am | Permalink

    Hm, for some reason now my tags do not show up. Eeek, what shall i do?

19 Trackbacks

  1. By TCRA » Blog Archive » It Begins… on August 8, 2007 at 11:11 am

    [...] I will transform this into a “hybrid tumblog”. Shawn Anthony over at Lo-Fi Tribe did a wonderful tutorial for creating this. I will be starting with a simple one column theme, which happens to be created [...]

  2. [...] had posted instructions on transforming your WordPress into a Tumble-Hybrid, which I happen to be working on right [...]

  3. [...] in line is that this is still a tumblog. Used Shawn’s tutorial as a starting point but quickly diverged from his method and invented my own. But a tumblog it [...]

  4. By Photo Matt » Tumble-Hybrid on August 13, 2007 at 10:18 pm

    [...] Transforming Your WordPress into a Tumble-Hybrid, we’re halfway there. Now someone should do a few awesome Tumblr-like styles around it. Projectionist is the first I saw and a great example of the medium. « On Wallstrip! Comment » [...]

  5. By Wordpress Tumblr · Bakkel dot com on August 14, 2007 at 1:08 am

    [...] is de nieuwe manier om links, foto’s, filmpjes etc te delen. Nu is het ook mogelijk om je Wordpress installatie om te bouwen naar een soort van Tumblr log. Erg handig, want het enige dat ik nog mis aan Tumblr is de mogelijkheid om te [...]

  6. By shevy.dk » Mine del.icio.us-links den 14. august on August 14, 2007 at 8:31 pm

    [...] Transforming Your WordPress into a Tumble-Hybrid - SÃ¥dan laver du din blog om til en blog-lifestream-hybrid (sÃ¥ er du klar, nÃ¥r Jaiku definitivt dør som lifestream-medie om to-tre mÃ¥neder) Dette indlæg blev skrevet af René den onsdag 15. august 2007 kl. 02:30 og er gemt i Links. Permalink. Du kan følge kommentarerne til indlægget via følgende feed: RSS for dette indlæg. Skriv en kommentar eller send et trackback. « SÃ¥ slap dog af, København! [...]

  7. By openswitch » WordPress Tumblog How-to on August 15, 2007 at 12:39 pm

    [...] 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 [...]

  8. By Tumble Your Wordpress at Rule Of One on August 16, 2007 at 12:03 am

    [...] have been a number of tutorials offered at some great sites on how to do this. (Open Switch and Lo-Fi Tribe just to name a few) All their methods are certainly sound, but I’ve got a slightly different [...]

  9. By links for 2007-08-16 | KevinDonahue.com on August 16, 2007 at 4:18 am

    [...] Transforming Your WordPress into a Tumble-Hybrid | Lo-Fi Tribe (tags: blogging blogs howto tutorial wordpress tumblelog tumblog) [...]

  10. By » 0×121 - Tumble by Jordan Hofker on August 17, 2007 at 1:08 am

    [...] was inspired to do it by Shawn of Lofitribe, who wrote a great tutorial on how to go about it. I modified his method somewhat to accommodate [...]

  11. By ryan’s blog » links for 2007-08-17 on August 17, 2007 at 8:28 am

    [...] Transforming Your WordPress into a Tumble-Hybrid Great write-up on hacking WordPress code to create a Tumble-log hybrid that treats different types of content with different styles. (tags: howto wordpress tutorial blogging hacks tumblelog) [...]

  12. [...] Then after reading Ben Gray’s article on implementing the tumble-hybrid approach into the Texpattern CMS. I thought this would be a great format to develop and use. Allowing me to post some quick posts and lengthier content that allow comments and be easily accessed through archives as well. “The whole point of a Tumble-Hybrid is to free yourself up from the over-produced weblog and experience more real-time life and living, which you will now log of course. Writing paragraphs upon paragraphs of pure punditry is time-consuming, distracting, and sucks the life and fun out of this medium. Besides, who are you writing to anyway?” Shawn Anthony [...]

  13. [...] Lo-Fi Tribe - Transforming Your WordPress into a Tumble-Hybrid [...]

  14. [...] thinking of making A Penguin In My Fridge a hybrid tumblog… [Openswitch] [Lo-Fi Tribe] [IAMWW] [Rule Of One] « The IT Crowd [...]

  15. By Study in execution: Tumblr at Like It Matters on August 30, 2007 at 9:41 am

    [...] popped up.  Gelato is an open source software package you can run on your own server.   And folks have been tweaking their WordPress set ups to mod asides into more full-fledged [...]

  16. [...] …a tumblin’ tumblelog… « prev post · September 6, 2007 » Transforming WordPress Into A Tumblelog A good tutorial on how to get WordPress to auto-style your posts based on category so that each [...]

  17. By A penguin in my fridge » Hybrid Tumbling on October 6, 2007 at 5:40 pm

    [...] thinking of making A Penguin In My Fridge a hybrid tumblog… [Openswitch] [Lo-Fi Tribe] [IAMWW] [Rule Of One] This entry was written by matallo and posted on Aug 28, 2007 at 11:35 pm. [...]

  18. By Tumble Your Wordpress on December 22, 2007 at 11:57 pm

    [...] have been a number of tutorials offered at some great sites on how to do this. (Open Switch and Lo-Fi Tribe just to name a few) All their methods are certainly sound, but I’ve got a slightly different [...]

  19. [...] working on converting this website into a partial tumblelog. I really should thank Ben Gray and Shawn Anthony for their posts about creating a tumblelog with WordPress. I’ve done this, because I wanted [...]

Post a Comment

Your email is never published nor shared. Required fields marked *

*
*