HOWTO: Integrate Tumblr into 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 unexact science, It’s actually not too hard to create a custom Tumblr theme that looks just like your WordPress install (or any other blogging system, really). All it takes is basic CSS/HTML knowledge, how to identify different sections of your WordPress theme, and an 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

The easiest way to go through this HOWTO is probably to copy the code examples I’ll give in notepad rather than monkey around in the online profile editor.

1. Pick Base Theme (and why you would want to move the CSS to your server)
The easiest way to start is by picking an existing theme that looks fairly close to what you want your end result to be. For example, my tumblelog is based on the guts of Litewire, but I replaced the theme’s header and footer with my site’s generated HTML and external stylesheet. Speaking of external stylesheets, the very first thing I did when customizing my layout was move all the inline CSS to a file on my server. This serves two purposes. 1. It’s easier to edit, and 2. it makes the Tumblr profile cleaner and more manageable. The main drawback is that the CSS has references to color codes you configure on the site, so those have to be specified manually.

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

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 tags from your theme when you’re done, and if you want you can replace all the {color:Background} markup with actual colors. (Remember this whole step is optional since the colors are defined elsewhere, so if it sounds like too much work go ahead and keep reading.)

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

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.


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}
                        

                            {Name}
                            {block:Description}
                                {Description}
                            {/block:Description}
                        

                    {/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}

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

Leave a Reply

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