Twenty Twelve Theme – Search Form in Header

Tutorials,

Here’s how to add a responsive search form to the header of Twenty Twelve theme.

Create a child theme before doing this, modifying parent theme template files only causes problems later on.

Copy header.php to your child theme directory and open it.

Find the line that reads

Copy this directly below it

Save and close header.php

Open style.css and add this to it

Save and close style.css and view your site and it should look just like the one at the top of this site. (removed to make room for adsense)

41 thoughts on “Twenty Twelve Theme – Search Form in Header”

  1. Hi Zeaks,

    Thank you for making this post and it was exactly what I was looking to do. I am having a problem getting the search form to move to the right hand side of my theme. I have downloaded your child theme, copied and amended the head.php file and added the sample code to the style.css

    Any help would be appreciated.

    Thanks

    Matt

    Reply

    1. Hi Matt, looks like you have the searchform floated left, change it to float: right like this

      Reply

      1. I forgot that I had changed that setting. I was trying to see if aligning it left then right would make a difference.

        When you said add it to the style.css then I am assuming that you mean the one in the child theme?

        I have cleared the browser cache, tried different browsers, disabled any caching, but I cannot get it to align to the right. Any ideas?

        Thanks Matt

  2. I have worked out what is happening. My provider seems to be doing some form of caching and I have felt it for a few hours and now its working.

    Great article and thanks for assistance.

    Matt

    Reply

  3. Hello,
    I used this code to move my search bar on the right side,
    but when I go to my site in internet explorer it still sits on the left, over my logo

    any ideas on how to fix this?

    Reply

    1. Hi Mario, try this

      Reply

      1. Didnt work :/

        I realized that twentytwelve (im using a child theme) has its on ie.css that comes into play when wordpress reads internet explorer, i tried to see if theres a conflicting code in there but nothing seems to work towards the search widget.

        my whole site looks fine in internet explorer, its just the search bar that refuses to move.
        i mean the original coding from this post worked to get it right where it needs to be in chrome, and firefox, as for internet explorer the code worked to get my search to display in the header, but it refuses to move over the search bar.

        the site is Mixx Shuz

  4. Hi Mario, try adding it to the bottom of the style.css if you’ve added other CSS to your child theme. This is the same code I’ve used in the Twenty Plus Pro theme http://zeaks.org/ttodemo and the search displays as it shoul din FF, Chrome, IE 7-10

    I’d also disable any plugins you have active to rule them out as a possible problem.

    Reply

    1. If you want to send me a copy of your child theme, I’ll take a look on my test site and see if I can figure out the problem. Debugging for IE is a pain sometimes. Use the contact form at the top if you want to do this.

      Reply

  6. Would it be possible to modify this to insert a logo as opposed to a search box in the upper right, adjacent to the site title?

    Reply

  7. Hi Scott,

    thanks for this tutorial!

    Do you have any suggestions how to place the header-search div on top (not above) the header image (so the search form would be ‘inside’ the header image) in a twentytwelve child theme?

    Thanks again!

    Reply

  8. Hi Zeaks. Thanks for your post (which I followed successfully to make some mods!). I’m working on re-designing my site using twenty twelve and am having some trouble getting my head around certain aspects. Do you mind telling me how you got your header to spread right across the page like that, pls? Will that appear OK on cellphone screens and iPads etc?

    Cheers!
    rolanstein

    Reply

    1. Hi Rolanstein, this site does not use Twenty Twelve, it’s using a child theme of the new upcoming default theme Thirtyten. If you download a nightly build you can take a look at the files to see how they did it. I haven’t had a chance to view it yet myself.

      I would imagine it’s just a very wide header image 1600px that scales to fit the device it’s viewed on by using max-width.

      Reply

Leave a Reply - Use <pre>YOUR CODE</pre> when posting code.