Skip to content

Snippet: Display Avatars Over Entry Image (via custom overlay)

This sample code adds a new "Avatar" overlay style that you can choose when selecting an image overlay so you can display the post avatar over the entry image. Note, that the snippet contains both PHP and CSS code so you will need to add the code in the correct locations.

// PHP CODE - Add to child theme functions.php file
add_filter( 'wpex_overlay_styles_array', function( $overlays ) {
	$overlays['custom-avatar'] = 'Avatar';
	return $overlays;
} );

add_action( 'wpex_pre_include_overlay_template', function(  $style, $args ) {

	// Custom output for YOUR_OVERLAY_NAME
	if ( 'custom-avatar' == $style ) :

		// Only used for outside link position so we can link the avatar to the author posts page
		if ( 'inside_link' == $args['overlay_position'] ) {
			return;
		}

		// Overlay Ooutput
		$output = '<div class="custom-avatar-overlay"><a href="' . esc_url( get_author_posts_url( get_the_author_meta( 'ID' ), get_the_author_meta( 'user_nicename' ) ) ) . '">' . get_avatar( get_the_author_meta( 'ID' ), 40 ) . '</a></div>';

		// Echo output
		echo $output;

		// Important -> prevents the theme for checking for overlay template part
		return;

	endif;

}, 40, 2 );

/* CSS Code - Add to wherever you add custom CSS (child theme style.css or Theme Panel > Custom CSS */
.custom-avatar-overlay {
    position: absolute;
    width: 40px;
    height: 40px;
    bottom: 20px;
    right: 20px;
}
All PHP snippets should be added via child theme's functions.php file or via a plugin. We recommend Code Snippets (100% Free) or WPCode (sponsored)
Back To Top