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 »'); ?></div></div>
<?php elseif ( in_category(46) && !is_single() ) : ?>
<div class="post" id="post-<?php the_ID(); ?>">
<div class="inlinelink">» <?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
Related Posts:
Ich hab ne gute seite gefunden.
Hier kann man gut und günstig Urlaub buchen schaut mal rein
http://urlaubundlastminute.de
I will implement here today!
very cool!!!
hi there!
I made with photoshop anime myspace banners.
take a look at them:
http://tinyurl.com/62×3b5
Thanks for your website ;-) xxoxo
What method is being used to gather the feeds’ items?
I would like to see the inscription “to be continied”:-D
Hm, for some reason now my tags do not show up. Eeek, what shall i do?
Very cool design! Useful information. Go on!H
Oh man, thanks Shawn!
I was using the_time() instead of the_date(). No wonder I couldn’t see how it worked.
Thanks again!
Hey, Jordan. I added it to the tut. See step No.6.
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!
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
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.
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!
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.
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).
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.
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…
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!
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?
That theme is very, very basic. So, you will probably have a lot of fun making it your own!
Thanks again Shawn, BTW, I think I will use your theme “Air”, it seems as if it would go perfectly :)
@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.
@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. :)
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
Cool, thanks man. I am going to give this a shot.