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)

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

  1. jeff

    Awesome. Thanks for this. One quick question though. The search box is positioned above and to the right of the header text. How do I get it to be inline and to the right of the text?

    Thanks a ton!
    jeff recently posted..Hello world!My Profile

    1. Zeaks Post author

      Hi Jeff,
      You should be able to adjust the margins. I took a look at your site and it looks like you’ve added the search form in a different area in header.php.

      It should be below the hgroup and above the navigation like this

      <div class="header-search"><?php get_search_form(); ?></div>
      		<nav id="site-navigation" class="main-navigation" role="navigation">

      If it’s within the hgroup, then the margins will also push the site title up or down.

      1. jeff

        Thanks for the quick response. You are absolutely right, I had the code in the in the wrong area (it was just below and not ).

        Thanks again!
        jeff recently posted..Hello world!My Profile

  2. Pingback: 如何给Twenty Twelve主题头部添加一个搜索框 | SayBlog.Me

  3. Joanne

    Thanks for posting how to do this! I used relative positioning for the theme I’m working with. It was nice of you to include a media query style for small screens!

    .header-search {
        position: relative;
    	text-align: right;
    	padding-right: 50px;
    	margin-top: -30px;
    	top: 30px;

    Joanne recently posted..Is Your Website Helping You Grow?My Profile


Leave a Reply

Please use the forums for questions that do not relate to this post.
Wrap all code in [code] Your Code Here [/code] tags.

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge