search-form-wordpress

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)

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

    Reply
    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

      		</hgroup>
      <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.

      Reply
      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

    Reply

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