The installation and configuration process for a Tumblr theme is remarkably easy, thanks to the high-end code structure support. Below we’ve provided a detailed guide on how you can install, edit and make your own Tumblr theme.

tumblr logo

Tumblr is a free hosting Content Management System that allows you to share photos, text, images, quotes, videos, and links. It is a cross-platform that server the purpose of a blog and social networking site.

The more professional name for such a platform is “microblog” as to where people usually share their ongoing daily routines. Managing a Tumblr blog is a relatively easy task, thanks to the easy to access code and Drag & Drop facilitations.

You can easily customize your Tumblr account as per your likes. To do this, you have to change the Tumblr theme. By default, the installed Tumblr theme on your account is “Peter Vidani“. You can always configure this as per your needs.

Tumblr also provides a collection of other themes that you can install on your account. Just click the install button on your blog and you’re ready to go. If you’ve purchased a theme from a third-party website or want to import your custom Tumblr theme than there are a couple of steps that you should follow.

How to Install Tumblr Theme

If you’ve purchased a premium Tumblr theme from a third-party website than follow the steps provided to install it.

Go to the Edit Theme

Log in to your Tumblr account, select your profile avatar and click on Edit appearance.

edit apperance

Edit the Theme Code

On the Website Theme Panel, click on the Edit theme button. This will redirect you to the Tumblr theme customization page.

Edit Theme Menu

Replace the HTML Code

Click on the Edit HTML button. Select all the content of the code provided here and replace it with your new theme code. You can delete the existing code and paste your new code here.

replace html

Save Selection

Make sure to “Update Preview” your Tumblr layout to check your changes. Once you’re satisfied with your result, click on the Save button.

save changes

How to Edit Tumblr Theme

To edit or change your Tumblr theme settings, follow the step by step instructions provided below.

  1. Find the theme that you like to add to your Tumblr blog. You can browse online themes using the “theme” tag.
  2. Enter the email and password to access your account
  3. Select your Profile Avatar and click on the Edit Appearance section
  4. Click on the Edit Theme option here
  5. You will see the “Edit HTML” option on this page, smash it
  6. In this step, you have to find the code of your current theme
  7. Whatever customization you want on your Tumblr theme, you can do this from here
  8. Whenever you’re done with your customization, click on the “Update Preview” section to check your changes
  9. You can change your theme title, description, background, color scheme, and literally every bit of your theme setting from here
  10. Once you’re done unleashing your hidden talent, click the save button

How to Make Tumblr Themes

If you’re on a quest of making your own Tumblr theme than we have a solution for that too. Tumblr theme uses basic programming language, HTML and CSS. It is a present graphic package for blogs to change appearance and preference for a particular user. This change the appearance of the game or all aspect of webpages. A Tumblr theme includes the following sections:

  • Color
  • Typography
  • Images
  • Navigation Menu
  • Language
  • Social Media Integration
  • Tone
  • Amount of white spaces
  • Other media format

In short, a combination of these makes a Tumblr blog. This post is targeting entry-level programming. First of all, analyze what features you want in your project. A typical Tumblr project is divided into 5 sections:

  1. Template Tags and Variable
  2. Header
  3. Blocks
  4. Tumblr post types (there are 7)
  5. Pages

Important Tumblr Code

Make a plan for all the sections we’ve provided above. These important code sections are important for your Tumblr project.

  • {block:Posts} Wrapper post section {/block:Posts}
  • {block:Text} For text content {/block:Text}
  • {block:Photoset} photo gallery {/block:Photoset}
  • {block:Quote} Block quotes {/block:Quote}
  • {block:Photo} Simple Post {/block:Photo}
  • {block:Audio} Audio files {/block:Audio}
  • {block:Video} Video files {/block:Video}
  • {block:Link} Clickable links {/block:Link}

Make your own Tumblr theme

Once you’re done with the learning phase, let’s jump to the compilation stage. Learn the basic opening and closing tags of HTML and CSS. You can use packages of Bootstrap to create more visualization on your theme.


Now go to the website theme section and click on the Edit HTML button. Here all the backend magic begins. Start writing your custom code in this section. We prefer you to write your content on Notepad and then copy it in the code panel. Use the absolute URL’s to host custom code and media on your webpage. You can easily add more content on a later date. Tumblr provides a powerful Content Management system that really saves the day.

To add a page link, scroll down to the page section and click on the +Add a Page button. You can also sort your theme pages from this section.

Hey Psst! While you’re at it, Read these too…

Tumblr Advanced Features


tumblr advance features

Once you’re done playing with your code and making all the necessary changes, you can use Tumblr’s advance features to make some in-depth changes on your webpage, In this section, the Mobile layout optimization feature is important, so have a look at that one.

To summarize everything:

Using Tumblr is a great option to connect with anyone. It is a powerful social media and blog platform that gives you to freedom to explore yourself. First, we’ve learned how you can install a built-in or custom Tumblr theme. Next, we’ve shared how you can edit or change your Tumblr theme.

In the last section, we’ve shared how you can write your own Tumblr theme. The last section is a difficult one if you don’t have a programming background. But if you learn all the basics, you can easily make a powerful mobile-friendly Tumblr theme.

Your Reaction