Using CSS Grid with the Underscores Theme

October 8th, 2019 Update: WP Rig is a better option than _underscores these days.

This post hasn’t ages so well, but do check out Morten Rand-Hendriksen‘s video below for a comprehensive intro to building a PWA using WP Rig as a starter template

Original post from February 5th, 2019:

In this tutorial we’ll make the Underscores theme CSS Grid friendly by flattening out the layout. There are two main divs we can lose in order to make the nesting more effective:

<div id="content" class="site-content">

and

<div id=“primary” class=“content-area”>

The first div, #content, opens up in header.php and its closing tags is the in footer.php file.

The #primary div needs to be removed from the following pages:

archive.php
index.php
page.php
search.php
single.php

Now we’re left with the following nesting structure:

<div id="page" class="site">
    <header id="masthead" class="site-header" role="banner">
     </header>
    <main id="main" class="site-main" role="main"></main>
    <aside id="secondary" class="widget-area" role="complementary"></aside>
    <footer id="colophon" class="site-footer" role="contentinfo"></footer>
</div>

Now when we add a grid property to the #site div, the .site-header .site-main .widget-area .site-footer will all fall in line as children.

Published
Categorized as Tutorial

3 comments

  1. Hi Ali,

    I believe you meant {to the [.site] div}, as if I am not mistaken, if you were to use the #, it for the ID, the #page.

    Thanks for the tutorial, that saved me time!

    1. Hey, Baventhiran. Glad this helped!

      I used this blog post as a reference for when I was building custom sites with _underscores. I’m not really coding as much these days, but if I were, I’d consider using WP Rig. But here at our shop we usually use a Genesis theme or something else with a large, active community to offload basic maintenance over a starter theme.

      Your comment inspired me to update the post. Thanks and let me know if you have any other questions!

  2. Hey, Ali.

    Genesis theme certainly saves much. However, right now I have to to work with coding. Thanks for the WP Rig suggestion, I’ll check it out!

    I’d likely have other questions, how can I let you know?

Leave a comment

Your email address will not be published.