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

WP SITES

2665

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

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

Grid Columns

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems