Creating checkerboard effect with featured posts on Atmosphere Pro Home page

Original request:

Requirements

• WordPress 4.0+
• Genesis 2.2.0+
• Atmosphere Pro Theme
• Genesis Featured Posts Combo Plugin

Step 1

Drag and drop the “Genesis Featured Posts Combo” widget into Front Page 3 widget area. Now configure the following options:

• Layouts: Full Width (layout no. 7)
• Post Type: Post. You can select CPT.
• Check Show Post Title checkbox
• Check Post Info checkbox
• Enter “[post_date] <span class=”sep”>/</span> [post_categories before=""]” into Post Info textbox
• Post Content Limit: 220
• Check Show Featured Image checkbox
• Image Size: Front Page Featured (640×640)
• Number of Posts: 3

Hit on “Save” button and save the widget.

Step 2

Now add the following scripts in your functions.php file.

My GFPC widget ID is gfpc-widget-2. I created the filter and hooks based on my GFPC widget ID. You’ll replace the widget ID with your GFPC widget ID. Explaining the code at below:

15-16: Returning early if user is not visiting the home page
19-20: Create a new global variable which is using for featured image alignment and post title. Set initial value is 1.
23-30: Adding the predefined CSS class name (.featured-content) into GFPC widget markup. So you do not require any extra CSS for styling.
41-54: Setting the featured image alignment based on $loop_counter variable. Image will align at left if post loop counter is dividing by 2. Otherwise it will align at right side of the post content.
56-57: Re-positioning post info. By default post info is coming at below the post title. I am moving it above the post title.
67-76: Just fitting the featured post title’s style with featured page title’s style.
87-94: Increment the loop counter by 1. Returning early if widget ID is not matching with my GFPC widget ID.
102-148: Adding social share icons below the entry content. Atmosphere Pro theme is using the IonIcons font. So I am using same font for social share icons.

Step 3

Add the following the CSS in your style-front.css file. This CSS is for social share icons.

All are done. I am getting this:

Any Questions?

I hope this in-depth tutorial helps you implement the checkerboard effect with featured posts in your site.