⚠ Desculpe pela bagunça aqui, eu estou atualizando meu tema então algumas coisas ficarão fora do lugar por um tempo, mas logo logo voltarão ao normal.

⚠ Sorry for the mess in here, I'm currently updating my theme so some things will be out of place for a while, but soon it will be back to normal.

sexta-feira, 29 de março de 2019

How to solve/avoid errors in themes on Tumblr

How to solve/avoid errors in themes on Tumblr

(Latest updated in 04/03/2022) - (Versão em Português deste post aqui!)

Not every problem that happen to a theme is a defect that already came with it. There are many things you can do while installing or customizing a theme that can corrupt its code and cause issues.

In this post I listed the most common problems that happen with themes and showed how to solve them as well as how to avoid other problems.

Read the following table with the most common issues and if one of them sounds similar to what's happening to you, then click on all of the causes in front of it. If this post don't help you, then contact me via Ask on Tumblr and explain to me in detail what is going on with your theme (if possible, send prints to show me what you mean).

Problems:

Problem Possible causes
A) I can't install the theme: Cause 04 Cause 02 Cause 01 Cause 05
B) I can't edit the theme: Cause 04 Cause 05
C) The theme is not showing on my preview: Cause 14
D) The theme is all messy/The theme is not loading: Cause 01 Cause 02 Cause 03 Cause 06 Cause 12
E) The theme is lading, but too slow: Cause 13
F) Some theme options are not working: Cause 08
G) The infinite scrolling is not working: Cause 09
H) Some links in the theme are not working: Cause 11 Cause 07
I) The Like, Reblog and Follow buttons are not showing on Permanent Links: Cause 07
J) Tumblr's redirect links driving me to an error page: Cause 07
K) My tags are not working: Cause 10

Possible causes:

Cause 01: Missing parts:

It can happen, when you're trying to copy the code of the theme to put it in your blog, of you accidentally not copying it entirely, leaving some parts out of the selection and copying the code with a part missing. So the first thing to do if your theme is experiencing some errors is to check if the code was not installed incomplete.

To give you a little help: my themes always start with "<!--" and end with "</html>". If your theme starts and ends this way, then it's complete and the code is correct. Unless you have modified (added, removed or changed) one or more things in the code, because you can have accidentally removed or corrupted an important part of it.

If you have modified the theme or installed it with parts missing, simply take its original code again (make sure to copy it entirely) and reinstall it in your blog.

Cause 02: Broken code:

Everytime you're going to copy a code make sure that there's no automatic translator or grammar corrector activated in your browser, because that would cause changes to the code that would turning it into a mess that is not a proper and readable HTML code.

Never save the code of a theme in a document on your computer or in any website that's not suitable for codes! Many people like to save the code of themes they liked so they won't lose them, but the best option for this situation is actually to save the link of where the theme was posted, instead of saving its code. And there are two reasons for that:

Reason 1:

When you save a code in your computer, you'll have the same version of it forever... Developers use to update their codes from time to time in order to avoid them getting outdated by new programming rules, that are constantly changing. For this reason, the best option is to always get a code right from its original source, to ensure that you're always getting its most recent version, before it starts getting deprecated with time and starts experiencing errors.

Reason 2:

