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.

.featured-content .post-sharing {
  display: table;
  margin: 30px auto 0;
  text-align: center;
}

.featured-content .post-sharing .label {
  color: #999;
  font-size: 14px;
  letter-spacing: 0.2em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.featured-content .social-sharing li {
  display: inline-block;
  list-style-type: none;
  margin-bottom: 8px;
  margin-right: 8px;
}

.featured-content .social-sharing li a {
  border: 1px solid #999;
  border-radius: 100%;
  color: #999;
  display: inline-block;
  font-size: 14px;
  height: 30px;
  line-height: 29px;
  text-align: center;
  width: 30px;
}

.entry-meta span.sep {
  margin: 0 5px;
}

.featured-content.gfpc-widget .entry-meta .entry-categories,
.featured-content.gfpc-widget .entry-meta .entry-tags {
    display: inline;
}

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.