How to add user-defined tags to the navigation of a Tumblr theme. Check the example.html for a simple but accurate result of this tutorial.
In your head, insert <meta name="text:Tags separated by commas" content=""/>. This is a Tumblr function to state that there is a text variable that the user can define that is named "Tags separated by commas".
Most Tumblr variables can be used in Javascript simply by prefixing them with JS. This does not work with custom variables (or I haven't found a way to make them work, at least). So here's my way around that. Insert something like this somewhere on the page: <span id="tags" style="display:none">{text:Tags separated by commas}</span>. This creates a span element with the id of "tags" that contains the user-defined tags within its inner HTML. This will not display because of the style="display:none".
Now we have to find the individual tags that your theme owner wants to have as navigation. This can take different routes depending on if you use jQuery or not. I highly suggest that you use jQuery for making themes but if you choose not to, that's fine.
var tags=document.getElementById('tags').innerHTML.replace(/,(\s*,)*/g,',').replace(/\s*,\s*/g,',').replace(/,$/,'').replace(/^\s*/,'').replace(/\s*$/,'').split(',');
var tags=jQuery('#tags').html().replace(/,(\s*,)*/g,',').replace(/\s*,\s*/g,',').replace(/,$/,'').replace(/^\s*/,'').replace(/\s*$/,'').split(',');
The only difference here is how to receive the tags (through the innerHTML of straight Javascript or through the .html() method of jQuery). The rest is the same.
All of the .replace() functions make a standard comma separation system (something like tag 1,tag 2,tag3. The reason for this is because with different users, there are different mistakes that can be made (tag 1 , tag 2, tag 3, for example). It then splits the string based on the commas, creating an array with each element corresponding to a tag (tags=["tag 1", "tag 2", "tag 3"]).
This is where using jQuery gives you an advantage but if you choose not to use it, c'est la vie. This part is where you can get creative (I'm making it bare bones for the sake of the example). For this example, there exists an element with an id of "navi" where we want to display our tag navigators.
for(var x in tags) {
if(tags[x]!="") {
var a=document.createElement('a');
a.href="/tagged/"+escape(tags[x].replace(/ /g, '-'));
a.innerHTML=tags[x];
document.getElementById('navi').appendChild(a);
}
}
This goes through each element of tags [line 1], if the tag is valid it will continue [line 2], creates an a element [line 3], sets the element's href attribute to the tag's page (note that tag pages replace spaces with dashes) [line 4], set the innerHTML of the element to the tag [line 5], and then appends the element to the element with the id of navi [line 6].
jQuery.each(tags, function() {
if(this!="") {
jQuery('#navi').append('<a href="/tagged/'+escape(this.replace(/ /g, '-'))+'">'+this+'</a>');
}
});
Iterates through the tags and performs a function for each element [line 1]. If the tag is valid, continues with the function [line 2]. The function appends to the element with the id of navi a hyperlink with its href set to the tag's page and with the innerHTML set to the name of tag [line 3].
function addTags() {
var tags=document.getElementById('tags').innerHTML.replace(/,(\s*,)*/g,',').replace(/\s*,\s*/g,',').replace(/,$/,'').replace(/^\s*/,'').replace(/\s*$/,'').split(',');
for(var x in tags) {
if(tags[x]!="") {
var a=document.createElement('a');
a.href="/tagged/"+escape(tags[x].replace(/ /g, '-'));
a.innerHTML=tags[x];
document.getElementById('navi').appendChild(a);
}
}
}
function addTags() {
var tags=jQuery('#tags').html().replace(/,(\s*,)*/g,',').replace(/\s*,\s*/g,',').replace(/,$/,'').replace(/^\s*/,'').replace(/\s*$/,'').split(',');
jQuery.each(tags, function() {
if(this!="") {
jQuery('#navi').append('<a href="/tagged/'+escape(this.replace(/ /g, '-'))+'">'+this+'</a>');
}
});
}
window.onload=addTags;
jQuery(document).ready(addTags);