How to Make Your Tumblr Look Like a Website

A lot of folks hit our site wanting to know how to make their Tumblr look more like WordPress or a traditional website. This is somewhat possible, in terms of navigation, but much harder to do if you want a “homepage” front door to your tumblr blog, as the way it is meant to function is as a chronological series of blog posts, the most recent on top. Here are the different methods you can use to make your Tumblr look more like a website.

Find a Theme That Already Looks Like a Website

Premium and free themes may exist that have the look and feel you want, but you just need to find them. Check out our recent list of theme sites and visit Tumblr’s Theme Garden, where you can preview each look on your blog before purchasing. Here is a good example of a Premium theme by one of our favorite Tumblr developers, Style Hatch. This is called Origin West.

You need to study the features offered by this theme, because these pre-coded bits of functionality are going to get you closer to the feeling of a website than many other themes provide. This is some of the stuff you need to look for in a pre-made theme:

• built-in coding to display tweets and Instagram photos
• built-in coding for post sharing
• Disqus is set up to allow visitor comments (this is the only commenting method available for Tumblr sites, yet isn’t pre-installed so it has to be set up)
• built-in Google Analytics and Clicky tracking (you will have to set up accounts on these sites and then enter your code, but the coding is here already to make it work)
• uses Typekit for custom fonts
• page links run across the top of the header, more like a website does
• ends the site nicely with a footer area with content and search, like a website does

You will notice, though, there is no “homepage” – but if you want a sharp looking blog that is going to stand out, this theme is awesome.

If you’re a girly-girl like moi, check out Coco… this theme seriously could not be ANY more adorable! I think Style Hatch has my number. 🙂

Modify a Pre-Made Theme to Look Like a Site

Sometimes a theme will have just the structure you want, but it needs modification for the colors or branding you’d like to use. If you know how to modify and replace graphics yourself, this can be easily done. If you don’t a web-oriented firm (like Fresh ID or many others) can do this for you.

The theme mentioned above, Coco, has been modified here to look less girly for a comics and art blog, and has awesome sidebar images added to give it a lot of flair.

Nautical by Pixel Union is another good example of a Premium theme that offers a great, WordPress-like layout with sidebar, page links, room to insert code into the sidebar for other bits of content, a header, footer and lovely blog post layout. Disqus comments are set up, but you made need to add social sharing and other typical blog functions yourself (or have a web designer do it.) Zooey Deschanel liked it enough she just used this Tumblr theme as-is!

Forget About Drag & Drop Widgets & Plugins

The key difference that you MUST accept if you want to blog using Tumblr and not WordPress is that you won’t have the concept of “plug-ins” – they don’t exist in our Tumblrsphere. So anything “extra” added to a theme, as I have at kriscolvin.com in the sidebars (links to press mentions, latest tweets, Etsy widget, rss feed from this blog, rss feed from my other tumblr, about me, etc.) will have to be added to your Tumblr theme code as raw code, meaning you should only then edit it if you know something about how to do it without erasing the style of your whole tumblr.

Pixel Union and Style Hatch are both going to have excellent, rich-featured themes that can get you closer to the feeling of a website, and can be modified to fit your branding. We raid their collection a lot! (Thanks, guys!)

Also check out Mallow by Business Bullpen – it’s loaded with helpful features like sharing, fonts, music, analytics, sticky posts, multiple layouts, comments, sticky and featured posts (a WordPress feature not normally found in Tumblr themes) and looks pretty easy to modify to make it just perfect for your needs.

Custom Design a Tumblr Theme & Have It Coded

The easiest way, though perhaps not the cheapest, to have your Tumblr look like a website is to design it yourself or have it designed and coded. You will need to understand the differences from the way Tumblr works and an HTML site or WordPress site, but you can get what you want this way. I did that with my kriscolvin.com personal Tumblr and we had it developed by a contractor who was doing a lot of work for us at the time. This site was built with:

• a PSD template I really loved
• modifications to the design to incorporate my personal branding and style changes
• custom coding to turn it into a Tumblr theme and add functionality

When I wanted to launch a second Tumblr specifically for the food I eat, I found a free theme that was similar to mine, in that it had a dark background and some chalkboard-like styling. I changed the background to match my Kris Colvin tumblr and some of the graphics and header, and it now complements my main Tumblr without being an exact replica. I eat too much cheese. Don’t judge me.

Understand the Fine Details

Designing a theme well from scratch will involve consideration of many small details. As you can see, a lot of the Premiere themes contain many more features and designed elements than free themes you can find will offer. Tumblr has many functions to consider: reblogging, marking something as a favorite, showing followers, showing things you have favorited, getting comments set up, post titles need custom coding to link to that post like you’re used to in WordPress, making sidebars and footers interesting given the lack of plugins/widgets if you’re used to them in WordPress… so plan your theme down to every last detail and then the developer needs to consider what can be set up as Theme Settings so that you can easily change it later (such as link colors, background, header image, etc.)

I recommend finding a shop like ours that has experience in Tumblr development or a service that specifically offers it because it will save you time, money and headaches to work with someone experienced with the platform.

I haven’t used these services, but I did find a PSD-to-Tumblr service that I’d like to try in the future and a slightly cheaper one also at XHTML Candy.

If you’re a developer, check out this tutorial on How To Create a Tumblr Theme.

Inspirational Custom Tumblr Themes

Disruptomatic – very hot, modern design

AMC Theatres Movie News (they designed what they wanted, and we coded this one)

Newsweek – they have one of my all-time favorite tumblrs. Note the use of tags as navigation links at the top of page. Wonderful design and content here.

Cheat Sheet uses an awesome three-column layout

We Heart Studios (an old brand of mine not currently used, but the footer was featured as an illustrated footer and I love this little Vespa couple and what they do for the branding)

STFU, Parents – nice bright site with a store coming soon (curious to see if they implement this in Tumblr or another way)

If you reached this site via a search for “how to make your tumblr look like a website”, you’re to be commended. Dare to be different and stand out online! Leave me a link to your Tumblr in the comments – would love to check it out!