Genesis Featured Posts Combo is a newish plugin (starts from $15) by Chinmoy Paul for Genesis that fills the gaps in standard Genesis Featured Posts, Genesis Featured Page widgets and other abandoned plugins like Genesis Featured Widget Amplified (totally dead) and Genesis Sandbox Featured Content Widget (barely alive).
These are the major selling points of Genesis Featured Posts Combo for me besides the usual ability to display variety of Posts, Pages and custom entities:
- Built-in layouts.
- Pagination that actually works.
- Under active development with a very receptive and approachable plugin author who is open to feature requests and improvements.
In this article I provide the details of how we can display Featured image and titles of four static Pages in columns using Genesis Featured Posts Combo and ACF.
Advanced Custom Fields is being used to set up a custom “Title for Homepage Boxes” field, which when populated will replace the Page title in the widget on front end.
Step 1
Install and activate ACF. Create a field group named say Page Meta and create a text field for your custom page title.
Step 2
Add the following in child theme’s functions.php:
| // Register a custom image size for Home Boxes images | |
| add_image_size( 'home-box', 300, 300, true ); |
Step 3
Step 4
Create/edit the 4 Pages whose Featured images and (custom) titles you would like to appear in the front end. Enter your custom title in the “Title for Homepage Boxes” field if you would like to override the default Page title.
Step 5
Go to Appearance > Widgets and drag a Genesis Featured Posts Combo widget into your desired widget area. Set ‘page’ as the Post Type and enter comma separated IDs of Pages you would like to display. Set the name of your custom field for the custom title.
Note:
1) I have set the ordering by ID in Ascending order so that Pages are laid out left to right according to the order in which their IDs have been entered earlier.
2) ‘Number of Posts’ field’s value does not matter for ‘page’ Post Type.
Step 6
Update on Thursday, June 04, 2015: v1.0.1 of the plugin has native 4-columns support. So this step is not needed any more. Just select 4-column layout in the widget settings.
At the time of writing this, 4-column layout is not a built-in option in the plugin. I have been told by Chinmoy that it will be added soon.
Until then we can add a few lines of code in functions.php and style.css to add one-fourth column class to the 4 entries.
| add_action( 'gfpc_before_entry', 'gfpc_four_cols', 10, 2 ); | |
| function gfpc_four_cols( $instance, $widget_id ) { | |
| if ( ( $widget_id == "gfpc-widget-2" ) && ( $instance['layout'] == 'layout-seven' ) ) { | |
| add_filter( 'post_class', 'adding_one_fourth_class' ); | |
| } | |
| } | |
| add_action( 'gfpc_after_entry', 'gfpc_remove_filter', 10, 2 ); | |
| function gfpc_remove_filter( $instance, $widget_id ) { | |
| if ( ( $widget_id == "gfpc-widget-2" ) && ( $instance['layout'] == 'layout-seven' ) ) { | |
| remove_filter( 'post_class', 'adding_one_fourth_class' ); | |
| } | |
| } | |
| function adding_one_fourth_class( $classes ) { | |
| $classes[] = "one-fourth"; | |
| return $classes; | |
| } |
| #gfpc-widget-2 .layout-seven .one-fourth:nth-of-type(4n+1) { | |
| clear: both; | |
| margin-left: 0; | |
| } |
where gfpc-widget-2 is the ID of widget. This can be obtained using Firebug or Chrome’s inspector.
Step 7
By now we should have the 4 Pages’ info appearing in 4 columns on the front end.
To replace the Page titles with custom titles where present, add the following in functions.php:
| add_filter( 'gfpc_do_post_title_gfpc-widget-2', 'sk_custom_title', 10, 2 ); | |
| function sk_custom_title( $title, $instance ) { | |
| $replace = 'href='; | |
| $replace_with = 'class="button" href='; | |
| $title = str_replace( $replace, $replace_with, $title ); | |
| return $title; | |
| } |
I am gonna ask a noob question.
How did you think of passing arguments – $instance, $widget_id to functions? I mean how did you know that they will be containing current values that the widget is serving?
Most of the above code was provided by Chinmoy in Slack.
Even otherwise you can figure it out by going through plugins/Genesis Featured Posts Combo/genesis-featured-posts-combo/genesis-featured-posts-combo.php.
http://d.pr/i/AGNO
[…] Reference: Step 7 of https://sridharkatakam.com/custom-page-titles-in-genesis-featured-posts-combo-plugins-widget/ […]