Time for action – creating the header.php file

To start, we create header.php as follows:

  1. Create a file called header.php in your theme directory.
  2. Open up your index.php file and cut everything from DOCTYPE at the very top of the file down to the end of the <header> tag or the main <nav> tag, depending on the structure of your markup. For our theme, the code we need to cut is as follows:
    <html lang="en" class='no-js'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!--for mobile ready-->	
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="apple-touch-icon" sizes="57x57" href="images/pngs/apple-touch-icon-57x57.png"/>
<link rel="apple-touch-icon" sizes="72x72" href="images/pngs/apple-touch-icon-72x72.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="images/pngs/apple-touch-icon-114x114.png"/>

<meta name="description" content="Description of content that contains top keyword phrases"></meta>
<meta name="keywords" content="Key words and phrases, comma separated, not directly used in content - Google ignores this tag but used in other engines as a fall back"></meta>

<title>Open Source Online Magazine</title>

<!--//style sheets-->
<link media="all" rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'), ?>" />

<!--//javascripts-->
<script src="js/modernizr.custom.20796.js"></script>

<!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <link media="all" rel="stylesheet" type="text/css" href="css/style-ie.css" />
<![endif]-->

</head>
<body <?php body_class($class); ?>>
<div id="container">
<header class="">
<hgroup class="screen-reader-text">
  <h1>OpenSource</h1>
    <h2>Online Magazine</h2>

    <p><em>Using Open Source for work and play</em></p>
    </hgroup>
</header>

<nav id="mainNav" class="grd-vt-tertiary shdw-centered">
  <h2 class="screen-reader-text">Main Navigation:</h2>
    <ul class="sfTab">
      <li class="current_page_item"><a href="#">The Zine</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Resources</a></li>
      <li><a href="#">Contact</a></li>
</ul>
</nav><!--//top_navlist-->
  3. Paste that into your header.php file, and in your index.php file include the header back in with the get_header include template tag at the very beginning of the file:
    <?php get_header(); ?>
  4. Save both the header.php and index.php files and refresh your browser. Your page should look exactly the same.

What just happened?

We cut the <head> section of the index.php file as well as the header of our site design, and pasted that into a new header.php file.

We then added an include to make sure that index.php still displays the content of header.php: <?php get_header(); ?>.

Separating out our sidebar

The next step is to create a template file for the sidebar. This will include widget areas, which we will create in Chapter 4, Advanced Theme Features, replacing our existing static text.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.17.6.75