How to Add and Customize Widgets in the Twenty Twelve Header

Many users of the Twenty Twelve theme want to add custom elements like search forms, contact information, or ads to their site's header. A common challenge is placing these elements correctly, especially in the upper-right corner, and ensuring they look good on all devices. This guide covers the most effective methods to achieve this.

Why This Is Necessary

The default Twenty Twelve header is designed for a site title, description, and logo. It does not include a built-in widget area for adding other elements. To add custom content without modifying the parent theme directly (which is lost on updates), creating a child theme is the universally recommended first step.

Method 1: Editing the Header.php File (Most Common Solution)

This method involves adding code directly to your header.php file within a child theme. This gives you the most control over where the new content is placed.

1. Create a Child Theme: If you haven't already, you must create a child theme. This protects your changes from being overwritten when the parent theme updates. The official WordPress Codex provides a guide on creating a basic child theme.
2. Copy header.php: Copy the `header.php` file from the parent Twenty Twelve theme folder into your child theme's directory.
3. Edit the File: Open the `header.php` file in your child theme. To add a search form to the right of the site description, for example, you can add the following code after the <hgroup> section:

   <div class="alignright">
       <?php get_search_form(); ?>
   </div><!-- .alignright -->

4. Add Custom HTML: You can insert any custom HTML or PHP code in this location, such as an opt-in form or Google AdSense code.

Method 2: Creating a New Widget Area

For users who prefer managing content through the WordPress admin dashboard instead of editing template files, creating a new widget area in the header is an excellent option.

1. Edit functions.php: In your child theme, add the following code to the `functions.php` file to register a new widget area:

   <?php
   function my_child_theme_widgets_init() {
       register_sidebar( array(
           'name' => __( 'Header Widget Area', 'my-child-theme' ),
           'id' => 'header-widget',
           'before_widget' => '<aside id="%1$s" class="widget %2$s">',
           'after_widget' => '</aside>',
           'before_title' => '<h3 class="widget-title">',
           'after_title' => '</h3>',
       ) );
   }
   add_action( 'widgets_init', 'my_child_theme_widgets_init' );
   ?>

2. Call the Widget Area: In your child theme's `header.php` file, add the following code where you want the widget to appear (e.g., after the <hgroup>):

   <?php if ( is_active_sidebar( 'header-widget' ) ) : ?>
       <div class="header-widget-area">
           <?php dynamic_sidebar( 'header-widget' ); ?>
       </div>
   <?php endif; ?>

3. Style with CSS: You will likely need to use CSS to position the widget. For example, to align it to the right and level with the logo, you could add this to your child theme's `style.css`:

   .header-widget-area {
       float: right;
       margin-top: -60px; /* Adjust this value as needed */
   }

Method 3: Styling and Responsive Control with CSS

Once your content is in place, you will need CSS to style it and control its visibility on different screen sizes.

• Absolute Positioning: To overlay content on top of the header image, use absolute positioning. First, set the header to `relative`, then position the element inside it.

  #masthead {
      position: relative;
  }
  #masthead > .your-element-class {
      position: absolute;
      right: 10px;
      top: 20px;
  }

• Hiding Elements on Mobile: To hide a widget or other element on mobile devices, use a CSS media query.

  @media screen and (max-width: 480px) {
      .your-element-class {
          display: none;
      }
  }

• Widening a Search Form: To adjust the width of a search form added to the header, target its ID or class.

  #masthead .search-form input[type="search"] {
      width: 250px; /* Adjust to your preferred width */
  }

Troubleshooting Common Issues

• Child Theme Not Working: If your site looks broken after creating a child theme, double-check that the `Template:` line in your child theme's `style.css` correctly references the parent theme: Template: twentytwelve.
• Finding Widget IDs/Classes: To style a specific widget, you need to find its unique ID or class. Use your browser's inspection tool (like Chrome DevTools or Firefox Developer Tools) to inspect the widget on your live site. Look for classes like .widget_search or IDs like #nav_menu-2.

By following these methods, you can successfully add, position, and style various elements in your Twenty Twelve header. The key is always to work within a child theme to ensure your customizations remain safe through future updates.