Pin Me

Anatomy of the WordPress Header Theme File

written by: Bruno Kos•edited by: Michele McDonough•updated: 12/11/2010

The WordPress header file is where everything starts; CSS styles, various JavaScript functions, jQuery... everything is called within. In other words, the header.php file is where all the magic starts. Find out more about this important WordPress theme file.

  • slide 1 of 4


    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.

  • slide 2 of 4

    DOCTYPE and <html> 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"


    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 <?php language_attributes(); ?>> function. The source code for an <html> follows:

    <html xmlns="" <?php language_attributes(); ?>>

  • slide 3 of 4

    Inside the <head> Tag

    META elements (stored within <head> 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="<?php bloginfo('html_type'); ?>;

    charset=<?php bloginfo('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 <head> tag also holds the <title>, 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:


    <?php if (function_exists('is_tag') && is_tag()) {

    single_tag_title('Tag Archive for &quot;'); echo '&quot; - ';

    } elseif (is_archive()) {

    wp_title(''); echo ' Archive - ';

    } elseif (is_search()) {

    echo 'Search for &quot;'.wp_specialchars($s).'&quot; - ';

    } elseif (!(is_404()) && (is_single()) || (is_page())) {

    wp_title(''); echo ' - ';

    } elseif (is_404()) {

    echo 'Not Found - ';


    if (is_home()) {

    bloginfo('name'); echo ' - '; bloginfo('description');

    } else {



    if ($paged > 1) {

    echo ' - page '. $paged;

    } ?>


    Furthermore, inside the <head> 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='<?php bloginfo("stylesheet_url"); ?>'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:

    <?php wp_enqueue_script('jquery'); ?>

    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:

    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/scriptname.js"></script>

  • slide 4 of 4

    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 <head> 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:

    <?php bloginfo('template_url'); ?>

    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.