Genesis Archive Template Using CSS Grid

The Genesis template in this tutorial enables you to display your post entries in columns using CSS Grid which uses a 2 dimensional grid layout & 25 new CSS properties.

Here’s what the code in this tutorial produces :

And here’s the demo video:

Demo Video

The demo video shows how you can use CSS Grid to display posts in a grid which display in 1 column on smaller screens.

Features

On top of everything you can do with CSS Grid, you can also :

• Use the template on any type of archive including blog listings page, archive, author, blog, category, search, custom post type, custom taxonomy and tag pages. Simply rename the file using the WordPress Template Hierarchy and the file will load anywhere you want.
• Use any of the default functionality which is set using the Genesis > Theme Settings > Content Archives. The code in the template is independent of these settings however offers exactly the same functionality.
• Modify the entry meta.
• Add a fallback featured image pulled from your WordPress Media Library using the image attachment I.D
• Loads a special CSS file named ie.css when the template is loaded using any version of Internet Explorer.

Tested using the Genesis Sample child theme by StudioPress.

Easy Code Installation

There’s 3 simple steps to install the archive template.

Step 1 : From the download folder, upload the front-page.php file to your child themes root directory. Rename the file using the WordPress Template Hierarchy for use on other archives.

Step 2 : From the download folder, copy the CSS from the style.css file to the end of your child themes style.css file. May need minor tweaking for use in some Genesis child themes.

Step 3 : From the download folder, upload the file named ie.css to your child themes root directory.

Here’s the download folder for members :

Related Tutorials

• CSS Grid For Genesis Archives
• Genesis CSS Archive Grid With Infinite Scroll