WordPress Tutorials Index | Web Page Design Tutorials Home

Study WordPress Header Section File Structure

The Header Section of WordPress theme include the Blog Title, Blog Description, Banner and Navigation Menu. The layout of the WordPress Header Section can best be illustrated with the diagram below.

WordPress Header Section Layout

WordPress header.php File

Open the WordPress header.php file inside the template folder (e.g. twentyten). The PHP codes for the Blog Title, Blog Description, Banner and Navigation Menu can easily be identified. Actually the codes of WordPress files are commented very well.

WordPress Header Section File Structure

Let’s play around to see if our assumption is corrected or not.

WordPress Header Title and Description

Replace the block of codes of Header Title and Description of the header.php with "Header Title and Description Display Here!" as shown below:

WordPress Header Codes Structure

Refresh the browser to see the changes. The result is shown as below:

WordPress Header Codes Structure

Yeah! these two block of codes are for the Header Title and Header Description.

WordPress Header Banner

Remove the block of codes for the WordPress banner as shown in the diagram below:

WordPress Header Codes Structure

Refresh the browser to see the changes. The WordPress theme is now shown as below:

WordPress Header Codes Structure

Now you should have some basic idea of the code structure of WordPress Header. This is very useful to customize the theme of WordPress Header. Actually the WordPress Header Section is usually the first place to customize.