How to Customize Header of Twenty Thirteen Theme in WordPress

WordPress has launched version 3.6 with few improvements. One of the good news is latest WordPress theme Twenty thirteen. This is completely a responsive theme with floating layout. It is being felt that wordpressdotorg themes are very good but customization features are limited. In such situation, user need to look into coding part of Twenty Thirteen theme.

Twenty Thirteen Header

[Child theme is highly recommended before applying any changes. For creating child theme, look at the Article How to create child theme]

Twenty thirteen theme is full width theme so the header also occupies full screen. Twenty thirteen has three segments in header section.

  1. Header background – This occupies complete window. It has max width defined up to 1600 pixels and minimum height of 230 pixels. This background image has link for website home page also.
  2. Site title and description – On the top of header background, site title and site description are printed. Both the site title and site description values are picked from the settings of WordPress.
  3. Navigation menu – Navigation menu is below the header image.

 

Header Start <header id=”masthead” class=”site-header” role=”banner”>            
Background Image
Site Title
Site Description
<a class=”home-link” href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”>
    <h1 class=”site-title”><?php bloginfo( ‘name’ ); ?></h1>
    <h2 class=”site-description”><?php bloginfo( ‘description’ ); ?></h2>

</a>            

Navigation Bar <div id=”navbar” class=”navbar”>
    <nav id=”site-navigation” class=”navigation main-navigation” role=”navigation”>
        <h3 class=”menu-toggle”><?php _e( ‘Menu’, ‘twentythirteen’ ); ?></h3>

        <a class=”screen-reader-text skip-link” href=”#content” title=”<?php esc_attr_e( ‘Skip to content’, ‘twentythirteen’ ); ?>”><?php _e( ‘Skip to content’, ‘twentythirteen’ ); ?></a>

        <?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘menu_class’ => ‘nav-menu’ ) ); ?>

        <?php get_search_form(); ?>

    </nav><!– #site-navigation –>

</div><!– #navbar –>        

Header End </header><!– #masthead –>

Now look at the details of all these three segments and their properties. There are three files which include necessary parameters for Twenty Thirteen header. These are header.php , style.css and custom-header.php .

Header background– Background image is centered and stretched to full length up to 1600px as per the default settings. Default minimum height is 230px. The background image is not responsive in nature therefore it is sliced around the edges in smaller display. The width and height of background image is controlled by a function twentythirteen_header_style().This function is used for the front end style of background image in header and it is written in custom-header.php. The background image is printed with <a> </a> tag which includes the link of home page.

Header Title and Description– Site title is printed with h1 tag and site description is printed with h2 tag. They have specific font size and color which is controlled by css class .site-title and .site-description respectively.

Navigation bar– Navigation bar is enclosed within a div tag with id navbar. The css properties of different elements in navigation bar is given in item 4.2 of style.css .Here user can change settings for look and feel of navigation menu.

How to use website logo in the header of Twenty Thirteen Theme

Instead of changing the properties of header background and converting it to an image for logo, an image tag can be directly placed in the header function.

<img class=”header-logo” src=”http://www.findurlaptop.com/tech/wp-content/uploads/2013/07/cropped-Findurlaptop_Logo.png” />

 Here the CSS class header-logo is defined in style.css. This css has responsive property for logo image.

.header-logo {max-width:90%;position: relative;

display:block;

padding-top:20px;

margin-right:auto;

margin-left:auto;

}

 So overall header section code looks like this.

<header id=”masthead” class=”site-header” role=”banner”><a class=”home-link” href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”>

<img class=”header-logo” src=”http://www.findurlaptop.com/tech/wp-content/uploads/2013/07/cropped-Findurlaptop_Logo.png”/>

<h1 class=”site-title”><?php bloginfo( ‘name’ ); ?></h1>

<h2 class=”site-description”><?php bloginfo( ‘description’ ); ?></h2>

</a>

 

<div id=”navbar” class=”navbar”>

<nav id=”site-navigation” class=”navigation main-navigation” role=”navigation”>

