How to display Posts and entries of a CPT together with different layout for each in Genesis

In my tutorial requests Trello board, a user asked:

Request for displaying a combined list of normal posts and a CPT together and showing the posts differently depending on if it´s a normal post or a CPT.

If a normal post it should show featured image above the title. If a CPT it should grab the featured image and use it as a background with the title of the CPT displaying at the bottom.

One way this can be done is by removing the default loop and adding a custom one with if conditions to check the post type and accordingly control the HTML of the loop content.

In this tutorial, we shall create a template for Posts page (home.php) to display 10 entries of both the built-in 'post' and a custom 'portfolio' post types. This template will additionally

• force full width content
• display image (featured image if present, otherwise a default image) and title for posts; title for portfolio entries
• use post_class filter to assign random color class from a set of pre-defined colors to posts and add a 'cpt' class to entries of post types other than 'post'
• use genesis_attr_entry filter to set background image inline CSS to entries of post types other than 'post'. Again, if the entry does not have a featured image we shall display a default one
• move .archive-pagination from under main.content to adjacent to it
• load and initialize matchHeight jQuery script

We shall use Flexbox with calc() CSS function to display the items in a grid while ensuring that last row items are aligned left instead of being separated wide apart from each other by using a few zero height filler items.

matchHeight jQuery (with byRow set to false) is still needed because it is not possible using Flexbox alone to set the height of all items to that of the tallest in the entire grid. Flexbox can only ensure items get equal height in individual rows.

While not covered in the video above, the solution is responsive (as always) with the number of columns becoming 3, 2 and 1 as the screen width goes down.

Step 1

Add the following in child theme's functions.php:

// Register a custom image size for CPT images on Posts page
add_image_size( 'cpt-image', 480, 640, true );

Regenerate thumbnails.

Step 2

Upload jquery.matchHeight-min.js to child theme's js directory.

Create a file named say, matchheight-init.js in the same location having: