envato free trialCreative Assets & Unlimited Downloads on Envato Elements Get 7 Days Free

The WordPress header.php Template File: Do’s and Don’ts of Good Header Design

on WordPress

The WordPress header.php file is an often-underappreciated template file can actually make the difference between visitors who stick around and “drill down” into other website content, and those who simply come to the site, stay for a few seconds, and then point their web browser elsewhere.

Amateur web designers and developers who are new to things like DOCTYPE tags and the proper usage of meta tags should pay careful attention to the do’s and don’ts of header.php development. By starting a website’s very first tags strongly, everything else will fall into place as the site’s design comes together.

DO: Define the Proper DOCTYPE declaration at the top of the Header Template File

Virtually every amateur web developer has heard of web standards, as defined by the Word Wide Web Consortium, and they’ve likely made it their goal to produce a standards-compliant design for their WordPress installation. That’s all well and good, but standards adherence can’t begin without the proper DOCTYPE declared at the top of the header file itself. This DOCTYPE declaration actually tells the W3C validator, and all major web browsers, how to read and parse the code that comprises the overall design of the website. One wrong move here, and the entire website could render in a way that is far outside expectations. It could also lead to a long series of errors at the W3C validator, and numerous headaches when it comes to making a website compatible with both mobile and desktop browsing environments.

Generally, speaking, there are four major DOCTYPE declarations that dominate today’s web designs. Amateur developers should learn about these declarations and then choose the proper one for the very first line of code within their header.php template file when using WordPress:

  1. XHTML 1.0 Transitional – This declaration is easily the most lenient when it comes to standards compliant. It was originally designed to bridge the gap between HTML 4.01 and XHTML 1.0 as developers learned the more modern programming language and its semantics. For this reason, it allows the inclusion of most HTML and XHTML codes side-by-side, which is not permitted by more stringent DOCTYPE variants.
  2. XHTML 1.0 Strict – This DOCTYPE allows for virtually no use of HTML 4.01 code within a design at all. Its “strict” declaration is no joke, and many developers will have to do some hard work to eliminate legacy code and bring their design in line with this more demanding declaration.
  3. XHTML 1.1 – This is essentially an updated version of XHTML 1.0 Strict, and it has many of the same requirements and restrictions. Generally speaking, any XHTML 1.0 Strict website can fit into the requirements of XHTML 1.1’s DOCTYPE.
  4. HTML5 – This is the newest official HTML release from the W3C, and it’s designed to be a cross-platform, cross-device programming language. It also focuses on new semantics, employing special tags for things like headers, footers, articles, asides, and website sections. HTML5 is still being learned by even the most seasoned developers, so consider this the most advanced choice when selecting a DOCTYPE for the header template file within WordPress.

DON’T: Go Crazy with Meta Tags when Creating the <HEAD> Area of the Header.PHP File

There was a time, not so long ago, when meta tags were one of the key ways to boost a website’s relevancy and search engine rankings at the major search engines online. That time, however, came to an end around the same time as the last decade. Meta tags are still used in modern web design, of course, but their utility has been far diminished. And, in fact, using them excessively can actually harm a website’s standing in Google search engine rankings.

Many amateur web designers are encouraged to use meta tags as a way to include copyright information, a website description, and relevant website keywords, among other things. These tags can also be used to call RSS feeds and stylesheets to the attention of users and browsers everywhere. Typically, the “keywords” tag should be either avoided or filled minimally with keywords. These are no longer used by Google or competing search engines when calculating a website’s ranking or relevance, and they’ll primarily serve only to weigh down a design in terms of file size and loading times.

The description tag should still be used, as this can be displayed in search results. And, of course, meta tags dedicated to stylesheets, JavaScript, and RSS feeds, should be maintained. Those dedicated to trackback or pingback URLS should also stay in the <HEAD> tag for website-to-website communication purposes.

DO: Place the Navigation Within the Header.PHP Template File

There’s absolutely no reason not to include the navigation XHTML code in the WordPress header.php file. First and foremost, it saves the web designer from having to paste the same code into every single template file within a WordPress theme’s directory. But, in addition to the ease of actually designing a website this way, placing the site’s navigation in header.php has usability benefits.

It should be noted that users are mostly change averse, and they’re directly opposed to a lack of predictability in web design. If a navigation area is changing on every single page, or if it doesn’t render properly within a certain template, users will be turned off and they’ll give the competition some more hits and valuable advertisement clicks. If the navigation is made universal and easy to use, however, website readers will be more likely to look around at other parts of the website and boost its search engine rankings appropriately.

