WordPress Theme Development: Building The Header (Lesson – 3)

Hello everyone, My name is Rashad from w3Programmers and I am little excited with wordpress theme development of w3Programmers. We must not forget the previous lessons of this series. The first and second part of this series is the spine of wordpress theme development. I only a comment on our style sheet and wordpress takes the details below:

wordpress-theme-details

In the below image shows the wordpress website basic structure.

wp-site-structure

Now I am going to hook wordpress header, footer and sidebar part in our index.php by the below code.

<?php get_header(); ?>
//Here will be the code of wordpress looopp to displaying!
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Now back to our header.php file and today we are going to build the header part of w3Programmers theme. Still now, there ( http://localhost/w3pro/ ) is nothing in our web browser.

I code in the header.php below:

<!DOCTYPE html>
<html language="en">
    <head>
        <title>
            <?php
            wp_title('|', 'true', 'right');
            bloginfo('name');
            ?>
        </title>
        <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/style.css">
        <?php wp_head(); ?>
    </head>

As I am doing here a dyanimic wordpress website, First I use to clear DOCTYPE by <!DOCTYPE html> with html5. Some of the code are going to be footer, please don’t get confused to look the header code. After clear the DOCTYPE I started the html tag with a language type “en”. You an use your own language in the html tag. In html tag, I use head tag. In the head tag, I use two php function  wp_title() and bloginfo() to get the wordpress title.

After the title tag and inside the head tag, I link our style sheet. Finally, I code a wordpress hook call wp_head() to get the header information of our website.

wordpress-header-information

Okay! In this wordpress tutorial, we learn how wordpress function work to get a full dynamic information in header. In the coming tutorial, I will describe to set the logo and navigation of the wordpress header section. Trank You!

Hello, This is Rashad. I like programming.
Print Friendly

Leave a Reply

Your email address will not be published. Required fields are marked *


*