Blog Post Page Design having first post with a different layout in Infinity Pro

This tutorial provides the steps to customize the Blog Post Page Design having the first post with a different layout in Infinity Pro theme. It will also work with the Genesis Sample or any child theme based on the Genesis Framework.

First Post will have full-width image before entry content and will look different than other posts.

Preview:

Works:

1. Remove Blog (Post Page) Heading
2. Default Layout will go like FEATURED IMAGE in left, POST META - POST TITLE - POST INFO - POST CONTENT and READ MORE in right // other posts
3. POST META - POST TITLE - POST INFO + FEATURED IMAGE - POST EXCERPTS - Read More // first post
4. Changing Pagination Text.

Prerequisite:

1. Make sure cropped images are disabled in Settings > Media and uncheck cropping image and make the size (width and height) 0 for all. Save Changes.
2. Settings > Reading > Assign Blog Page and Limit the Post to 3, 6 or more.

Tutorials Required:

1. Genesis Hooks
2. Genesis Loop Actions
3. Genesis Shortcodes

STEP 1

Let's make the Required settings in Customizer. Go to Appearance > Customize or Genesis > Theme Settings.

Theme Settings > Site Layout will be Content, Primary Sidebar

Theme Settings > Content Archives, Entry Excerpts. Enable Featured Image and size keep it 300 x 300, Alignment in Left and Pagination type Previous / Next.

STEP 2

Follow and use the snippet in child-theme/functions.php