HOWTO: Integrate Tumblr with Wordpress
[tags]tumblr, tumblelogs, wordpress, themes[/tags]
One of my absolute favorite things about Tumblr is that users are trusted with an extreme level of customization if they choose to take advantage of it, instead of having to settle with some other theme that ends up being totally disconnected from the rest of your website. Although an inexact science, It’s actually not too hard to create a custom Tumblr theme that looks just like your Wordpress install (or any other blog system, really). All it takes is some CSS/HTML knowledge, the ability to identify different sections of your Wordpress theme, and a basic understanding of how Tumblr formats its posts. The steps are as follows:
-
1. Pick base theme
2. Move Tumblr’s CSS to an external file (optional)
3. Copy/paste header from Wordpress
4. Copy/paste Tumblr theme code
5. Copy/paste footer from Wordpress
I created a template file based on Litewire that shows exactly what needs to go where. For a lot of people, this may be the only file you need without having to read the whole HOWTO. If you’re using another Tumblr style, hopefully this article is “liberal arts” enough to teach you how to recognize equivalent sections of code.
1. Pick Base Theme
The easiest way to start is by picking an existing theme that looks fairly close to what your Wordpress site looks like and want your end result to be. For example, my tumblelog is based on the guts of Litewire, then I replaced the theme’s header and footer with my site’s generated HTML and external stylesheet.
2. Move Tumblr’s embedded CSS to an external stylesheet (and why you would want to)
Speaking of external stylesheets, the very first thing I did when customizing my layout was move all the embedded Tumblr CSS to a file on my server. This serves two purposes: 1) it’s quicker to edit when doing lots of tweaking, and 2) it makes the Tumblr theme code cleaner and more manageable.
BTW, to see the actual theme code, first select on the theme you want to start from, then select Custom.
In the Litewire theme, you can move everything between the <style type=â€text/cssâ€></style> and tags. I cut and pasted it into a file named tumblr.css in my Wordpress theme directory. It should look something like this. Make sure you remove the <style></style> tags from your theme when you’re done, and if you want you can also take out the list of meta tags under Tumblr’s <head></head> tag and replace all the {color:Background} markup in the CSS file with actual colors.
By now you can paste this in the top of your notepad document:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>{Title}</title>
<link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico" >
<link rel="stylesheet" href="http://www.yoursite.com/wp-content/themes/yourtheme/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.yoursite.com/wp-content/themes/yourtheme/tumblr.css" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss"/>
</link></head>
<body></body></html>2. Copy/Paste header from Wordpress
This is the part that gets a bit unscientific. I can show what I used, but since every wordpress theme is different this may take some experimentation. Start by viewing the source of the page you want Tumblr to look like. Search for your <body></body> tag, and you should see a div tag close if not immediately after that marks the beginning of your actual stuff. Mine says <div id=â€contentâ€></div>. You’ll want to copy from this div tag down until right before the div for your individual posts (mine says <div class=â€ncolâ€></div>). You can look at your header.php file to get a hint of where the header stops, but remember you still have to paste the generated code from a browser. Copy this whole section and paste it at the bottom of your text file.
3. Copy/Paste tumblr theme code
Now look in your Tumblr theme for a div tag with the id “contentâ€. This is whole section is what tells tumblr how to format each of your posts. Scroll through the code and you’ll notice blocks for regular posts without titles, regular posts with titles, photos, quotes, links, conversations, videos, and finally the footer that contains the previous/next links. I’ll probably go into more detail of what other tags are available in a separate post (like different ways to format the date), but the default code works for the purpose of this article. Copy this text into your notepad file.
<div id="content">
{block:Description}
<div id="description">
<div>{Description}</div>
</div>
{/block:Description}
{block:Posts}
<div class="post">
{block:NewDayDate}
<div class="date">
<div class="date_brick">
{ShortMonth}<br />
{DayOfMonth}{DayOfMonthSuffix}
</div>
{ShortDayOfWeek}
</div>
{/block:NewDayDate}
<img src="/themes/5/permalink.gif"
class="permalink" alt="permalink"/>
{block:Regular}
<div class="regular">
{block:Title}<h2>{Title}</h2>{/block:Title}
{Body}
</div>
{/block:Regular}
{block:Photo}
<div class="photo">
<img src="{PhotoURL-400}" alt="{PhotoAlt}"/><br />
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Photo}
{block:Quote}
<div class="quote">
<div class="quote_text">{Quote}</div>
{block:Source}
<div class="source">— {Source}</div>
{/block:Source}
</div>
{/block:Quote}
{block:Link}
<div class="link">
{Name}
{block:Description}
{Description}
{/block:Description}
</div>
{/block:Link}
{block:Conversation}
<div class="conversation">
{block:Title}
<h2>{Title}</h2>
{/block:Title}
<ul>
{block:Lines}
<li class="{Alt}">
{block:Label}
{Label}
{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
</div>
{/block:Conversation}
{block:Video}
<div class="video">
{Video-400}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Video}
</div>
{/block:Posts}
<div id="footer">
{block:PreviousPage}
« Previous
{/block:PreviousPage}
{block:NextPage}
Next »
{/block:NextPage}
<div id="credit">
Powered by Tumblr
</div></div></div>5. Copy/Paste footer from Wordpress
If you have a specific footer you want to use, copy it from your website’s source code and paste it in. To complete the code, add to finish closing our previous tags.
Now the moment of truth! Copy everything from notepad and paste it into Tumblr’s theme editor. Wait for the preview to update and hope that no stray div tags screw up your intended result. It probably took me about an hour at this point to tweak my CSS and Tumbl-code until I felt like it was really mine. If everything looks good enough, scroll down to the bottom to make your first save.
If this HOWTO was helpful in any way (it’s certainly long enough, surely there’s something good in here), I’d appreciate a quick tumble link back to this page to help spread the word around. Feel free to ask questions in the comments, but be aware that I really have no knowledge of the Wordpress theme used on any site but this one. I don’t mind helping you figure it out, just be gentle. ^_^
Tips and tricks:
- Use notepad to organize your code rather than continuously monkeying around with the editor.
- Make backups! As you integrate each section, save a copy in notepad with a different filename. That way if you screw something up, you can go back to your last known good version.
23 Comments, Comment or Ping
ZuD
I find this fascinating!
Do you think I could do this with my Typepad Blog?
Apr 18th, 2007
Adora
I can’t think of any reason why you wouldn’t be able to. Link me to your typepad blog if you want and I’ll help you pull the right pieces out.
Apr 19th, 2007
David Merwin
I have been piping in the feed from my tumblr to my wordpress site. I setup my tumblr with a custom domain… you don’t have to, but I had it doing nothing anyway. Then I used the plug in inlineRSS and I syndicate the feed from the tumblr. I do it in a sidebar for the 5 latest and a page devoted to all the posts. It’s pretty sweet.
you can get the plug in here: http://www.iconophobia.com/wordpress/?page_id=55.
It’s not as “integrated” as the approach here, but saves me the work, and the final result works better for me.
I did a quick and dirty, but using the xslt you can create a pretty flexible format.
Apr 19th, 2007
Adora
I’ve known there are plugins like that out there, but keeping the formatting intact is a big deal for me. I’m sure it’s just a matter of time until there’s a wordpress plugin that uses the tumblr api anyway. =]
Apr 19th, 2007
ZuD
I just saw your reply and decided to stay in the tumblr platform and hope their upgrades and pro offerings suit my needs. Thanx
Apr 21st, 2007
kasad
hello
i didn’t make this integrate. i am using theme connections and have got little english. please help me.
May 16th, 2007
Matt Herzberger
I just wanted to pass along that I made a Tumblr inspired theme for Wordpress called MH_Tumblr. Take a look.
Jul 19th, 2007
ThePete
What would be really nice is something that integrates Tumblr posts directly into the WP database, like Twitter Tools does brilliantly for Twitter posts. I’ve toyed with rss feeders, like WP-O-Matic, but none seem to work 100%. in WP-O-Matic’s case, for me, it doesn’t seem to notice when a feed hasn’t been updated with new posts so it just imports the same posts again. This doesn’t seem to happen to all users just some of us. WP Autoblog imports just fine, but you can’t specify which category the posts go into–they’re just stuck in a non-existent category called “Array.” I’m sure I could tweak it to work for a specific category, but don’t have the time. I may just have to stay up late to do that if a better alternative doesn’t come along soon. Thanks for this idea, though! Very cool!
Sep 28th, 2007
ThePete
Actually, just got RadGeek’s FeedWordPress plugin to work–it’s a little chunky, but in the end seems to work fine. Get it here: http://projects.radgeek.com/feedwordpress
Sep 28th, 2007
MadMonk
Hey, I just found this post and needed some help. I’ve customized my tumblr page, but want it to have the functionality of wordpress, that way I can have different sections to my site. Can you help? I’ve mapped my domain (madmonktoys.com) to tumblr.
Oct 6th, 2007
ThePete
I take it back–feedwordpress seems to like to keep reposting the most recent item in the rss feed. Very annoying, so I junked it. Back to square one. YAY!
And is it me or are WP plugin programmers not very creative? There’s that one plugin that allows you to do Tumblr-style quick posting–that plugin is called “Quick Post” and the option pages for FeedWordPress are both called “Syndication” Wow, care to be a bit more vague? Sheesh… sorry to vent!
Oct 9th, 2007
Nakul Goyal
Sounds interesting. I will give it a shot maybe sometime this weekend. Also, is there a way to import Tumblr content into Wordpress or something like that ?
Jan 9th, 2008
Chris
Anyone know where there might be a “generic” (clean) Tumblr CSS file for those of us trying to build a theme from scratch? All the CSS sections in existing themes seems to have tons of positioning tweaks that are tedious to remove.
Jan 28th, 2008
Reply to “HOWTO: Integrate Tumblr with Wordpress”