Twenty Twelve Theme – Search Form in Header

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

<div class="header-search"><?php get_search_form(); ?></div>

Save and close header.php

Open style.css and add this to it

.header-search {
    float: right;
    margin-top: -50px;
@media (max-width: 650px) {
	.header-search {
	.main-navigation  {

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)

52 thoughts on “Twenty Twelve Theme – Search Form in Header

  1. Wendy Wainwright

    Hi! I’ve successfully used this to place a search form in the header of a website: I’d like to remove the submit button and put the word “search” in the box. I’ve been googling it for two weeks and I’m still stuck! I’ve also had no trouble implementing your three column theme. Your tutorials are awesome!

  2. Sander


    How about an explanation on how to correct this with multiple browsers? IE looks different than FF.Same goes for the searchbox in the twentyten theme

  3. Milan

    Hi yes, I was also looking for this one, especially ‘float’ property, many thanks.

    However using ‘margin’ for search box is not the best solution for responsive mobile version, where page title and search box were overlapped, so I had to get rid of that.

    Regards, Milan.


Leave a Reply