Move the search box to the header – WordPress 3 revision

The default Twenty Ten theme in WordPress 3 places the search box in the sidebar if you are not using any widgets. 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⁄twentyten

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 form.

<li id="search" class="widget-container widget_search">
<?php get_search_form(); ?>
</li>

Cut the middle line of code above from the sidebar.php file and paste it in the following location in the header.php file.

</div><!-- #branding -->
<?php get_search_form(); ?> 
<div id="access" role="navigation">

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 correct this add the following lines to the style.css file for the theme.

/* This is the search form in the header */
#searchform	{
	float: right;
	margin-top: -64px;
        z-index: 200;
}

You may need to adjust the CSS to cater for the size of image in use in the header, the above works correctly with the standard out of the box Twenty Ten Image.

Note the addition of the z-index CSS rule to the above code fragment, it was pointed out in a comment below by Christel that the search form was being hidden by the header image. The Twenty Ten theme gives the image a z-index of 100 so the search form needs to have a higher z-index to force it to appear on top.

There are other files in Themes that also have the search form. As the search form is now appearing in the header and the CSS has changed, the redundant search forms needs to be removed from these files.

For the Twenty Ten theme these files also contain the search form:

  • 404.php
  • loop.php
  • search.php
This entry was posted in WordPress. Bookmark the permalink.

