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
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
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:
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:
We should now get the page title.
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
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:
$handle: the name of the stylesheet
$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):
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:
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: