Move the WordPress search box to the header
The default theme in WordPress places the search box in the sidebar. Moving it to the header is relatively easy to do if you’re comfortable making minor changes to the code. The first thing is to find the path to the theme that you are using, for the default theme the path is:
⁄wordpress⁄wp-content⁄themes⁄default
Then using your favourite text editor open up the following files:
- sidebar.php
- header.php
Note: Before you make any changes to these files make sure you have a backup
Next look for the following code fragment in sidebar.php which is used by WordPress to generate the search box (What this code does is to insert the contents of the searchform.php file at this point in the page. The searchform.php file contains the code to produce the search box and the search button).
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
Cut the line of code above from the sidebar.php file and paste it in an appropriate location in the header.php file.
This will move the search form from the sidebar to the header. The end result may look strange because of the CSS styles in use. To get the result seen above in the header of this blog I changed the stylesheet to make the title float left and the search form float right, where you place the search form is down to personal preferences.
Seems like you are a true professional. Did ya study about the issue? hrhr
As obvious as it actually is, I was not able to figure it out by myself
thx
Hi.
I created a template with Artisteer that doesn’t have a sidebar.
There is no sidebar.php, but there is a sidebar1.php.
I cannot find a reference to in any file.
I have a search form located at the bottom of the page and it extends the full width of the page.
Any ideas on how I can move it into the header?
Any suggestions would be greatly appreciated.
Hi there,
The sidebar1.php file will be the one you are looking for, the name can be changed in WordPress so that is the equivalent one for your Artisteer theme. The search form appearing at the bottom of the page and extending for the full width of the page suggests that it is a CSS issue. If you supply a URL I can have a look for you.
Regards,
James
Hi James.
Thanks for the help.
I have now got the search form in the header, but not displaying how I want it to, or positioned where I want it be.
Before I go further the URL is http://www.beachandgardenceremonies.com.au/
As it stands at the moment, the search form appears at the top left hand side of the header.
What I would like is for it to appear at the bottom left of the header.
The search form that appears at the bottom of the pages is easily removed so don’t concern your self with that.
Your assistance is greatly appreciated.
Cheers
Iain
Hi Iain,
The code you are looking will be in your theme folder in the header.php file (or something similar). If you look in there for the code that generates the search form which starts with:
form method=”get” name=”searchform”
Then you need to move that code down below the header, you will see a block of code that contains the text
div class=”art-Header”
If you move the search form to after that “art-header” block of code the result will look like:
Test Html
You can of course move the search form up or down according to where you cut and paste it within the html for the header.
Regards, James
Hi James.
Yeah I had already done that with my first attempt, then changed the form code position within the header code and left it where it is now.
What I am trying to achieve is to have the form over the top of the header image, rather than above or below it.
I have seen it in other sites and wondered how they did it.
Any suggestions?
Cheers
Iain
Hi Iain,
Should be possible, you need to use CSS to float the searchform to the left, something like:
#searchform {
margin: 8px;
float: left;
}
You will have to play with this to get it right, but it should float over the image OK.
Regards, James
Hi James.
Thank you so much for your help, and I hate to bother you further.
I really don’t know CSS well and it seems that I don’t have the knowledge to do this.
I inserted the code shown at the bottom of the stylesheet (style.css), but it made no difference.
I am assuming that having the following code in the header is “absolute” and precludes any CSS formatting.
<form method="get" name="searchform" action="/”>
<input type="text" value="” name=”s” style=”width: 25%;” />
<input class="art-button" type="submit" name="search" value="” />
So I am guessing that this code needs to be replaced with a reference to include the search template only.
So I tried removing that code and replacing it with:
No luck, the search form still displays in an area below the header.
If you want to wipe your hands of this I understand.
You can’t continue to waste time on this.
Cheers
Iain
Hello Iain,
I can probably get this to work if you send me the files from your theme, send the CSS files and the header.php files then it should be relatively easy to work out what is going wrong. Don’t worry about the time, but if you would rather get advice from someone more local where the time lag is not so great then don’t worry.
Regards,
James
Hi James.
I am happy to send you the files.
Just let me know what email address.
So just to confirm, the files you need are:
style.css
header.php
What about the searchform.php file?
Thanks for your time and effort.
Cheers
Iain
i add search box at header but whenever search box margin-left increased automatically the entire header distrubed hoe to solve this problem without effect the header
Hi Sankar,
Can you post a link to your site where the problem occurs and I can have a look for you. It sounds like a CSS problem, but send a link and I can have a look.
Regards, James
Nice Tutorial
Congratz!
oh, I give up, the code keeps disappearing
Hello Jackie, what do you mean, does the code not appear in the page source or does the search box not appear?