Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Lesson 9 – Part 6 – Add Search Bar to Thesis Header

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

This video is part of our old WP eStore Course Go to our Updated WP eStore Course for current videos.

Welcome back to Part 6 of Lesson 9 of the Build Your Own E-Commerce Website tutorial series. In this sixth part of the lesson we are going to add a search function to the header area.

Come over here in Firefox and take a look at what I’m talking about, we are going to add this feature, a search form, to the Thesis header. It’s going to have a search button and it’s going to have this search box.

Inspect Element – Search Form

First, we want to look at this in Firebug. Let’s go ahead and inspect the element. We are looking at this search box right now and this div class search which is something that we’re going to create actually has a form inside of it and that form has two pieces. It has the input searchsubmit which is the button and it has the text_input which is where you type your search information. So we’ll be creating something right away here. We’re going to create an HTML structure that is byob-search and then we’re going to create this form with these two input elements inside of a p tag and then close all that off.

Before we do that though we want to know where we are going to put this. So I would like you to go to the diagram that shows the Thesis hooks again. Over here in the Thesis hooks visual reference you can see that inside the header there is this thesis_hook_before_title and if we hooked it to that, it would put the search above the title. But there is a thesis_hook_after_title and that’s what we’re going to hook to, thesis_hook_after_title. Come back over and take a look at that in the User’s Guide, select Hooks and thesis_hook_after_title – there it is – it shows that it happens after the logo and immediately after the tagline there is this hook, thesis_hook_after_title inside of div header.

Open custom_functions.php

We are going to begin by opening up our custom_functions.php file which currently only has this add_action and remove_action. We’ll start off by adding some HTML structure and rather than typing it out I’m copying it from the original location and we’ll just go through it step-by-step. First, we add a function which I’m calling byob_header_search. Notice this byob here, which is a suffix or a prefix that will make my functions named something than any other functions in either plugins or in Thesis. You should go ahead and change this to whatever it is you want so that it doesn’t conflict with something else. But I’ve chosen byob for that.

We’ve written our function, we have our opening bracket and our closing bracket. Then we have escaped php, we have created our HTML structure which is a div-search and we’ve got a closing div tag. Then we’ve opened up the php again and gotten to the closing bracket again.

Place the Search Form

Now inside of this div we’re going to add our search form. It’s not particularly important that you understand this form that much because this really isn’t about how to create forms, this is really just how to move this specific kind of form into the right spot in your Thesis header. But it is a form element. It’s got the class of search form and it has this action of searching this blog. It has the two different types of inputs that we talked about earlier, it’s got the type equals submit which is a search submit button and it’s got a class that is the text input or input type text input, and we are putting a value in here at the moment of That’s that value that shows up – we could have just as easily say Bob in here instead of saying Search and when you look at it, it would say Bob.

Then name=‘s’, and id=‘s’ are just technical things. They should be included but you don’t necessarily need to understand them at this moment. This is our search inside the header and now we need to take this function and we need to add it to a Thesis hook. This is where we will say add_action, opening and closing parenthesis, opening and closing single quotes and it’s going to be thesis_hook_after_title, space, and then it’s going to be byob_header_search, comma to the outside, semi-colon and this should function properly right out of the box.

Go ahead and hit Save and then let’s go back to FileZilla and upload. Then go back to our website and take a look at what happens. There we go, we’ve got our little Search Thesise-Store, we’ve got a submit button. In fact if we test, let’s say orange for a moment, you can see that the search for the word orange brought up these two books.

Add CSS Styling

Since the functionality works fine what we need to do is add the CSS styling to this search form. If we inspect this element for a moment you can see that we’ve got, input, searchsubmit, that wants to be styled and I think it wants a value here too because you can see by the size of the button. So actually we’ll do that first.

Come over here and instead of value being space, value is going to be search. Hit Save, upload, test it – there we go – now we actually have a search button and a search section. The first thing we’ll do is style this text input and then we’ll style the button.

Style Text Input Using CSS

Come back over here to custom_css and we’re going to stay inside of the Thesis header for the moment. What we’re going to do is to start by grabbing byob-search and then we’ll grab search_form and then we will grab class=text_ input. That is going to be .byob, hyphen, search, space, .search_form, and then .text_input and then opening and closing curly braces, we’ll go up, say font-size: 1.25em. Then let’s say padding: 5 px and then let’s give it a background color of a light yellow. So we’ll call it background-color, colon and we’re going to use ffffdc, colon. Let’s make it a little bit longer – give it a width of 200 pixels.

Style Button Using CSS

Now we’ll do the same thing to our search button and in that case it is going to be byob-search search_form and then we’ll grab the id of searchsubmit. Again we’ll just copy this part. Just copy that whole thing, paste it, byob-search .search_form and instead of that it’s going to be pound sign, search, submit.

We don’t really need it to be 200 pixels we can just drop it down to 100 pixels – we’re going to swap this out with a button any way.

Next we want to shove this over to the side and drop it down a bit. We do that by making this byob-search float to the left and we’re going to give it a top padding. We’ll just come over here above this byob-search, opening, closing and we are going to say float:right. Then we may as well drop it down a little bit so we’ll give it a top padding – so padding-top, colon, 20 pixels. Yeah, that looks pretty good.

Test the Search Form

Take all of that, search copy, then we’ll come over to our custom.css and we’ll drop that in the header space. We’re going to save the document, upload it and then test it here. Oh, we had an error when we saved it so now we’ll save it again. We’ll upload custom.css, we’ll come back and we’ll test it – there we go.

Now that it’s working properly well go ahead and try to search orange. Hit the Search button — there those are. If we search ThesiseStore there are no results found. So this thing here is kind of a problem and what we really want when we click on this is we want it to go away. Right now as far as this is concerned that’s actually a search term. The way we do that is with a little piece of JavaScript. That’s the last thing we’re going to do at this point is to add a little snippet of JavaScript to the end of this text_input class. First I’m going to go copy it, come right in here and paste it.

That little piece of JavaScript is going to say on the focus, that is when a cursor is placed in there, if the value of the focus equals search which is the same as this right here, then make the value equal nothing or blank. This only happens when the mouse is clicked inside of it when it’s focused, otherwise this is its value.

So we’ve done that, saved the document, uploaded our custom_functions.php and we will come over here and test it in Firefox. If we go there, it happens. Now you can test orange or you can test apple and you can see that, that works. Every time you click in here it goes to blank. Let’s test that also in Chrome – okay, that works. We’re going to search for orange, that works. Okay and finally we’re going to test it in Internet Explorer – we select that and it works.

That wraps up Part 6 of Lesson 9, Add Search Form to Thesis Header.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one