The second reason may be exactly what's causing problems in your them... Text editors (that are not specifically for codes) are programmed to guarantee us that any text that's written (or pasted) in it is gramatically correct. These editors have automatic formatting and when you paste an HTML code in them, they will format it based in gramatical rules and not HTML rules (since they don't know HTML). They will add commas and spaces in weird places of the code, replace quotation marks (") that are almost everywhere in the code, translate things that are in other languages, and some other things... Making the code partially or completely invalid.

To solve this problem, you will have to take the original code from its source and reinstall it, this time without pasting it anywhere else besides the HTML field of your blog.

Cause 03: Outdated code:

It's important to keep an eye on new updates of the theme you use. Check it out at least once in a year in the blog/website where you took the code from, to be always aware if new updates were launched, because some developers post update notes in their blogs, in the decription of their themes or as comments in their codes.

And if you're using a theme that haven't been updated for more than 5 years, maybe it's time to change for one that's more recent, because it's possible that its code is deprecated and some parts of it are no longer recongnizable by some internet browsers, causing it to show some errors. Or Tumblr may have passed through some changes that are causing old themes to not work properly anymore.

If you use one of my themes, you can check the date of its last update in its post:

In my most recent themes, you can also find the date of its last update in the beggining of its code:

Cause 04: HTTPS error:

If when you try to install a new theme or even edit a theme that you've been using for a while you get the following message:

A while ago Tumblr started to block the use of non-HTTPS assets in themes to increase security within the platform. If you don't know what that means, it doesn't matter, all you need to know fix this is that there are two reasons why you're getting this message:

Reason 1: Outdated theme

If you're using an outdated theme, you can check for an update for it, in case its developer made it available. If there are no updates available to solve this issue you can wether change for a theme that is properly updated or you can try to fix this yourself as I will show you now.

But depending on the theme you're using, making these changes can cause bugs in the code. But if you want to try anyways, here's how you do it:

Open the HTML of your blog > click anywhere inside the code (just to focus the code section) > then press CTRL+F (or Command+F) > and a searchbar will show up on the top of the code (like this) > use this searchbar to research for "http:" inside the code > replace all the "http:" that you find with "https:", make sure you don't miss any > save the code and check if it worked.

Reason 2: A plugin/custom code you installed in the theme

If you have installed any plugin/custom code in your theme (music player, visitors count, etc.) there's also a chance that there is nothing wrong with the theme you're using and it's just this custom code you installed that has non-HTTPS assets and is causing this problem.

In this case, do the same thing as I teached before: press CTRL+F and look for any "https:" inside the code. If you find any, you can try to replace them with "https:", but it might cause bugs as well. And if it does, you can try to look for a similar plugin/custom code that is currently working on Tumblr.

Cause 05: Bad connection:

Sometimes when your connection is bad or Tumblr's server is facing some problems, Tumblr won't be able to save your theme or it will save it but not load it, making your blog look like a completely empty page. In this case, do the following steps:

Install Tumblr's default theme > save the theme > update your Customize page (press F5) > and try to install your desired theme again.

If the problem continue, try to repeat this process after some hours or in another day, or even utilizing another net... But the fastest solution is to simply change for a lighter theme to install in your blog (for example: a theme with only 1 column, no infinite scroll and that doesn't include many special effects).

Cause 06: Incompatible custom content:

Some custom content (like music players or online users counter, for example) can conflict with some other codes inside the HTML of your them, causing errors in it. Some also can cause that "HTTPS" issue that I mentioned in Cause 4.

If you use 1 or more custom resources and you're having problems with your theme, try to remove the code of these resources to see if it solves the problem. If it doesn't, then the problem is not in the custom content (in this case, read the causes 01, 02, 03 and 04, if you haven't read it already), and you can put them back in your theme.

But if removing the custom content the problem is fixed, then they are actually the cause. And you can try to research for similar custom resources that will work well in your theme.

Cause 07: Music players:

Most of the music players that were very used on Tumblr some years ago (like WikPlayer and SCMPlayer) are no longer working well and are causing many issues on themes due to updates on Tumblr and internet browsers. Some of these issues include: interfering with Tumblr's redirect links (causing some links in your blog to be broken) and causing the buttons to Like, Reblog, Follow, etc. not to show on Permanent Link pages of your theme.

To solve this, the only way is to stop using these music players. There are some alternative players that still work and I intend to make a post introducing them in the future, but in the meanwhile you can, of course, make your own Google research to find one that you like.

Cause 08: Tumblr's "Customize" page bug:

If you have installed a theme and some of its options are shown as enabled but aren't working, don't worry about your theme, it is not the problem... It happens because the switch options in Tumblr's Customize page have a small bug:

Sometimes these options are shown in inverted values, they show as "enabled" when they are actually disabled and as "disabled" when they are actually enabled.

All you need to do to fix this is to simply click over them at least two times in a row, just to change their current value and then go back to the previous value (to be more specific: deactivate and then reactivate these options, or vice-versa) and this, for some reason, normalizes the switch buttons and make them show their values correctly.

Cause 09: Page is too short for infinite scroll:

If you have installed a theme that has infinite scroll, but it seems not to be working and you're unable to access older pages from your blog, this may be happening because your pages are too "short". I'm gonna explain: the script for the infinite scroll, in most themes, is executed when you scroll down the page. When a certain page is too short (when its content fits intirely in the screen), it won't have a scrollbar because, since the page got nothing more for you to see below the current content, it doesn't need a scrollbar. And because there's no scrollbar, the page can't be scrolled down, and this way the infinite scroll script will never executed, so the infinite scroll will never work.

To solve this problem, simply do the following: go to the Customize page of your blog > open the "Advanced options" > click on "Posts per page" e choose the maximum number available:

This will make a good amount of posts to be shown per page in your blog, this way your pages will always be long enough to have a scrollbar in it, so the infinite scroll will always work.

However, if you post/reblog too many "short" posts it is possible that this problem will keep happening anyway. So, in this case the only option you're left with is to use a theme with less columns to make the pages long enough.

Cause 10: Unreadable Tags:

If you're having issues with some tags in your blog, first make sure that you are using your tags correctly. For that, check this tutorial and also Tumblr's articles about tags.

There are 3 reasons why your tags may not be working:

Reason 1: Invalid characters

If you use special characters in your tags, it can make things a little more complicated when you try to access these tags because of its URL. URLs can't read special characters, so they transform them into an encoding that they can read, called "URL Encode". And this can be the reason why you can't access these tags, you would need to encode them in order to do so (and I'll show you how to do this shortly thereafter).

But, actually, Tumblr can read some special characters on its tag and keyword searches, but it doesn't work for every type of situation. So the best choice is to always avoid using special characters in tags for prevention, and that includes hyphens (-), commas (,), dots(.), accents and etc.

However, if you did use special characters in some tags and now you need to access them, you can do it this ways: let's say the tag you've put in your posts is "U$38 dollars", to filter your posts by this tag you'll have to go to this link: http://sua_url.tumblr.com/tagged/U%2438-dollars. That's because the URL Encode for the dollar sign ($) is "%24", and also, to represent spaces between the words, you must use hyphens (-). You can check this article, to find out what are the codes for each special characters you used in your tags.

Reason 2: Tags limit

Tumblr allows usto use up until 30 tags for every post, however only the 20 first tags will work (and if you know what's the point of this, please, tell me, because I still don't understand 🤷‍♀️ 😒), how it was mentioned by Tumblr in this article. Any tag that's after the first 20, will simply not be read.

Reason 3: New blog

And the third reason why your tags may not be working is if your blog is new, and that's something Tumblr have already explained in its help center, you can read about it in this article.

Cause 11: Broken links:

If the links in the menu of your theme aren't working or are taking you to an error page, this may be because your links are broken. You need to make sure to always add "http://" or "https://" at the beggining of any web address, without this, internet browsers won't be able to read the links as web addresses, so they won't work.

For example: if you were going to put a link to my website in a post on your blog, somewhere in the code of your theme or anywhere on the internet and write it like this "anyhsthemes.com", it won't work. For a link to be functional you must write it like this:

http://anyhsthemes.com.

You can shorten links in your theme, but only for pages that belong to your blog and only if these links are gonna be only inside your theme. For example, if you want to put a link to the Archive page of your blog in the menu of your theme, you can simply write your link like this: "/archive"; and this link will take you to the Archive page of your blog (just like "/ask" will take to the Ask page of your blog and "/submit" will take you to the Submit page). But as I said, these abbreviated links will only work while they are in a page that belongs to your blog, so do not use shorten links in posts, because posts can be saw through Tumblr's dashboard, and these links won't work there.

Cause 12: Tumblr App posts:

If your theme is experiencing problems, none of the other causes in this post helped you, you're using one of my old themes and recently posted/reblogged NPF posts (Tumblr's new posts format, that is the only format available in the mobile app of the platform, which means that any post made in Tumblr's app is an NPF post), this might be the cause.

My old themes don't support NPF posts, so if this problem is damaging your theme way too bad, the only solution is to change to a more updated theme.

Cause 13: Heavy page:

My current themes come with many features and the combination of some unfortunately makes the theme too heavy and slow to load, specially when used in a blog that contains a lot of images. I'm currently working on optimizing my themes to prevent this problem, but in the meanwhile I included in my current themes some options for you to disable features that make the theme heavier. They are:

  • Infinite Scroll: disable this option to replace Inifinite Scroll with Pagination;
  • Smooth Scroll: this option, when enabled, makes the scrolling of the page more smooth;
  • Custom Tooltips: this option, when enabled, add custom tooltips to the theme (click here if you don't know what this is).

Besides deactivating these options, another thing you can do to improve the performance of your theme is to decrease the number of posts per page. You can configure this in the "Advanced options" on the Customize page of your blog:

Cause 14: Tumblr's preview:

The preview in Tumblr's Customize page doesn't work correctly sometimes and this is normal, since it is not a real page, just a non-functional preview of your blog's first page.

Usually, when this happens, you can simply make any change to any of the Theme Options and this will make the preview load. But if it doesn't work save the theme and then open your blog's first page. If in your blog the theme is working as it should then it means that there's nothing wrong with your theme and it's just the preview page that isn't loading at the moment.


If none of the solutions in this post solved the problem of your theme, contact the person who developed this theme you're using to ask for help. If you use one of my themes or if you have any question about this post, you can contact me via this page.