Creating checkerboard effect with featured posts on Atmosphere Pro Home page

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.

/**
* Creating checkerbord effect using Genesis Featured Posts Combo Plugin
* 
* @author Chinmoy Paul
* @copyright Copyright (c) 2016, Genesis Developer 
* @license GPL-2.0+
* @link http://genesisdeveloper.me/creating-checkerboard-effect-featured-posts-atmosphere-pro-home-page/
*/ 

//* Copy the code below this line. Add the code in your functions.php file

add_action( 'genesis_meta', 'gfpc_checkerboard_effect' );
function gfpc_checkerboard_effect() {
if( ! is_front_page() )
return;

//* assign a variable. using for image alignment and post counter
global $loop_counter;
$loop_counter = 1;

//* Add pre-defined "featured-content" class in GFPC widget markup
add_filter('dynamic_sidebar_params', 'add_class_to_gfpc_widget'); 
function add_class_to_gfpc_widget($params) {
if ( $params[0]['widget_id'] == "gfpc-widget-2" ) { //make sure its your widget id here
$class_to_add = 'class="featured-content ';
$params[0]['before_widget'] = str_replace( 'class="', $class_to_add, $params[0]['before_widget'] );
}
return $params;
}

/**
* Align the featured image at left or right side of entry content
* Also replacing the image class with new class
* 
* @param $image String
* @param $instance Object GFPC widget instance
* 
* @return string $image Featured Image HTML
*/ 
add_filter( 'gfpc_do_post_image_gfpc-widget-2', 'gfpc_featured_image_class', 10, 2 );
function gfpc_featured_image_class( $image, $instance ) {
global $loop_counter;

if( $loop_counter % 2 == 0 )
$class = 'alignleft';
else
$class = 'alignright';

$image = str_replace( array( 'alignnone', 'alignleft', 'alignright' ), 'entry-image attachment-page', $image );
$image = str_replace( '<a', '<a class="'.$class.'"', $image );

return $image; 
}

remove_action( 'gfpc_entry_header', 'gfpc_do_post_info', 12, 2 );
add_action( 'gfpc_entry_header', 'gfpc_do_post_info', 6, 2 );

/**
* Show Post title and fitting the design with Atmosphere Pro featured pages title design
* 
* @param $title String Post Title
* @param $instance Object GFPC widget instance
* 
* @return String $title
*/ 
add_filter( 'gfpc_do_post_title_gfpc-widget-2', 'gfpc_post_title', 10, 2 );
function gfpc_post_title( $title, $instance ) {
global $loop_counter;

preg_match( '#<a[^>]+>(.+?)</a>#ims', $title, $match ); 
$large_title = '<span class="atmosphere-large-text">' . sprintf( "%02d", $loop_counter ) . '</span>
<span class="intro">'. $match[1] . '</span></a>' . "\n";

return str_replace( $match[1] . '</a>', $large_title, $title );
}

/**
* Increment loop counter by one
* Returning early if widget ID is not matching with my GFPC widget
* 
* @param $instance Object GFPC widget instance
* @param $widget_id String GFPC widget ID
* 
* @return void
*/
add_action( 'gfpc_entry_footer', 'gfpc_loop_counter', 20, 2 );
function gfpc_loop_counter( $instance, $widget_id ) {
if( $widget_id != 'gfpc-widget-2' )
return;

global $loop_counter; 
$loop_counter++;
}

/**
* Echo share buttons below the entry content.
* 
* @param $instance Object GFPC widget instance
* @param $widget_id String GFPC widget ID
*/
add_action( 'gfpc_entry_footer', 'gfpc_post_share', 10, 2 );
function gfpc_post_share( $instance, $widget_id ) {

if ( has_post_thumbnail() ) {
$image = wp_get_attachment_url( get_post_thumbnail_id() );
}

$fb = 'ion ion-social-facebook'; 
$tw = 'ion ion-social-twitter';
$pin = 'ion ion-social-pinterest';
$gp = 'ion ion-social-googleplus'; 
$ln = 'ion ion-social-linkedin';
$reddit = 'ion ion-social-reddit';
?>
<div class="post-sharing">
<p class="label"><?php _e( 'Share This Article', 'gfpc' ); ?></p>
<ul class="social-sharing">

<li class="facebook">
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo get_permalink() ; ?>"><i class="<?php echo $fb; ?>"></i></a>
</li>

<li class="twitter">
<a target="_blank" href="https://twitter.com/intent/tweet?text=<?php the_title(); ?>&via=genesisdevelopr&url=<?php echo get_permalink() ; ?>"><i class="<?php echo $tw; ?>"></i></a>
</li>

<li class="pinterest">
<a target="_blank" href="https://pinterest.com/pin/create/button/?url=<?php echo get_permalink() ; ?>&media=<?php echo esc_url( $image ); ?>"><i class="<?php echo $pin; ?>"></i></a>
</li>

<li class="google-plus">
<a target="_blank" href="https://plus.google.com/share?url=<?php echo get_permalink(); ?>"><i class="<?php echo $gp; ?>"></i></a>
</li>

<li class="linkedin">
<a target="_blank" href="http://linkedin.com/shareArticle?mini=true&url=<?php echo get_permalink() ; ?>&title=<?php the_title() ; ?>"><i class="<?php echo $ln; ?>"></i></a>
</li>

<li class="reddit">
<a target="_blank" href="http://www.reddit.com/submit?url=<?php echo get_permalink(); ?>&title=<?php the_title(); ?>"><i class="<?php echo $reddit; ?>"></i></a>
</li>

</ul>

</div>
<?php
}
}

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.