Hexagonal Posts Grid in Oxygen

This members-only tutorial provides the steps to display a responsive grid of featured images with post titles appearing on hover on the Posts page in Oxygenwhere each item is a hexagon.

The items will be set to link to their respective post's permalinks.

We are going to use the CSS Grid version of the code present here.

When hovered:

We shall

• assign a Page as Posts page.
• register a custom image size for the images on the Posts page.
• use pre_get_posts action hook to set the number of posts that should appear on the Posts page.
• in the Oxygen Template for the Posts page, use a Code Block component to place a custom loop.
• add pagination code below the posts grid by utilizing the default query of the page.

Step 1

Install and activate Code Snippets plugin.

a) Go to Snippets > Add New.

Title: Register custom image sizes

Code:

add_image_size( 'hex_image', 500, 500, true );

Save changes and activate.

Regenerate thumbnails if the featured images are already present for the blog posts.

b) Add another snippet.

Title: Set number of posts per page on Blog

Code:

add_action( 'pre_get_posts', 'sk_change_blog_posts_per_page' );
/**
* Change Posts Per Page for Posts page.
* 
* @author Bill Erickson
* @link http://www.billerickson.net/customize-the-wordpress-query/
* @param object $query data
*
*/
function sk_change_blog_posts_per_page( $query ) {
if ( $query->is_main_query() && ! is_admin() && is_home() ) {
$query->set( 'posts_per_page', '21' );
}
}

Save changes and activate.

Step 2

Create a Page titled say, Blog and set it as Posts page at Settings > Reading.

Create a new Oxygen Template like so:

Edit it with Oxygen.

Add a Code Block component.

Set Width to 100%.

PHP & HTML: