Develop a WordPress Theme, 2021 -part 3, Header & footer, Bootstrap.

Add two files named header.php and footer.php to your active theme folder.

Open the front-page.php file and add the code below.

<?php get_header();?>

<?php get_footer();?>

These two default WordPress functions will bring in the header and footer to your theme.

Open header.php and type html:5, VS code will then add an html 5 boilerplate to the file.

Cut the last body and html tag and paste them into the footer.

<!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>

Add the WordPress header and footer hooks.

There is an extension for VS code called WordPress Snipet, this will autocomplete the most common WordPress functions, see below. Install the extension now.

Add the wp_head( ); function to the header file. This function allows WordPress to insert code into the header.

Add wp_footer(); to the footer file.

Add Bootstrap and register the CSS file.

Bootstrap is an HTML and CSS platform that can speed the workflow for tutorial series. You won’t have to get bogged down with writing html or CSS code. Production sites are moving away from using such platforms, however, Bootstrap is still useful in teaching situations. More on modern methods such as CSS grid at the end of the course.

Download the latest version of Bootstrap and extract the zip file to your themes folder. Cut and paste the .js amd .CSS folder to the theme you are working on.

Add the code below to the functions.php file.

The load_css function has two arguments. The first is wp_register_style(), this WordPress function sets a name for the stylesheet in the first parameter, the second parameter gives the location of the file.

See the wp_register_style code reference.

The second argument, wp_enqueue_style(), is another WordPress function that adds the stylesheet to the list of enqued scripts that will be placed in the head section of the site.

Finally you need to call the load_css function with an add action hook using the add_action() function. the add_action () function fires when the page loads, the enqued scripts then load.

The load_js () function works in the same way for the Bootstrap Javacript file.

<?php 
function load_css(){
    wp_register_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', array(),false, 'all');
    wp_enqueue_style('bootstrap');
}
add_action('wp_enqueue_scripts', 'load_css');

function load_js(){
    wp_enqueue_script('jquery');
    wp_register_script('bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', 'jquery', false, true);
    wp_enqueue_script('bootstrap');
}

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

If you view the page source you should see the CSS and JS files listed.

One final point, jquery is also enqueued, this does not need to be downloaded as it is built into WordPress.

Leave a Reply

Your email address will not be published. Required fields are marked *