To start, we create header.php
as follows:
header.php
in your theme directory.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-->
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(); ?>
header.php
and index.php
files and refresh your browser. Your page should look exactly the same.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(); ?>
.
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.