A good web design does not begin in the middle of the page, contrary to what many amateur developers might believe. Indeed, the best designs begin before their XHTML code can even be seen. In WordPress, a great design begins in the software’s
header.php template, which is an essential part of any theme’s file structure. This template includes anything from the website’s DOCTYPE tag to the meta tags and navigational elements that will make it appear highly in Google search results and aid users’ perusal of website content. This 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:
- 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.
- 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.
- 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.
- 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.
<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.
DO: Include the WP_Head Variable Within the Header Template File
The WP_Head variable is considered a “placeholder” for meta tags and thus it should be placed into the header template file’s
<?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.
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.
You might also like…
Using jQuery to Validate the Standard WordPress Comment Form →
Using the Power of the .htaccess File to Improve WordPress SEO →
For the Novice Developer: The Anatomy of a WordPress Theme →
Focusing on Usability with an Enhanced Pagination Design in WordPress Entries →