• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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 :

Register for full access

Related Tutorials

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

CSS Grid Columns

Reader Interactions

Comments

  1. Debbie Hastings says

    March 29, 2022 at 7:43 pm

    Thanks! One comment – it doesn’t take into account the archive title, so that starts as the first “grid” item, so the .archive-description would need a grid-column: 1 / span 3, correct?

    Log in to Reply
    • Brad Dalton says

      March 30, 2022 at 5:21 am

      You can use :

      grid-column: span 3;

      or

      grid-column: 1 / 4;

      I Also updated the code in the download folder.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.