Move the WordPress search box to the header

There is an updated version of this article for WordPress 3, see Move the search box to the header – WordPress 3 revision

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.

This entry was posted in Design, WordPress and tagged , . Bookmark the permalink.

26 Responses to Move the WordPress search box to the header

  1. Seems like you are a true professional. Did ya study about the issue? hrhr

  2. Rasmus says:

    As obvious as it actually is, I was not able to figure it out by myself 😛 thx

  3. Iain says:

    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.

  4. jamespiggot says:

    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

  5. Iain says:

    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

  6. jamespiggot says:

    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

  7. Iain says:

    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

  8. jamespiggot says:

    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

  9. Iain says:

    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

  10. jamespiggot says:

    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

  11. Iain says:

    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

  12. sankar says:

    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

  13. jamespiggot says:

    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

  14. Lucas says:

    Nice Tutorial
    Congratz!

  15. This post just saved my bacon, thanks very much.

    If you want to postion it into a smaller box, use this cose instead of the code given above in the header.php:

    I popped it into and it worked great.

    Remember to remove from your sidebar1.php if its there.

  16. sorry, seem to have lost half that post, here goes again:

    remove from sidebar1.php if its there.

    add

    to header.php

    I put it inside
    Inside

  17. oh, I give up, the code keeps disappearing

  18. jamespiggot says:

    Hello Jackie, what do you mean, does the code not appear in the page source or does the search box not appear?

  19. hellonearthis says:

    Awesome tip, I;m using WP3.0 and the line to put into the header.php has changed to this.

    hope that works but if it doesn’t it looks like this
    php get_search_form();
    but inside scripting brackets

  20. Heather says:

    Hi there! I very much appreciate this information: I feel like I’m making headway. I have been trying to learn css as I go to customize my blog/site. I basically want the searchbar to sit at the end of my menu- and having done so with css positioning, I thought I was set. But for some reason, every computer other than mine displays it OVER the text of my menu no matter what I do, so here I am.

    I have moved the code successfully to the header- but I am having trouble positioning it correctly. Basically, after setting the code into the header, where in the stylesheet do I look to tweek it? (I notice it has also lost the former color/text coding I did, so it must be in a different “category” now?)

  21. jamespiggot says:

    Hi Heather, can you post a link to the website where the problem is happening. The problems with CSS styling may happen due to the move, styles can be set based on the parent of an element, if the element (in this case the searchbox) moves then it may have a different parent.

  22. Evette Turro says:

    What a good day for Americans. Now the Iraq-War ended.

  23. NC DMV says:

    Thank you for explaining that, everything is clearer now!

  24. Pat Simpson says:

    I actually like the template or theme you are implementing for this blog, can you let us know where you got it from.

  25. jamespiggot says:

    Hi Pat, the theme is my modified version of the default WordPress theme, I haven’t released it as it work in progress, it will eventually be a child theme for twenty_ten.

  26. :”, I am very thankful to this topic because it really gives great information ,`’

We would love to hear from you so please leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.