EricaJoy

How To: Embed Your Tumblog in WordPress

Tumblogs are all the rage right now but sometimes a big long post is warranted. For those occasions a lot of us keep “old school” blogs around. For me, it was hard to integrate my tumblog and my “real” blog. I settled for having a link between the two separate entities and having a customized tumblr domain. The release of Tumblr 3.0 added the option to embed posts anywhere, so I gave up the crappy linking between blogs and embedded my tumblog into a WordPress page. I’m sure others have done this but I’m documenting how I did it in the hopes it will help someone else.

All in all, embedding my tumblog into WP was pretty easy. Here’s what I did:

1. Create a file called tumblr.css and put it somewhere.
2. Create a new Page in WordPress.
3. Switch to the code editor of the page and insert the following:

   <style type=”text/css”> @import url(http://www.pathtoyourtumblrcssfile.com/tumblr.css); </style> <script src=”http://pathtoyourtumblog.com/js” type=”text/javascript”></script>

   Make sure you edit the paths in the code snippet before publishing.

4. Save the page
5. Edit the CSS to your liking.

That’s it. The trickiest part of the whole deal is editing the CSS. Tumblr doesn’t have documentation for the various classes you can use to style the js so you have to fly by the seat of your pants a bit. For convenience and the sake of having this written down somewhere, here are all the classes used:

tumblr_body
tumblr_description
tumblr_post
tumblr_quote_post
tumblr_quote
tumblr_open_quote
tumblr_close_quote
tumblr_source
tumblr_photo_post
tumblr_photo
tumblr_caption
tumblr_link_post
tumblr_link
tumblr_chat_post
tumblr_label
tumblr_text_post
tumblr_title
tumblr_body
tumblr_video_post
tumblr_video
tumblr_audio_post

If you’d like a css file to get you started, here’s a modified version of the one I use: http://usefultreats.googlepages.com/tumblr.css