Creating the header template

Socrates Premium Wordpress Theme

Socrates Premium Wordpress Theme

Get Instant Access

Copy the code in the segmented HTML template file that's located between the two header comment tags and then paste it into the blank header.php template that's located in your WordPress theme folder.

When building a WordPress theme, it's important to include a doctype because it tells browsers which version of HTML or XHTML you're using and makes it easier for browsers to render your web page correctly. Its presence is also important because any theme lacking this information won't pass validation testing.

Validation testing services check websites to ensure that they don't T contain errors. This is important because if a site doesn't validate it I may not appear as the designer intended it to when it's viewed in various browsers.

If your header doesn't already have a doctype statement, add the following line of code at the very beginning of the header.php template.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

Next, replace <html> with the following. The purpose of the template tag that's included within this <html> tag is to tell the browser which language you're using to create your web page.

<html xmlns=" 99/xhtml" <?php language_ attributes(); ?>>

From there, remove the opening and closing head tags as well as everything in between them. With the original <head> tag gone, a new one has to be added to take it's place. This one, however, won't be exactly like the old one. That's because it contains additional information to tell browsers that your site supports XFN.

Here's the new opening head tag that you need to add to your template:

<head profile="">

This next piece of code should look familiar since it was presented earlier. As you will recall this code is used to dynamically display your blog name and a unique title for each of your web pages.

<?php wp_title('&laquo;', true, 'right'); ?>

Next, enter the following code to include meta information for your website:

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

This next line of code is used to provide a link to the stylesheet for your theme.

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

The following code must now be added so that threaded comments will function properly on your website:

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

Next is what is known as an Action Hook template tag. Action Hooks must be included in order for some aspects of WordPress to operate properly. For example, without this Action Hook, some plugins won't function. That's why you must now add it to header.php.

<?php wp_head(); ?> With all of that code in place, you can now add </head> to close this section.

To learn more about XFN, you can visit the XFN: Introduction and Examples page found at

The next line of code that you need to enter will depend upon whether your site currently displays a text title or a logo image. Either way, you will first need to locate the section of code that's currently responsible for displaying this information.

If your website has a text title, then replace the placeholder title with the following code:

<a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a> If your site uses a logo, then replace it with the following line of code:

<a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/logo.png" alt="Logo" style="border: none;" /></a>

You will, of course, need to replace logo.png with the appropriate name for your image in order for it to appear. You should also replace "Logo" in the alt attribute with the name of your website.

Whether you add either of these next two template tags will depend upon how your current web design is laid out. If your header section contains a navigation bar, then one of the two following template tags will be required.

To place either of them, first locate the unordered list responsible for displaying your navigation bar and then remove all of the list items.

Place the following template tag where your list items were previously located if you would like to display links to your pages:

If, instead, you would like the navigation bar to display links to your categories, then this template tag should be entered where your list items previously appeared.

After adding this last template tag, save header.php. With this template complete, it's time to create the index.php template for your theme.

Was this article helpful?

0 0
Blogging For Maximum Profit

Blogging For Maximum Profit

Working Hard, Working Smart or Both; Without The Right Plan, You're Working For Less Than You Could Be! Do You Have A Plan For Making Some Serious Cash With Your Blog NOW? Then download Blogging For Maximum Profits.

Get My Free Ebook

Post a comment