HTML5 Creating the Footer

This is the third post in what is turning out to be a series on my 'adventures' with WordPress and HTML5. Previously I set up a development environment and installed a barebones HTML5 theme.

Now I want to style the footer (start with the easiest part) to go from this:

To this:

I want the dark grey bar of the footer to extend the whole width of the page but because I am using the Blueprint grid, everything inside the body element is wrapped in a div with a class of container. For any element to us the Blueprint grid layout it needs to be in a container but the container class styles the wrapper div to be 950 pixels wide and centred.

The way around this is to remove the top level wrapper div and wrap the header, content, and footer elements in their own separate container divs, these container divs can then be inside divs that extend the full width of the page.

From this

To this

Template files in the child theme will override the files in the parent theme. I need to customise header.php and footer.php so the easiest way to start is to copy the original files to the child theme.

Deleting the container class from the wrapping div in header.php then just pushes everything to the left hand edge of the screen. Wrapping the footer element in a .container div then pushes the footer back to the centre, I'll re-centre the header and content when I get to them later.

Now it is easy enough to create a div surrounding the .container div and giving it an id of footer-bar. Writing the first style presents a problem though. Roots relies on a function get_roots_stylesheets() in functions.php to write the stylesheets into the head element, I want to add my own stylesheet but don't want to change the parent functions.php. The solution is to write my own get_stylesheets() function in my own functions.php and add both the roots stylesheets and my own stylesheet in the function. WordPress loads the functions.php in the child theme in addition to the functions.php in the parent theme. I can then change the header.php to call my function rather than the roots one.

One thing to watch when editing funtions.php; make sure there are no blank lines outside the containing <?php ... ?> tags. I had one blank line after the ?> and that caused me to completely lose the WordPress admin pages, they just showed as blank.

After styling the footer-bar div, stickyfooter.css can be used to stick the footer to the bottom of the page. I want the current page to be highlighted in the navigation links and the link to the current page to be disabled. WordPress adds the class current-page-item to the <li> containing the link so the following css does the trick.

The rest is fairly simple css.