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:
For professional look I added the following CSS in style.css file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
/* # 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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( '[[post_comments zero="0 Comment"]]' ); 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.
Leave a Reply