Full Width Featured News Section on Flex Pro Theme

Featured News Section

One of my GFPC plugin customer is wanting the above design at Home Middle widget area on Flex Pro theme.

First I assigned the “featured news” tag in 7 posts. Then I put the Combo widget at Home Middle widget area and setup the widget in this way. See the screenshot:

Fetching Featured News Posts from selected tag
Fetching Featured News Posts from selected tag

For professional look I added the following CSS in style.css file.

/* # GFPC Widget
---------------------------------------------------------------------------------------------------- */
.home-middle .gfpc-widget .entry-title {
    font-size: 16px;
    font-weight: bold;  
    margin-bottom: 5px;
}

.home-middle .layout-one .one-half.left-part {
    width: 31.623931623931625%;
}

.home-middle .layout-one .one-half.right-part {
    width: 65.81196581196582%;
}

.home-middle .layout-one .entry,
.home-middle .layout-one .right-part .entry {
    border-bottom: none;
    padding: 0;
}

.home-middle .layout-one .right-part article:nth-child(2n+1) {
    clear: left;
    margin-right: 2.5641%;
}

.home-middle .layout-one .right-part article {
    float: left;
    width: 48.717948717948715%;
}

.home-middle .layout-one .entry-content p {
    display: inline;
    font-size: 15px;
    margin: 0;
    padding: 0;
}

.home-middle .layout-one a.alignleft,
.home-middle .layout-one img.alignleft,
.home-middle .layout-one .wp-caption.alignleft {
    margin: 0 14px 14px 0;
}

.home-middle .entry-comments-link::before {
    display: none;
}

.home-middle .entry-comments-link {
    display: inline-block;
    font-size: 14px;
}

@media only screen and (max-width: 800px) {
  .home-middle .layout-one .one-half.left-part,
  .home-middle .layout-one .one-half.right-part {
     margin: 0;
     width: 100%;
  }
}

If you look the design then you will see that comments number is coming at right side of the entry content. By default you can’t do this from Widget section. You need some custom PHP code for it. GFPC plugin is built on hooks and filters. In this case I used gfpc_entry_content hook.

remove_action( 'gfpc_entry_content', 'gfpc_do_post_content', 10, 2 );
add_action( 'gfpc_entry_content', 'gd_post_content', 10, 2 );
function gd_post_content( $instance, $widget_id ) {

    if ( empty( $instance['content_limit'] ) )
      return;
    
    printf( '<div %s>', genesis_attr( 'entry-content' ) );
    
    if ( $instance['content_limit'] == 'full' )
        the_content( esc_html( $instance['more_text'] ) );
    elseif ( ( int ) $instance['content_limit'] > 0 )
        the_content_limit( ( int ) $instance['content_limit'], esc_html( $instance['more_text'] ) );
    elseif( $instance['content_limit'] == 'excerpt' )
        the_excerpt();
    else
      return;
    
    
    if( $widget_id == "gfpc-widget-6" )
      echo do_shortcode( '"0' );
      
    echo '</div>'. "\n";
  
}

If you are using the multiple Combo widget on same page or other pages then above code will execute for all Combo widget. For this reason I used the “if” statement and displaying the comments number at right side of the entry content for a specific Combo widget. In this example my widget ID is “gfpc-widget-6”. Easily you will get this widget ID from Combo Widget section.

gfpc-widget-id

Share This Article

Subscribe Membership Plan ($9.99/mo)

  • Get full access to all premium tutorials
  • Get Support for the posted content
  • Request for specific how-to tutorials
  • Cancel the subscription at anytime

Reader Interactions

Leave A Reply

Your email address will not be published. Required fields are marked *