Typek – Blog

Mastering the Header.php File: Essential Inclusions and Exclusions for Optimal SEO Performance

Introduction to the header.php File

The header.php file is an essential component of any WordPress theme. It is responsible for generating the header section of a website, which typically includes the site’s logo, navigation menu, and any other design elements or functionality that appear at the top of every page. The header.php file helps to keep your theme organized and maintainable by separating the header code from the rest of your template files.

In this article, we will discuss what needs to go in the header.php file and what doesn’t, to help you create a clean and efficient header for your WordPress website. We will also provide some examples of code in HTML format to illustrate the various components that can be included in the header.php file.

What Needs to Go in the header.php File

There are several essential components that should be included in every header.php file. These components are necessary for the proper functioning of your WordPress website and should not be removed or modified without a good reason.

1. The DOCTYPE Declaration

The DOCTYPE declaration is the first line of code in the header.php file and is used to specify the version of HTML being used. For HTML5, the DOCTYPE declaration should be as follows:

<!DOCTYPE html>

2. The Opening <html> Tag

The opening <html> tag should follow the DOCTYPE declaration and should include the language attribute, which specifies the language of the content on your website. For example, if your website is in English, the opening <html> tag should be:

<html lang="en">

3. The Opening <head> Tag

The opening <head> tag should follow the opening <html> tag and contains meta information about your website, such as the character encoding, viewport settings, and the title of the page.

<head>

4. Character Encoding

The character encoding should be specified within the <head> section of the header.php file using the <meta> tag. The most commonly used character encoding for modern websites is UTF-8, which supports a wide range of characters and symbols. To specify the character encoding for your website, include the following line of code within the <head> section:

<meta charset="UTF-8">

5. Viewport Settings

The viewport settings are important for ensuring that your website is responsive and displays correctly on various devices, such as smartphones, tablets, and desktop computers. To specify the viewport settings for your website, include the following line of code within the <head> section:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

6. The Title of the Page

The title of the page is an important element for search engine optimization (SEO) and should be included within the <head> section of the header.php file. The title should be dynamic and change based on the content of the page. In WordPress, the title can be generated using the following line of code:

<title><?php wp_title('»', true, 'right'); ?></title>

7. WordPress Header Hooks

WordPress header hooks are essential for allowing plugins and themes to add their own styles and scripts to the <head> section of your website. The most important header hook is wp_head(), which should be included just before the closing </head> tag. To include the wp_head() hook in your header.php file, add the following line of code:

<?php wp_head(); ?>

8. The Opening <body> Tag

The opening <body> tag should follow the closing </head> tag and includes the main content of your website. In WordPress, the opening <body> tag should include the body_class() function, which generates dynamic class names for the <body> element. To include the body_class() function in your header.php file, add the following line of code:

<body <?php body_class(); ?>>

9. Site Branding and Logo

The site branding and logo should be included within the header.php file, as they are typically displayed at the top of every page on your website. In WordPress, the site branding and logo can be generated using the following lines of code:

<div class="site-branding">
  <?php the_custom_logo(); ?>
  <h1 class="site-title"><a href="<?php echo esc_url(home_url('/')); ?>" rel="home"><?php bloginfo('name'); ?></a></h1>
  <p class="site-description"><?php bloginfo('description'); ?></p>
</div>

10. Navigation Menu

The navigation menu is another essential component that should be included within the header.php file. In WordPress, the navigation menu can be generated using the wp_nav_menu() function, as shown in the following lines of code:

<nav id="site-navigation" class="main-navigation">
  <?php
    wp_nav_menu(
      array(
        'theme_location' => 'menu-1',
        'menu_id'        => 'primary-menu',
      )
    );
  ?>
</nav>

What Doesn’t Need to Go in the header.php File

While the header.php file is an important part of your WordPress theme, there are certain components that should not be included within this file. These components are either unnecessary or should be included in other template files for better organization and maintainability.

1. Content-Specific Elements

Elements that are specific to the content of individual pages, such as the main heading, subheadings, and paragraph text, should not be included in the header.php file. Instead, these elements should be included in the appropriate template files, such as index.php, single.php, or page.php.

2. Footer Elements

Any elements that should be displayed in the footer of your website, such as copyright information, social media icons, or a secondary navigation menu, should not be included in the header.php file. Instead, these elements should be included in the footer.php file, which is responsible for generating the footer section of your website.

3. Sidebar Elements

Elements that should be displayed in the sidebar of your website, such as widget areas, recent posts, or a search bar, should not be included in the header.php file. Instead, these elements should be included in the sidebar.php file, which is responsible for generating the sidebar section of your website.

4. JavaScript and CSS Files

While it is possible to include JavaScript and CSS files directly in the header.php file using the <script> and <link> tags, it is not recommended. Instead, you should enqueue your JavaScript and CSS files using the proper WordPress functions in your theme’s functions.php file. This ensures that your scripts and styles are loaded correctly and avoids conflicts with other plugins and themes.

Conclusion

In conclusion, the header.php file is an essential part of any WordPress theme and should contain the necessary components for generating the header section of your website. By understanding what needs to go in the header.php file and what doesn’t, you can create a clean and efficient header for your WordPress website that is both organized and maintainable.

More traffic??

Are you looking for effective solutions to increase your Google search visibility?

Contact us and discover the full potential of online sales.

What our clients are say?

For me, they are a happiness factory. They managed my store’s website in such a way that users became happy, after which it turned out that the search engine was also happy. When the search engine became happy and started bringing me more happy customers, my business became equally happy 🙂

Matt

Great company, I recommend it to everyone. Services of the highest standard. Very good customer approach. I am very satisfied with their work.

Lukasz Szajny

Complete professionalism and an incredible commitment to their work. It’s worth emphasizing their hassle-free communication and full availability. I definitely recommend them.

Alexander