HOWTO: Integrate Tumblr with WordPress

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

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

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 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">

    
        













    

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 tag, and you should see a div tag close if not immediately after that marks the beginning of your actual stuff. Mine says

. You’ll want to copy from this div tag down until right before the div for your individual posts (mine says

). 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.


{block:Description}
{Description}
{/block:Description} {block:Posts}
{block:NewDayDate}
{ShortMonth} {DayOfMonth}{DayOfMonthSuffix}
{ShortDayOfWeek}
{/block:NewDayDate} permalink {block:Regular}
{block:Title}

{Title}

{/block:Title} {Body}
{/block:Regular} {block:Photo}
{PhotoAlt} {block:Caption}
{Caption}
{/block:Caption}
{/block:Photo} {block:Quote}
{Quote}
{block:Source}
— {Source}
{/block:Source}
{/block:Quote} {block:Link} {/block:Link} {block:Conversation}
{block:Title}

{Title}

{/block:Title}
    {block:Lines}
  • {block:Label} {Label} {/block:Label} {Line}
  • {/block:Lines}
{/block:Conversation} {block:Video}
{Video-400} {block:Caption}
{Caption}
{/block:Caption}
{/block:Video}
{/block:Posts}

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.

44 Replies to “HOWTO: Integrate Tumblr with WordPress”

  1. 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.

  2. 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.

  3. 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. =]

  4. 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!

  5. 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.

  6. 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!

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

  8. Alright, I can’t get it.. maybe you know, there’s no support online… I’m trying to have my tumblr account integrate into a directory on my wordpress site.. I can post to the page currently, but it won’t link posts as individual pages, and it won’t let me enable comments… Ideas? My tumblr integrated wp page: http://hyder.me/tumble-log/

  9. I have javascript in my wordpress header, and all the javascript is included in the tumblr theme but it doesn’t seem to work. Is there anything special I can do to make this work?

  10. I love this. I love that your WordPress blog and Tumblelog are on separate pages but look to be integrated into a single site. I love how seamlessly you’ve worked with Flickr. I plan to build something similar, starting from scratch. The idea is to have work that I create–words and sounds and images–presented separately from the stream of things I would like to share that others have made. WordPress and Flickr for the former, Tumblr for the latter.

    You created this post some years ago. I wonder: Is there anything you would now change or add to the method and instructions? Any tips for someone starting with a blank canvas? Particular WordPress or Tumblr themes to consider? Plugins?

    Thanks for the inspiration.

Leave a Reply

Your email address will not be published. Required fields are marked *