First Post Full Width Then All Other Entries In Columns

This tutorial provides a template which displays the 1st post entry full width and then all other entries in 2 columns. You can also easily change the CSS to display all other entries in 3 or more columns simply by changing all instances of 48% in the CSS to match the number of columns you want to use.

Here’s the result using the template as the front page however you can use it on any archive page.

And here’s the demo video showing the mobile responsiveness of the columns on different sized screens:

Tested using the Genesis Sample child theme by StudioPress.

Note : To use this template on any archive, simply rename the file according to the WordPress Template Hierarchy. You may will also need to tweak the CSS slightly for use on archives other than the front page of the Genesis Sample theme.

Each entry only displays the featured, entry title & post info. You can remove the lines of code in the template which removes other elemenst of you want to display the excerpt or content etc.

Easy Installation

There’s 2 simple steps:

Step 1 : Upload the front-page.php file to your Genesis child theme folder.

Step 2 : Copy & Paste the CSS to the end of your child themes style.css file.

Here’s the code for logged in members:

Related Code Snippets

• CSS Grid For Genesis Archives
• 1st Post Full Width Rest In Columns