Home Tutorials WP Theme Lesson #4b: Header Template Continues

WP Theme Lesson #4b: Header Template Continues



Updated on


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:


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


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 borderspaddingsmarginsbackground colorbackground 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.


Please enter your comment!
Please enter your name here

Recent posts

LawBlog WP Theme Review

Regardless of which area of law you practice, it’s imperative that you have proper online representation. You need to give your customers a feeling...

The Deeper Meaning and Purpose Behind Shapes in Web & Graphic Design

Sometimes in web design, a clean website is often the best choice for certain clients. Instead of elaborate backgrounds or too many aesthetic choices,...

How to Easily Design a Website Without Coding

Are you looking to build a website and you don’t know how to code? Online web design services are helpful to create website templates...

The importance of SSL Certificates as part of a web hosting package

Building a successful business requires trust, and gaining trust can be difficult especially when you run a business where it is taken for granted...

How Can Domain Name Extensions Influence Your Brand Name?

Are domain name extensions important in naming your brand? The shortest answer is "Yes." In today's online world, it is the first thing that...

Recent comments