Genesis Tip — How To Add Background Image To Comments Link

Comments are an integral part of a blog post. The readers of your blog will be glad to see a beautiful & stylized comments link with an awesome background image in your blog. Genesis WordPress theme provides you with the flexibility to customize your website as per your requirement. If you are looking forward to add a background image to comments link in Genesis, add the following code in functions.php:

function custom_post_comments() {
	if (!is_single() && !is_page()) {
		echo '<p class="custom_comments"><a href="';
		the_permalink();
		echo '#comments" rel="nofollow">';
		comments_number( __( '<span>0</span>' ), __( '<span>1</span>' ), __( '<span>%</span> ' ) );
		echo '</a></p>';
	}
}

add_action('genesis_before_post_content','custom_post_comments');

And here is the code for styling the comments link. Add the following code in style.css:

.custom_comments {
	text-align: center;
	background: url(images/c-box.gif) no-repeat top right;
	height: 67px;
	width: 76px;
	margin-left: 558px;
	padding-top: 8px;
}

Note: Replace the name of the image with your custom background image.This will not only allow you to add a background image to comments link, but this will also work as a link to the comments.