In Twitter a user asked:
@srikat trying to achieve an archive page that looks like this https://t.co/AhzgBLWhYF would really appreciate a tutorial :)
— TechQuestCo (@TechQuestCo) August 16, 2016
In this tutorial we shall set up a template for category archives in Genesis which displays
- a horizontal list of top level categories with automatic highlighting of current category
- a Genesis custom loop for the latest post in the current category with info at the left and featured image at the right
- the remaining posts in the category in a grid with a fix for pagination since the default loop has to be offset by 1
The wide single latest post will continue to remain when visitors navigate to subsequent pages after clicking on the archive navigation.
In the grid we shall display 4 columns on desktop widths, 2 columns on medium sized screens and 1 column on smaller screens.
While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.
Step 1
Add the following in child theme's functions.php:
