Community Forums › Forums › Archived Forums › Design Tips and Tricks › Adding Image Titles to Featured Post Widgets.
Tagged: featured page, featured post, genesis, image, Image Title
- This topic has 4 replies, 2 voices, and was last updated 10 years, 8 months ago by jonbarratt.
-
AuthorPosts
-
January 27, 2014 at 8:53 pm #87380jonbarrattMember
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.
http://www.krolyn.com | Facebook
“I don’t have any idea what I’m doing half the time. The other half, I’m brilliant. Asleep, but brilliant.”April 8, 2014 at 2:40 pm #99148SusanModeratorDid you ever get this figured out? I’d be happy to escalate if you are still looking for resolution.
April 8, 2014 at 4:36 pm #99209jonbarrattMemberThanks Susan. However, this post IS the resolution.
http://www.krolyn.com | Facebook
“I don’t have any idea what I’m doing half the time. The other half, I’m brilliant. Asleep, but brilliant.”April 8, 2014 at 4:58 pm #99211SusanModeratorThanks, Jon - I just changed the category from "Not Resolved" to "Not a Support Question".
April 8, 2014 at 5:10 pm #99213jonbarrattMemberSorry about that, Susan. I didn't realise I needed to do that. Next time 🙂
http://www.krolyn.com | Facebook
“I don’t have any idea what I’m doing half the time. The other half, I’m brilliant. Asleep, but brilliant.” -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.