Alright, this is my fourth lesson in the ‘WordPress theme development for noobs‘ series. Make sure that you have read the past lessons in the series to get into the topic we discuss in this lesson. if you didn’t started yet, Good luck ! Yesterday we have created first template files of the theme we are building. In this lesson we will learn the use of some more WP loops and php codes.
The template we create today is the header.php, in the header.php you will define the paths of style sheets, include meta tags, functions to display title of the blog properly etc.
Remember one more thing, don’t copy-paste the code snippets I vomited here 
better you type them yourself referring this page, it will keep them in your mind for ever, else it will be like a flash light.
Step 1: Make sure that localhost is running on your computer (Go and read old post if you don’t know) and open http://localhost/wordpress in a new browser window (or tab). And keep the theme directory we made yesterday opened. %drive%\www\webapps\wordpress\wp-content\themes\tutorial\ Now you can find two files inside it, style.css and index.php.
Step 2: Create a new blank template file header.php for our today’s lessons, as I have said in the introduction of this post, header.php is used to include communicate with browser and search engines using meta tags, and say WordPress about the path to the StyleSheet, and add RSS feed url etc.. simply 
that’s the use of header php, if you take a look at the mockup of the theme we are going to create you can see the navigation bar and search box are on the top, so we are adding codes for that also into the header.php
To create a blank header.php file, open intype or any text editor and Click ‘Save As’ from ‘File’ menu and save the file in the folder of our theme ‘tutorial’ as header.php along with extension.
Now you have a blank header.php opened in your desktop ready to get dirty with codes. Now we have to add some default stuffs to it, like the HTML Doctype, some meta tags etc. bellow are them, add it to the header.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title> <!-- For the title bar of the Browser window -->
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <!-- Adds style.css -->
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
</head>
<body> <!-- Body of the page starts after this line -->What you did is added some information for browser and search engines, which is not applicable for human. I have commented the above code for some additional information. Now you must be thinking why we didn’t closed the <html> and <body> tags, there is a reason, footer is the end of our theme, and the <html> and <body> tags are important from top to bottom of our theme, we will be closing them only at footer.php in the future class.
Step 3: OK, come back to the header.php, Now we have to add some codes to display the title of our blog.
<?php bloginfo(’name’); ?>
adding the above snippet will display the title of our blog in the page, save the header.php after adding this code in <body> section and refresh the http://localhost/wordpress/ page to see the change above code made.
What you have done
What you just did is called the blog’s Title to the whole design by adding one line of code. bloginfo() is a WP function used to print anything to browser that you have given in the user profile of the WordPress blog. In depth:
<?php – Start php code
bloginfo('name') – Call blog related information- Here the Name of the blog
; – End to the bloginfo()
?> – End to the php code
When ever you make changes to the template files we creates, save the php file and refresh the browser window to see changes made, never mind if something goes wrong, WordPress is a big ecosystem you will get help everywhere, of simply add a comment here. We only learns from mistakes, I follows the trial and error method even now ! -The best way to learn something new.
Step 4: Now you only have the name of the blog printed there, don’t you need it linked to the homepage of the blog ? ok we have to work for that now. Using <?php bloginfo(’url’); ?> inside the quotes of href=”" will make the Blog Title a link ! Like this:
<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
Save header.php along with this code after the last line, and see the change in the browser window. Worked ?!
If you clicking on that link from any page it will take you to the home page of the blog. Now you are seeing it on localhost with just one page, in the future we will create more pages so that you can see how it works in other pages.
What we have done
<?php – Start php code
bloginfo('url') – Call blog related information- Here the link to homepage
; – End to the bloginfo()
?> – End to the php code
<a> </a> – The opening and closing tag for a link in xhtml, we have to close the link with </a> at the end of the text we needed as a link.
href="" – the short for hyperlink, anything that comes in between the quotes will be considered as a value for link
<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
This code means I am starting a link to blog’s homepage on the text -Blog’s name.
This is our header.php now :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title> <!-- For the title bar of the Browser window -->
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <!-- Adds style.css -->
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
</head>
<body> <!-- Body of the page starts after this line -->
<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>Today we did some more php along with the xHTML, don’t go out of the track, follow the full series of posts in my ‘WordPress Development for noobs‘ series, and add doubts in comments.
Pingback: Episode 5: Header template continues | FeatherPot