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

10 Ways To Speed Up Post-Building Process With WordPress Gutenberg Themes

There’s no need to explain why I decided to start with Gutenberg-supporting products. All in all, Gutenberg is a well-known and long-awaited product. It is more...

HostPapa Linux Hosting: Reliable, robust and fast

As a small business owner, it can be challenging to find the right hosting provider for your website. HostPapa distinguishes itself from other web...

Are You Making These Costly Mistakes When Outsourcing?

In today’s world, it is almost impossible to find a small business where everything about the business process is done in-house. For most small...

Flat Design for Your WordPress Site: What Is It + 4 WordPress Flat Design Themes

Web designers in the past mostly used 3D styles for buttons that made the button seem more realistic. That all changed when flat design...

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

Recent comments