WP Header.php

Typically, the WordPress header.php contains or outputs everything in the <head></head> tags, the <body> opening tag, and the navbar. In this tutorial we took an html template and create the template for a WordPress theme. Now we are going to focus on everything above the navbar in header.php

Firing WordPress Actions

In WordPress, there are a number of pre-defined actions, or hooks, that allow developers to insert their own code or functions. Suppose, for example, that we want to add function to a page. Rather than writing a function directly into the template, we can hook our code to a predefined action that is already running in the footer, or, in this case, the header.

Let’s begin by adding the action to the header. The function we want to add that fires the is wp_head(). Add this just under the <title></title> tags on header.php:

HTML

Save header.php, refresh the site, and then view source code. We’ll see that there are a few built in hooks, before we’ve added any, and because of this we are getting some core .css files: /wp-includes/css/dist/block-library/style.min.css?

Make title dynamic

The first change we’re going to make is to make the title dynamic. At present the title is hardcoded between <title></title> tags. We could replace the hardcoded title with a function: <?php bloginfo('name'); ?>. This is not the preferred WordPress method. WordPress standards say that the header should not include the <title></title> tags at all, and that these be called via a hook.

In order to do this, create a file titled functions.php To this file, add the following:

PHP

We should now get the page title.

Enqueue styles

Ideally, we want <head></head> to contain little more than wp_head(), and have that function call in all our actions.

The next step will be enqueueing style sheets. There are other ways to add stylesheets besides enqueueing, but when we start using plugins, child themes, etc., its best to do it according to WordPress standards. According to WordPress developer docs, “The proper way to add scripts and styles to your theme is to enqueue them in the functions.php files”

The basic function for enqueueing a stylesheet is: wp_enqueue_style( $handle, $src, $deps, $ver, $media ); We are passing 5 arguments in that function; only the first two are required:

  1. $handle: the name of the stylesheet
  2. $src: the location of the stylesheet.

To add style.css, which sits in the main theme directory, we use this: wp_enqueue_style('style', get_stylesheet_uri() );

get_stylesheet_uri() is a function that retrieves stylesheet URI for current theme. We will only use it for this stylesheet because this stylesheet is the only one located at that uri. For other stylesheets and scripts, we will use the function get_template_directory_uri() followed by the rest of the path. For example: get_template_directory_uri() . '/css/clean-blog.css' concatenates the template directory (website-name/wp-content/themes/theme-name) with ‘/css.clean-blog.css’ to give us a the full url to our stylesheet.

On our template, we have 4 stylesheets that need loading, and they need to load in a particular order. We will put all of these into a single function we’ll call add_theme_scripts() and then call them using the wp_enqueue_scripts action. We put them in the function in the order we want them to load. (We are going to add the footer .js scripts to this function later). This is the block we’ll add to our functions.php file. (Keep in mind that if you are using a different html template, you’ll need to adjust the names and paths accordingly):

PHP

Body Class and Finishing Touches

The last thing we’ll do is replace <body> with the following: <body <?php body_class(); ?>> and then call the wp_body_open() function beneath it:

HTML

Site Title in Navbar

With this, the <head></head> and the opening <body> tag of header.php are done. The next section to do is the site title in the navbar. Currently, this is hard-coded: <a class="navbar-brand" href="index.html">Start Bootstrap</a>.

We’re going to replace the hardcoded name “Start Bootstrap” with our site name, which we get using the bloginfo('name'); function. Next, we’ll replace the link to the homepage by echoing the home_url(). Our new code will look like this:

HTML

Once this is done, we will tackle the navigation menu, which is done using navwalker. That tutorial is here. Otherwise, we can skip to the index.php file.