Create a Space theme for WordPress – 2021 – Part 3, Enqueing



Table Of Contents

Introduction

In part 3 of Create a Space theme for WordPress, we code, the front page, header, and footer files. We also enqueue the Bootstrap CSS and JS files.

Before we continue we need to add some more of the key files that are normally present in a WordPress theme. Add the files below to the spacetheme folder.

  • page.php
  • single.php
  • archive.php
  • front-page.php

Page.php is used by pages, unsurprisingly! single.php is used to display single posts as opposed to pages. Archive.php is used by category pages that display a list of posts. Finally, front-page.php is used by the home page of a site, only.

Code front-page.php

Copy and paste the code below into front-page.php. The WordPress function get_header().php pulls in the header file created earlier. In this way, any changes to the header will be sitewide. Next, section and container tags are used to enclose the content. There are some Bootstrap classes also. These control the layout. The the_titlte() function loads the title of the page. Finally get_footer() loads the footer file.

<?php get_header();?>
    <section class="page-wrap">
        <div class="container">
        <?php the_title()?>

        </div>
    </section>
<?php get_footer();?>

Code the header and footer files.

IN VS code open the header.php file and type html:5 then press return. An html boilerplate code should appear, as below. Cut and paste the end body and HTML tags into footer.php.

If you go to the sites home page you should just see the page title.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

There is one more crucial function that needs to go in the head section, that is wp_head(). This function loads all of the style sheets and scripts. It also allows plugins access to the head. Your header should now look as below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <?php wp_head() ?>
</head>
<body>

There is a similar function that goes in the footer. Your footer file should look as below.

<?php wp_footer() ?>
</body>
</html>

Load Bootstrap

Bootstrap requires a CSS file and a Javascript file to work. Here we are using a remote CDN to load them into the head section of the site, using some built in WordPress functions.

Open functions.php and paste the code below into it.

THe load_css() function is used to register and enqueue the style in a two-step process.

The wp_register_style() function has a number of parameters. The first one is the name of the hook or stylesheet, in this case, Bootstrap, the second parameter is the address or location of the file. Here we are using the remote CDN. Next is an array of dependencies. Then the version number here set to false. Finally, the media type is set to all. This can be used to specify print only style sheets e.t.c.

wp_enqeue_style () has one parameter the hook used earlier. Finally the add_action() function adds the style sheet to the head of the site.

In summary

  • 1/ register the style
  • 2/ enqueue the style
  • 3/ add the style sheet to the head section.

The load_js() function works in the same way as load_css(), except that jquery is also being added as it is a dependency of Bootstrap.

<?php 
// Load css
function load_css(){
    wp_register_style('bootstrap','https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css', array(),false, 'all');
    wp_enqueue_style('bootstrap');

}
add_action('wp_enqueue_scripts', 'load_css');

// load js
function load_js(){
    wp_enqueue_script('jquery');
    wp_register_script('bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js', 'jquery', false, true);
    wp_enqueue_script('bootstrap');
}

add_action('wp_enqueue_scripts', 'load_js');
?>

In the next part of this series we look at template parts.