33 Responses to Move the search box to the header – WordPress 3 revision

  1. Pingback: Move the WordPress search box to the header | fuzzymargins

  2. Гений, прикованный к чиновничьему столу, должен умереть или сойти с ума, точно так же, как человек с могучим телосложением при сидячей жизни и скромном поведении умирает от апоплексического удара.

  3. Christel says:

    The search box is now BEHIND my header picture (I can briefly see it when the page is charging). Any idea what I am doing wrong ?

  4. jamespiggot says:

    Christel, that may be due to the z-index of the search form, if you add z-index to the #searchfom line in the style.css file as follows:

    #searchform { float: right; margin-top: -64px; z-index: 100; }

    Does that cure the problem?

  5. jamespiggot says:

    @christel Sorry, correction to the statement above, the z-index should be higher than 100 to force the search form to appear on top of the header image. This post has been updated to reflect this.

  6. jamespiggot says:

    This post above has been updated to include the higher z-index required to force the search form to appear on top of the header image.

    Also updated to specify that there are other files in the standard theme that should be edited to remove the search form.

  7. Tony B says:

    On trying this out my search box was just weird. I had put in widgets and removed them to try to get the search box back as it was, but it appeared as two inputs with question marks inside diamonds inside the inputs. Not sure why this happened, any thoughts?

  8. jamespiggot says:

    @tonyb The question marks within diamonds are unrecognised characters, most browsers will render things they cannot interpret as displayable characters in this way, but that may be have little to do with your problem. If you post a link to the website with the problem I will have a look. Also what theme are you using, and what version of WordPress?

    One thing worth checking is to make sure you have balanced the quotes in the code correctly, as unbalanced quotes can cause all sorts of problems.

  9. Tony B says:

    Thanks – I can’t post a link because it’s just a test site on my machine. I’m new to both wordpress and php! but to my knowledge I haven’t changed any code, just put widgets in and taken them out again.

  10. jamespiggot says:

    It may be a question of what encoding you are using. Can you check in:

    Settings

    Reading

    Encoding for pages and feeds

    Then see whether this has been set to UTF-8? If it isn’t then you can try setting it to see whether that has any effect.

  11. Tony B says:

    Yes, it is set as UTF-8

  12. jamespiggot says:

    Right, well that rules that one out, what theme are you using Tony, are you using the WordPress default out of the box theme?

  13. Tony B says:

    Yes, the twenty ten theme.

  14. Tony B says:

    I’ve ended up re-installing it, now works fine. Thanks for your help.

  15. jamespiggot says:

    Glad to hear you have solved the problem, that is good news.

  16. kjohnson says:

    Worked like a charm – thanks!

  17. Joe says:

    Wonderful info, with some tweaks I got it to my top bar. thanks

  18. littlerumper says:

    Awsome tip!… I’ve got mine to go to the header, but…
    When I removed the search widget from the sidebar (which is now empty), I see an archive link pop-in and a header ‘meta’ with a login link.  I’m guessing something breaks with the sidebar.php or functions.php.
    I originally only had the search widget on the right in the column (twenty ten theme).  I will require the right column still for other widgets, but am curious as to why when I removed the search from it, it populated with parts from other widgets…

  19. jamespiggot says:

    That is the standard behaviour for WordPress, when you remove the last widget from the sidebar it reverts to displaying whatever is set up in the sidebar.php. This often results in just a link to Archives being displayed. If you are using the default theme then you change this by either adding a widget to the sidebar or editing the sidebar.php file to remove the code around the call to wp_get_archives (this is similar to moving the search box except you will not move the archives anywhere, you are just removing them from the sidebar).

    Let me know if this reply is not clear, good look with your blog, James

  20. GerdaHome says:

    Hi,
    I wish to do this, but I’m using WP 3.x and my theme is made by Artisteer 3.x
    I get the searchbox into the header, but I cannot style and move it to the position I like.
    And the searchbox isn’t working (you cannot type in searchwords, no cursor)
    Someone ideas ??
    greetings from Holland.
    Gerda

  21. jamespiggot says:

    Hi Gerda,

    Greetings from Oxford!

    There was a guy called Iain who had similar problems with moving the searchbox and he was using the Artisteer theme as well, the comments are on the other article on this blog.

    If you post a link I will have a look for you to see if I can spot anything.

    Regards,

    James

  22. GerdaHome says:

    Hey,  you can take a look at http://www.ghaverlag.nl
    it’s my testing site.

    grtz
    Gerda

  23. jamespiggot says:

    Hi again,

    I had a look and there is no obvious reason, the search box and search button are not disabled or read-only. Is it Javascript that is disabling the form? I think this must be something that Artisteer is doing behind the scenes.

    Regards,
    James

  24. Jim says:

    Thanks very much for these instructions to move the search widget up into Twentyten’s header.  I now have my search box at the very top of the header and I want to put another one of my widgets, called Login With Ajax, into the header, so it’s just below the search box.  Can you instruct me on how to do this?  THANK YOU!

  25. Jim says:

    Hi . . . I could REALLY use some help from a smart person who can guide me in the steps of getting my Login With Ajax widget moved up into the header, just as I moved my search widget up there from the right-hand sidebar.

  26. jamespiggot says:

    Hi Jim, apologies for not replying earlier, I will have a look at this on the weekend. If you are keen on getting it solved sooner you could try posting a query on the WordPress .org support forums. Regards, James

  27. Jim says:

    Thanks, James, I definitely would appreciate any help you can provide.  I’ve found several tutorials on various sites about widgetizing areas of a WP site, but none of them are working for me.  At some point in the tutorial they give an instruction that isn’t specific enough, or says, “Find this piece of code in style.css (or some other file)” and I can’t find it, even when I use Ctrl-F to search the entire file.

  28. jamespiggot says:

    Hi Jim,

    Did you manage to solve your problems with moving the login widget to the header?

  29. Ewien says:

    First attempt, but search box became NOT visible in the header. Might this be b/cause of the subtitle (Anco & Ewien…) displayed as where it is now…?

  30. Ewien says:

    You may forget my former comment, found the solution…wondering what exactly the last phrase means?: the “redundant” search forms needs to be removed from these files
     

  31. izrada sajta says:

    Hey nice , right now im doing something like you explaine. I will came back and post my results.

  32. brent says:

    One other thing to point out. I was seeing double search boxes on my wp site and could not figure it out for a while. You also need to go into the admin widget area and drag the search box widget to inactive. I kept clearing my cache to see if that was the trick but it just would not go away until i dis-activated it within.

  33. nithya says:

    there is no such line in my sidebar.php my version of wordpress is 3.1.3 please give me replay as soon as possible.

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.