A universal navigation located within header.php is the key to making the design process easier, as well as increasing the usability of the website and the consistency of its main design elements. That’s good for search engine optimization as well as workflow optimization. Or, as designers call it: a win-win.

DON’T: Place Messy JavaScript All Over the Place Within the Header File

It’s important to remember that the key to a great web design is a small file with minimal code and line breaks. Optimizing code, in many cases, means resisting the urge to include JavaScript directly into the website’s header file (or anywhere else within a design, really). Instead, developers should prefer a method that actually places the JavaScript in an outside file and calls it into the header using a meta tag. Simply paste the JavaScript into a blank text file, and save it as “ScriptName.js.” Then, in the website’s header, place the following line of code:

<link rel="javascript" type="text/javascript" href="http://path-to-your.com/javascript-file.js" />

This is just one line of code in the header template file, and it saves the website from major lag in its loading process. Remember, a JavaScript file that is placed directly into the header file, without a “link rel” meta tag, will actually have to fully process before the rest of the page can load below the last line of that included script. If the script is processing especially slowly, the entire website’s loading process will pause until it has finished. That can have a major impact on usability. And, because Google and other search engines now measure how long it takes websites to load when calculating their page ranking, it can mean a major drop in search engine results for websites that don’t use the method mentioned here.

DO: Include the WP_Head Variable Within the Header Template File

WordPress has a crucial variable for website designers that must be included with virtually every template utilized by the world’s most popular content management system. This variable isn’t just responsible for reporting things like the current installation’s version, although that might be its most well-known function. This variable is actually a crucial way to enable many plugin features after they have been activated within the WordPress Dashboard. Those plugins will actively search for the WP_Head variable and then modify it using their own functions; this is how custom stylesheets, custom JavaScript or AJAX libraries, and other custom meta tags are incorporated into an existing design without any modification on behalf of the theme’s original developer.

The WP_Head variable is considered a “placeholder” for meta tags and thus it should be placed into the header template file’s <HEAD> tag alongside other things like the site’s stylesheet, any relevant JavaScript inclusions, and the website’s title and DOCTYPE declaration. For reference, the variable looks like this when placed into the template in PHP form:

<?php wp_head(); ?>

It can be placed anywhere within the <HEAD> tag, of course, but most developers prefer to place it at the bottom of that section of the website’s code. This allows for easy monitoring of any new, plugin-induced additions to the variable that might affect the template’s load times or other functionality.

DON’T: Forget to Test the Header and Its Meta Tags Before Deploying it to the Public

One of the biggest mistakes made by most amateur web developers is a perception that, if it looks like it works, it simply does work. This could not be further from the truth when developing a website, especially one that operates on today’s implementations of XHTML and HTML5. These programming languages are notoriously picky and quite fickle, and their good appearance can belie a basic program with their functionality. Indeed, many of today’s most popular navigational methods — from jQuery to <DIV> tag image replacement — look perfectly good but direct the user to the wrong website. Sometimes, they shuffle the user nowhere at all. That’s bad form, and it can send readers to competing websites in a hurry.

Similarly, meta tags often fly under the radar after they have been successfully placed into the <HEAD> tag of a document. The assumption is that, simply because they’ve been included in the file, they’ll show up properly on search engines and other websites who employ them to list website keywords, authors, and descriptions. That is simply not true. The key here is to monitor Google search results and other websites for any changes that have been caused by the meta tag. If the website’s description has been updated via the meta tag, it’s important to make sure that change is reflected across search engines and affiliate sites over the course of a week or two. If not, it’s time to make sure the meta tag is self-closing (that means ending it in a slash and a greater-than bracket), and properly constructed. Check for the proper use of uppercase and lowercase letters, as well as the proper use of punctuation like quotation marks in the tag’s construction.

DO: Remember that Header Design is Subjective

The key to perfectly managing the development and deployment of a WordPress header.php template file is to remember that the process is highly subjective. No two header templates are created the same way, and that’s fine. Instead of focusing on uniformity and adherence to the current “norms” of web design, focus instead on the key elements of standards validation and WordPress manipulation. Be sure that the WP_Head tag is placed into the file so that the website can work with plugins, rather than against them.

It’s also important to make sure that a universal navigation element is included in the header and used across all websites managed by WordPress. And always make sure that meta tags are used and executed properly. These tags are the key to a website’s performance, allowing for the inclusion of keywords, descriptions, stylesheets, RSS feeds, and JavaScript files. A good header can manage each of these things easily, even as content-related meta tags wane in influence when it comes to search engine optimization.

With a little care and attention to detail, the header template file will be both easy and enjoyable to create. It will set the rest of the website’s design up for great success with both readers and search engines.