EricaJoy

Television. Rules the nation. Around the World.

16 Feb

How To: Embed Your Tumblog in WordPress


If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

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


Filed under: How To, WordPress, tumblr
  • Thanks for post! WP rules!
  • thanks! i did it on typepad, pretty much the same thing.

    sorry to hear you are unhappy in NYC. i love it here, but don't mind small spaces, live next to a park, belong to a garden and walk everywhere. maybe portland or austin would do the trick.
  • This is a very nice post, thank you. I had been looking everywhere for some kind of a documentation for the CSS for this. One question though,you do not list a class to style the dates? Perhaps it's just tumblr_date?
  • I have been looking all over the Internet for this info!
    Thanks for making my day perfect Erica !! :-)
  • Kristen
    This was really helpful! But I'm having a small problem.

    When I enter:
    <style type=”text/css”> @import url(http://www.pathtoyourtumblrcssfile.com/tumblr.css); </style>

    Wordpress changes it to:
    <!-- @import url(http://www.pathtoyourtumblrcssfile.com/tumblr.css); -->

    Anyway to stop that from happening?
  • This is GREAT. Thanks so much for your work and documentation.
    Now my big question: Any chance you can figure out how to resize photos?
    I'd love to put this in my sidebar of my blog, but the sidebar is 250px wide and the pictures resize in my tumblelog to 400px. I just can't figure this part out.
    Any ideas?

    Thanks!
  • Alastair Nisnet
    Thanks Erica - This rocks!

    It's really useful, not just for those using WP but anybody trying to insert their Tumblog into a web page
  • sean
    erica,

    do you know of a way to do this without creating a separate page but rather integrating the tumblr into a sidebar?
  • charleshaa
    Hey erica !
    Thx a lot, it really helped me !
    I did incorporated it in my website, but I can't figure out a way to bring the disqus comments with every posts... It only takes the description... Do you have an idea ? Thaanx !
  • I'm importing my tumblelog into my WP website. I started a new page "tumblr" and added this code: <script src=”http://sjmccoy.tumblr.com/js” type=”text/javascript”></script>

    Then I added this to the same page's code: <style type=”text/css”> @import url(http://www.stewart-mccoy.info/wp-content/themes/an-ordinary-theme/tumblr.css); </style>

    I've edited the classes to see if changes would be made, but the changes I made to the classes don't seem to be working.

    Any advice?

    Thanks!
  • I just tried putting the CSS directly in the page directly after
    <style type=”text/css”> instead of using @import, and I had success.
blog comments powered by Disqus