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

WP Theme Lesson #4b: Header Template Continues

Author

Date

Updated on

Category

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Recent posts

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

Domain Name Generation Tips for Business in the Teen Niche

Choosing a domain name is important for every business; how much more when you want to choose a name for a niche site like...

5 WordPress Plugins to Increase Your Website Speed

 And if you’re an online entrepreneur, you probably know that making people wait is bad for your eCommerce business too — really bad.I mean,...

How to Show Only Images that the User Has Uploaded in WordPress

When using WordPress with multiple authors, many things need to be taken into consideration. The default permissions system leaves much to be desired, and...

Recent comments