WP Theme Lesson #4b: Header Template Continues

Alright, this the fourth lesson of the WordPress tutorial series. I shouldn’t have to say it, but I’ll say it one last time; make sure you read the previous lessons. Otherwise, you will not understand one thing in this lesson. We have a quick lesson today to wrap up the header template and introduce the box model.

Step 1:
- Start Xampp control
- Open the theme’s folder, named Tutorial
- Open a browser, point it to http://localhost/wordpress
- Go back to the theme folder, open index.php in Notepad

Step 2:
Currently, you have:
<a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a>

Add <h1> and </h1> around it. The H1 tag means heading 1. There are six headings all together: H1, H2, H3, H4, H5, H6. By default, H1 is the biggest one in size and H6 is smallest.

So now you have:
<h1><a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a></h1>
Save it, go back to the browser and refresh.

Step 3:
Call for your blog’s description, type <?php bloginfo(’description’); ?> right under the codes for the title link. Now you have:

<h1><a href=”<?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a></h1>
<?php bloginfo(’description’); ?>

Save it, refresh your browser to see your blog’s description appear under the title link. You can change your blog’s description in the administration area later.

<?php - start PHP
bloginfo(’description’) - call for my blog’s information, specifically description
; - stop calling for the description
?> end PHP

Step 4: This step introduces you to a new tag, the DIV tag.

Type <div> and </div> around everything:

<div>

<h1><a href=”?php bloginfo(’url’); ?>”><?php bloginfo(’name’); ?></a></h1>
<?php bloginfo(’description’); ?>

</div>

Save it, refresh your browser. You should see no changes.

Think of DIV as an invisible box. It’s there to separate your blog’s title link and blog’s description from everything else. If you don’t style it, it does nothing other than separate content. Later on, you’ll use the style.css file to style your invisible box. You can give DIV borders, paddings, margins, background color, background images, etcetera.

Step 5:

Add id=”header” to the DIV tag, like this:
<div id=”header”>

Save your notepad, refresh your browser.

This change also does nothing, for now. We assign an ID to the DIV tag because there will be more DIVs or invisible boxes. You need a way to separate one invisible box from another right?

Follow this WordPress Theme Tutorial Series from the beginning.