Create the Header and Footer

Using the same $view->inc() method, let’s create our full-width page template, starting with the header and footer. Let’s make a folder named elements/ in our theme, and add empty files for the header and footer in it.

mkdir elements/  
cd elements/  
touch header.php  
touch footer.php

Add

<?php
defined('C5_EXECUTE') or die('Access Denied.');
?>

to both of them.

Next, modify the full.php template to include these files at the top and the bottom of the template.

<?php
defined('C5_EXECUTE') or die('Access Denied.');
$view->inc('elements/header.php');
?>

Hello World.

<?php
$view->inc('elements/footer.php');

The site will still look the same, but now we can copy out the header and footer HTML from our Dreamrs HTML theme, and place it into the header.php and footer.php elements.

First, open one of the page templates in your editor, and select everything from the top of the HTML down to where the page-specific content stops.

Paste it into header.php after the PHP opening.

Then, do the same with the footer area from the same page template, down to the end of the file.

The result?

Perfect!

Actually, this is to be expected -- we’ve copied a bunch of HTML, including CSS and JavaScript imports and links to images, without actually copying the assets themselves into the theme, or changing the way these paths are included (since paths will definitely change due to the way the theming process works.) Let’s clean these up.