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.