<h3 class=”menu-toggle”><?php _e( ‘Menu’, ‘twentythirteen’ ); ?></h3>

<a class=”screen-reader-text skip-link” href=”#content” title=”<?php esc_attr_e( ‘Skip to content’, ‘twentythirteen’ ); ?>”><?php _e( ‘Skip to content’, ‘twentythirteen’ ); ?></a>

<?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘menu_class’ => ‘nav-menu’ ) ); ?>

<?php get_search_form(); ?>

</nav><!– #site-navigation –>

</div><!– #navbar –>

 

</header><!– #masthead –>

So list the actions for inserting logo image in theme header are:

  1. Insert image tag in header.php as shown above.
  2. Create css class in style.css as shown in example header-logo.

User can further customize the look and feel of Logo image.

How to use top level navigation menu in place of default Navigation menu

This is quite simple in Twenty Thirteen, as already learnt the segment of code for navigation menu, it can be positioned prior to background image and site title in header.php. The modified code will look like this

<header id=”masthead” class=”site-header” role=”banner”><div id=”navbar” class=”navbar”>

        <nav id=”site-navigation” class=”navigation main-navigation” role=”navigation”>

        <h3 class=”menu-toggle”><?php _e( ‘Menu’, ‘twentythirteen’ ); ?></h3>

        <a class=”screen-reader-text skip-link” href=”#content” title=”<?php esc_attr_e( ‘Skip to content’, ‘twentythirteen’ ); ?>”><?php _e( ‘Skip to content’, ‘twentythirteen’ ); ?></a>

        <?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘menu_class’ => ‘nav-menu’ ) ); ?>

        <?php get_search_form(); ?>

        </nav><!– #site-navigation –>

    </div><!– #navbar –>

 

 

<a class=”home-link” href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”>

<h1 class=”site-title”><?php bloginfo( ‘name’ ); ?></h1>

<h2 class=”site-description”><?php bloginfo( ‘description’ ); ?></h2>

</a>

 

</header><!– #masthead –>

There are number of permutations and combinations possible for changes in header. Article is focused for preliminary information on header customization in Twenty Thirteen theme. User needs and experience is welcomed for community welfare.

Comments

  1. Faruk Ozturkmen says

    Hi

    Can you please clarify where and which file actually this goes to? ..because you talk about the header ‘..directly placed in the header function’ but you are showing the code in the ‘header.php’ (‘……So overall header section code looks like this.’)

    <a class=”home-link” href=”” title=”” rel=”home”>

    etc

  2. Faruk Ozturkmen says

    Ok It’s working now but I can’t seem to position exactly where I want. I want it little down.

    padding-top:20px; did nothing to it.

    .header-logo {max-width:90%;
    position: relative;
    display:block;
    padding-top:20px;
    margin-right:auto;
    margin-left:auto;
    }

  3. Fabian says

    I’m not sure if I understood you correctly:
    If I will use your code, will I get a logo which overlays the headerimage at a special point (and will be visible on every screensize), or do you just replace the whole header?

    What should the size of the logo be?

  4. Brian Smith says

    I would like to keep the header image and header text, just want to add a logo in front of the header text…Can you help out with this please! Iit doesnt work the same as it did with 2102)

    Thnaks in advance!

    • Spruha says

      Hi Brian,

      Try this:

      1. Go to your header.php file.
      2. Find code. (Here the “code” is: ?php bloginfo( ‘name’ ); ?. But this comment section does not allow displaying it.)
      3. Replace code with the following:

      Specify your path to the logo image on your server and an alt name.
      4. You can customize the height, width, and/or border and other specifications.

      Thanks,
      Spruha

  5. Higgi says

    Image Missing icon appears. I’ve triple checked everything is in place, the alt text shows when I hover the curser, but no image.

  6. Michael Brice says

    I have tied to follow the instructions provided and the result appears to be that my logo is positioned in the centre of the header background image in a line above the site title and and the site tagline. My objective is to have the logo/icon displayed to the left of the site title, on the same line. Is this possible ?

Leave a Reply

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 class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">