WordPress—A Complete Guide/

...

/

Header and Footer Template

Header and Footer Template

Learn to display a global header and footer on all pages of the website.

We'll cover the following...

Header and footer template files

A web page without a header and footer looks incomplete. We want a header and footer to appear on all pages of our website. Ideally, all pages of the website have the same header and footer.

A crude way is to add content for the header on the website’s main page, index.php, using the <header> tag. Similarly for the footer, we could write footer contents in the <footer> tag at the end of the page:

<header>This is the header area.</header>
 
<?php
while(have_posts()){
    the_post();?>
    <h1><a href="<?php the_permalink();?>"><?php the_title() ?></a></h1>
    <p><?php the_content() ?></p>
    <br/><hr/><br/>
 
<?php
}
?>
 
<footer>This is the footer area.</footer>
Usong <header> and <footer> tags

This will render a header and footer on the main page, but our goal is to have an identical header and footer on every page. Since index.php does not power all the web pages of a website, we will have to copy the header and footer contents and paste it to other files like single.php and page.php. Copy pasting is not a good practice because if we were to change something in the header or footer, that change will have to be reflected in all the places where copies of the code exist.

The header.php file

The header.php file contains the global header for our website. We can call this file to include its contents on the top of every page. This way the code of the header stays in one place and if we are to make any changes, we simply change header.php and the change is reflected everywhere the file is used.

Create the file named header.php in the Excellence theme folder. For now, we will ...