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

</hgroup>

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 {
		margin-top:5px;
		text-align:center;
		float:none;
	}
	.main-navigation  {
		clear:both;
	}
}

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)

Comments

  1. says

    Hi! I’ve successfully used this to place a search form in the header of a website: http://strongerwithjeng.com. 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 says

    Hi,

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

    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.

  4. says

    Awesome, it worked for me. Tried many solutions but this is the only one which has placed the search bar at right place. I am using it with different theme but it still worked. Thanks a lot.

  5. says

    Thank Zeaks
    All your tutorial for the chold theme, is really helpful for those want to customize the wordpress theme. It seems you know a lot about web design. I bookmark your website, cause lot some useful information for tweak the website
    Regards
    Wayan Adika

Leave a Reply