[Tutorial #11] WordPress Header & Footer: Introduction

[Tutorial #11] WordPress Header & Footer: Introduction

Codes

You can find the header template here and footer template here on Github.

Introduction

In this blog we are going to tackle the “Modify header.php and footer.php” step from WordPress Custom Theme Basics: The Procedure.

Note: you might want to review the blog posts of previous steps, as some content in this blog might depend on what we have done in previous steps.

Header and Footer Introduction

Fundamental Property

Before we explain what header and footer do, we shall point out their fundamental feature:

Header and footer appear in every (wordpress’) webpage.

Common Items in Header and Footer

Based on this, anything that appears in every webpage should be put into header and footer so we don’t repeatedly coding them (the DRY principle). In our wordpress tutorial scope this includes mainly these items:

  1. HTML <meta> tag specifying this webpage’s properties. You won’t see them on webpages, but search engine crawlers will. These tags can be important for Search Engine Optimization.
  2. HTML <link>  and <script> tags including external codes to be used in our site. An example is Bootstrap via CDN.
  3. The navigation bar in header. This usually includes (1) your site’s logo (2) links to the most important pages.
  4. The menu section in footer. This usually includes (1)Copyright statement (2) Other links that are less viewed by visitors but nonetheless are still important (like Terms, Legal, Career).
  5. It is also common to hide pop-up content in footer so they appear in every page.

Whenever you are confused of whether a content should be in the header/footer, just go back to their fundamental property: will this content appear in every page? If yes then it should be here.

Sidenote

Many web application frameworks further use layout template to specify the layout of each displayed webpage. This gives you further flexibility to:

  1. Put commonly appeared items in places other than header and footer (like sidebar).
  2. Switch layouts for different webpage groups (one layout for shoppers, one for blog, and another for admins ).

Including Header and Footer

Standard Way

To include header.php and footer.php content you have to explicitly use these two codes in a webpage template:

Here the bracket set <?php ... ?> is the standard way to include PHP codes. Without these brackets wordpress will try to interpret the codes as HTML.

Trick: Using Different Header/Footer

You can further add parameters to the above two functions like <?php get_header('home') ?> to use another header file header-home.php . This enables you to show different headers for different pages.