How to Add Your Logo in Wordpress

We’ll be working with the search box. Here in the demo site for the thesis theme and I’m scrolling down just a little bit to show you where you’ll find the search box in this case, so it’s right here in one of the side bars.

You can position the search box anywhere that you want by using hooks. What we will be doing then is positioning that search box to the right of our navigation. Let’s close this and go to the site we’re going to be working with and there’s no search box at all right now.

The first thing you do is you open up your custom_functions.php around line 12 you’re going to find this comment that begins with delete this line that’s where you’re going to start putting your functions.

So, the first thing you have to is to remove the navigation okay and that’s what we’re doing here. If we jump back to our site the navigation disappears that’s fine. Let’s go back to our file and the next step is going to be to add your own custom navigation. We’re going to put the thesis navigation back in but we’re going to wrap it in our containers, so we have two containers that we’re adding.

The first one, the first div we’re putting the ID of nav. The second one that’s going to have a class of nav_container then we are adding the regular thesis navigation we’re reusing it we’re putting it back in, in this nav container and also we’re putting in the search box, so that’s what this function does. It wraps the thesis navigation in our own containers along with the search box.

The next thing we need to do is add this action which will place our custom navigation on above the header, so let’s save this file, go back to our site refresh, so now we have the navigation back and we have the search box up there but it’s not exactly where we want it to be.

Open your custom.css file which I had it open right here there’s nothing in there, that’s completely blank. I want to paste the styles and save the file, go back to Firefox to see what we got. Alright, so it looks good to me.

Now, the search box is floated to the right. It’s the right size, everything looks fine so far. Now there’s a problem that we don’t see yet. If you were to type just whatever or something does a make sense in there and press Enter you see that there’s another search box here.

Well, this search box will not suppose to look like this. Originally, let me show you what it looks like if I’m going to the demo site okay, so this one looks a lot nicer. It’s a line all the way to the left. It’s not ginormous like ours, so the CSS that we just put in affected the search box, so we need to go back to CSS and specify that we only want those styles to apply to this search box and nothing else.

Let’s do that. We need to make our selector a lot more specific, so we’re going to add divclassnav_container. Make sure you add it to both selectors then save your file and go back to your site, refresh and that’s it.