WordPress Header File: An Overview and Analysis of the Header.php File

WordPress Header File: An Overview and Analysis of the Header.php File
Page content

Introduction

The WordPress header file (header.php) is usually the first file called when a WordPress based website is accessed. As a result, the first lines of a website’s source will contain what is called through header.php. This article will analyze the header.php file. Therefore, the anatomy of the WordPress header file will be considered in detail.

DOCTYPE and tag

First and foremost, a DOCTYPE statement should be included. The choice of DOCTYPE is dependent upon developer and it is not important here. For this purpose, the XHTML 1.0 Strict example is provided. Therefore, the very first line of header.php file should be similar to this one:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

After the DOCTYPE declaration, the opening HTML tag follows. Few attributes are assigned to this tag; usually, these are language attributes and XML namespace declarations. In order to define the language attributes of the specific page, WordPress uses > function. The source code for an follows:

<html xmlns=“https://www.w3.org/1999/xhtml" >

Inside the Tag

META elements (stored within tag) are a very important part of the website, as they contain information the browser will display (and search engine will read first). In order to ease the process concerning different important META tags, WordPress uses template tags. First of all, content type and language information should be included as follows:

<meta http-equiv=“Content-Type” content=";

charset=” />

Furthermore, there are some other important META tags, such as “description” and “keywords”. It is not a good idea to include them manually into header.php file, as they would remain the same throughout the complete website. In order to manage this, it is very good to use specialized SEO plugins, such as Greg’s High Performance SEO or All in One SEO Pack.

The tag also holds the , which is actually a title displayed at the top of the browser window. The function that would display the page title according the visited website section follows:</p> <p><em><title></em></p> <p><em><?php if (function_exists(‘is_tag’) && is_tag()) {</em></p> <p><em>single_tag_title(‘Tag Archive for "’); echo ‘" - ‘;</em></p> <p><em>} elseif (is_archive()) {</em></p> <p><em>wp_title(’’); echo ’ Archive - ‘;</em></p> <p><em>} elseif (is_search()) {</em></p> <p><em>echo ‘Search for "’.wp_specialchars($s).’" - ‘;</em></p> <p><em>} elseif (!(is_404()) && (is_single()) || (is_page())) {</em></p> <p><em>wp_title(’’); echo ’ - ‘;</em></p> <p><em>} elseif (is_404()) {</em></p> <p><em>echo ‘Not Found - ‘;</em></p> <p><em>}</em></p> <p><em>if (is_home()) {</em></p> <p><em>bloginfo(’name’); echo ’ - ‘; bloginfo(‘description’);</em></p> <p><em>} else {</em></p> <p><em>bloginfo(’name’);</em></p> <p><em>}</em></p> <p><em>if ($paged > 1) {</em></p> <p><em>echo ’ - page ‘. $paged;</em></p> <p><em>} ?></em></p> <p><em>

Furthermore, inside the tag, external sources (such as CSS files, JavaScript files, libraries, etc) are linked. Since the look of the website is described with (at least) style.css file, this file must be called. This is done with the following line of code:

<link rel=‘stylesheet’ href=’‘type=‘text/css’ media=‘screen’ />

Embedding JavaScript files is not as easy, though. For example, if a developer wants to include a jQuery library, the following line of code is required:

It is very important to follow this convention, because by doing that, WordPress will decide when a certain library will be loaded, as sometimes it is not required to load all included libraries on every part of the website.

If a developer wants to include some custom script, it is achieved with the following line of code:

The wp_head() Function and the Template Tags

The wp_head() function is extremely important for every WordPress theme, as it “tells” plug-ins and other functions where the tag is. The template tags are used for pulling out of the information about the blog itself. An example of a template tags was used in the source code provided previously in sight this article:

This function can pull out different types of data, such as admin e-mail, language, url, name, version, etc.

Finally, the WordPress header file may contain some other functions, but that goes beyond the scope of this article. Instead, the developer should concentrate on the functions mentioned in this article first, as they are the basis for further extension of the WordPress header file.