I just can't describe u

Tumblr “Tag Search Box” (Detailed tutorial and code included)

**********************************************************
New tutorial here: http://justcantdescribeu.tumblr.com/post/15075241123 :)
**********************************************************

Alright, I was pretty busy this past week, so I delayed responses to those who messaged me about the Tumblr “Tag Search Box” which I am currently using on my blog (http://justcantdescribeu.tumblr.com). I thought I’d make up for it by writing a huge post and showing everyone exactly how I managed to make this work. So… /scary-wall-of-text, begin. >:d

Essentially, it’s a search box that redirects to a page displaying all posts with the specific tag that you search, sort of like the “all tumblr search” which you use to explore new tags and stuff.

~~*Press “Read More” and scroll down to the next part marked by an asterix * if you already know what this is and are just looking for the code/tutorial*~~

~~Here, this post I wrote a few days ago explains it in more detail:~~

~~Tumblr “tag search box”~~

OMFG FUCKK YEAAAH, finally found a piece of client side code that enables my search box to turn into a “tag search box”, where after submitting the query, it would return with results of “/tagged/{SearchQuery}” instead of relying on Tumblr’s shitty search algorithm that doesn’t even work.

~~Essentially, I made my search button into the equivalent of “Search all of Tumblr” (for tags), except personalized for my own blog.~~

I originally submitted 2 requests to Carlo Franco (the creator of this theme), via his Ask, but he seemed to be ignoring me or not responding, so I took matters into my own hands (AKA google.com). A little code snippet and a few customizations later, and voila!

You can now search the “Search my tags!” to get a results page of http://justcantdescribeu.tumblr.com/tagged/{SearchQuery} «<whatever you searched in the box. Now I can keep track of my posts without going to the dashboard!

I always tag my posts accordingly, so if you want to search up all the video posts I made, search the tag “video” in the box, and it’ll show all the video clips I’ve posted. Same goes with images, text, quotes, music, and so on.

I’m so happy right now, haha. I’ve been trying to do this for a month or two, and finally cracked the solution today. It may seem like a piece of cake to you advanced programmers or theme-makers out there, but I feel great self accomplishment since I have NO idea how to write in HTML/PHP/CSS, or anything related to coding.

There are actually quite a number of reasons why you would want this search box:

This is for those whose blog has been infected by the nasty disease called “tumblr’s search engine”, or maybe just those whose default search boxes don’t work for some mysterious reason (like mine).
It is totally non-dependant on keywords or titles, so it means you have complete control of what gets searched up on your blog. If you don’t want someone to search a certain blog post up, just don’t tag it.
It’s the coolest thing you’ll ever use (okay, maybeh not really.. :o)

However, the downside to this is that you have to tag ALL of your posts in a category, to be able to search up those tags (no shit Sherlock). I know that some of you tumblr users out there are in charge of blogs that have a specific theme or are directories/collaborations/centralizations of certain content, so you need a general indexing feature. This would be the perfect addition to your tumblr, a way for users to search up your tagged posts.

*Anyways if you think your set, here’s how to do it:

~~It’s a long read, but please bear with me.~~

Basically, you need to add a few snippets of code to your Custom HTML box, which is located in the Customize > Theme page, of your tumblr Dashboard. What this does is execute a javascript function (I think that’s what it’s called) when you press the submit button (or in this case, enter button), that redirects the form to the /tagged/ page.

Warning: Be careful when you edit your custom HTML, because sometimes the theme will screw up, and the positioning on everything could shift into different places. Make sure you back up your theme prior to editing anything, unless you really know what you’re doing. I am not liable or responsible for any damage and inconvenience caused if your tumblr page gets messed up.

~~For this to work, you need to already have a search box. (It’s fine if you don’t already, I’ll elaborate on that later)~~

~~Got one? Okay, good.~~

Find the <head> … </head> section in your custom HTML box. Use Ctrl + F to search for <head> if you can’t find it. It’s usually in the first part of the HTML code, near the top. You need to copy this javascript function and paste it in between the <head> and </head>. Preferebly, paste this RIGHT after the <head> tag so it looks something like <head><script type=….. I’m asking you to do this right after, because if you insert it in other places, you may run into trouble with the line breaks and formatting of the HTML code - in short, difficult and nasty stuff you don’t wanna mess with. Copy the whole thing in the quote below.

<script type="text/javascript"> <!-- function handleThis(formElm) { window.location="http://yourtumblrURLhere.tumblr.com/tagged/"+formElm.number.value+""; return false; } // --> </script>

~~See where it says “http://yourtumblrURLhere”? Well, do exactly what it says and replace the line with your tumblr URL, there.~~

~~Now, after that’s done, here’s the part that’s a little tricky. You have two options:~~

First, if you don’t have a search box and want a basic one that includes a submit button, but is without any CSS or styling/positioning, of which appears at the top left of the screen, copy and paste the following code snippet into the <body> … </body> part of your custom HTML. As before, it’s preferable to paste this RIGHT after <body> so it looks like: <body><form onsub... This is the raw code that you’ll need.

<form onsubmit="return handleThis(this)"> <input type="text" name="number" /> <input type="submit" value="Submit" /> </form>

Second option: If you have an original search box that was custom made or came with your theme and you want to keep the original styling/colour/position of it, you’ll need to do this. You need to find the actual code of your original search box. Again, the easiest way is to use Ctrl + F to do this. A quick search for “search” or “form” or “form-id” or div id=”search” might display these results. Afterwards, you will need to work the code snippet shown above, into your original search box code. And when I mean “work it in”, I mean add this and edit your original search box code to incorporate the “onsubmit=” part. That’s the basic thing you want to fix for your search box code.

~~This may get confusing, but I’m going to have to break down the code I posted above, and explain each line in detail, to give you an idea of the customization you can do with this.~~

<form onsubmit="return handleThis(this)">

^ The <form is the opening code wrapper/tag of the search form. In HTML, forms are used to gather user input. In our case it’s the search tag we are inputting. onsubmit=”return… is the line that supposedly “calls” the function, or the script we added in part one to do its job, when you submit a search query (eg. press enter, or press search button). This is the basic line you need.

<input type="text" name="number" value="Search Me!" />

^ The <input type=”text” essentially creates a blank text box, and this is required along with first line, because without a text box you can’t type anything, and that means you can’t search for anything. The value=”Search Me!” is the text that shows up when you first load the text box, with no user input. It’s what makes the blank text box, not blank. The value is optional, and if you don’t add it, the text box is blank, which is fine, but if you want to let your followers know that it is indeed a textbox, then you might want to add a value.

<input type="submit" value="Submit" />

^As you can see, there’s another <input type= tag. This is where you can choose if you want a submit button or not. If not, people can only press their Enter key on their keyboard to initiate a search. The “submit” attribute tells it to create a submit button, as opposed to a text box in the previous line. Note: This is the only optional part in full code snippet. You can choose to omit this line if you don’t want a button.

</form>

~~^ Like the first line, this is the closing </form> tag, which closes the form.~~

So, after reading that, you’re probably now wondering how you can retain your originally styled search box and its positioning on your page, if your theme provided one. Well, sorry to break it to you, but I don’t really know how this works. All I can do is provide you with my best guesses and interpretations (as I’ve done for this entire post).

Based on MY tumblr theme, I’m assuming that on yours, there is a <div id=> … </div id> tag somewhere, which indicates the positioning, location, and layout of the search box. For example, my Effector Theme, there is section labeled <div id=”search”> … <div id>, and if you put your search box code inside that, everything will be in proper position, if your theme creator did a good job.
That’s for the positioning. Now, for custom graphics on your search bar, included on some themes, I’m guessing you need to find the <form id=> … </form> wrappers, which probaby points to externally hosted graphics.

~~You get where I’m going with this? Here, I’ll show you an example of my blog’s HTML code for this particular part (don’t copy/paste this, it won’t work on yours):~~

<div id="search">
    <form id="search-form" onsubmit="return handleThis(this)">
     <input type="text" name="number" value="Search my tags!" />
    </form>
</div>

For reference, here’s the default code for a search box, as provided by our beloved tumblr Staff. You want to delete the action=”/search” method=”get” since you aren’t actually submitting any information to a server, but rather just getting redirected. The name “q” has to be changed to to the value that corresponds in the javascript code we added in the beginning (which is “number”)

<form action="/search" method="get"> <input type="text" name="q" value="{SearchQuery}"/> <input type="submit" value="Search"/> </form>

It’s a little difficult to explain, and I’m not exactly the most knowledgeable at coding HTML so sorry if this is hard to understand. While typing all this, I was actually thinking.. “do I really know what I’m saying”? I’m actually amazed at myself for the amount of detail I put into this, with the limited amount of knowledge I have, LOL. Anyways, this works for me, so I presume it’s a valid method. Otherwise, you can ask your friends who know how to code to help you.

~~If you DON’T know how to get the generic search box implemented, you need to do more homework before attempting to change it into a tag search box, and google is your best friend. :)~~

If you’re stuck or this doesn’t work, or you are simply in doubt, just remember: you can always play around with the code and through trial/error you’ll get it eventually. That’s how I did it anyways. (Or you could just go learn HTML)

~~I hope this helps and solves a lot of frustration for people that have blogs similar to mine, where the original search box doesn’t work.~~

~~Also, check out my other post regarding additional changes to the search box (making the text disappear when you click on it, and reappear when you click outside)~~

Any further questions or inquiries can be directed to my email ~~(NOT my Ask box)~~: justcantdescribeu@gmail.com

~~And theeeeere we go. /end scary-wall-of-text.~~

Please be respectful and don’t repost this as your own because it actually took a while to type this, and then go through the hassle of editing everything (<pre> and <code> tags, replacing html special entities, etc.)!

~~Lastly, if you think that someone you know will want this, please promote it by: linking to, liking, or reblogging this post, or at the very least,~~ give credit to the original forum page where I found this code. ~~I’d greatly appreciate it. Thanks.~~