Adding Image Titles to Featured Post Widgets.

I was recently presented the challenge of using image titles for Genesis featured-post widgets on the front page of a custom child theme (http://www.mickybooth.com.au). Two widgets were located on the front page, and as you’d expect, each required a different image. So, this is how it was achieved.

1. Create a copy of the Genesis featured-post-widget.php file and add it to your child theme folder. Best to adhere to good protocol, so if you haven’t already, create a lib folder in your child theme folder and place it there (childtheme > lib > featured-post-widget.php).

2. Open the copied .php file and rename the file on line 21 to uniquely identify the new widget.

class Genesis_Featured_Post extends WP_Widget {
to –
class Genesis_Custom_Featured_Post extends WP_Widget {

then include the new image area by adding –
echo '<div class="featured-title"> </div>';
on line 133 before –
if ( $instance['show_image'] && $image )

3. Open your child theme functions.php file and add the following code –

/* Code for Replacing Feature Post Widget */
include_once( CHILD_DIR . '/lib/featured-post-widget.php' );
register_widget( 'Genesis_Custom_Featured_Post' );
add_action( 'widgets_init', 'unregister_genesis_widgets', 20 );
function unregister_genesis_widgets() {
unregister_widget( 'Genesis_Featured_Post' );
}

4. Open your child theme style.css file and add the class –

.featured-title {
height: height of image;
width: width of image;
background: url(of image) no-repeat;
}
and style / position accordingly.

To use alternative images for multiple featured post widgets, simply identify the widget ID prior to the .featured-title class (eg. #featured-post-4 .featured title) and use the url of the alternative image.

And that’s it!! You could do similar for featured-page widgets as well.
Hope it makes sense.

Spread the Word!