Genesis Tip — How To Add Background Image To Comments Link

January 24, 2012

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.

 

Join 37,807 others and get free tutorials & tips on design & development using Wordpress on, Thesis & Genesis!

Need help with Wordpress, Thesis or Genesis?

Are you a designer or a developer looking for a hand with Wordpress, Thesis or Genesis? Or perhaps want to save time with a project? Get in touch and let's get the ball rolling! Check out our Thesis development, PSD to Thesis & other services.

Comment on Genesis Tip — How To Add Background Image To Comments Link

You can add images to your comment by clicking here.

Previous post:

Next post:

X

Wordpress, Thesis, Genesis tutorials from Binary Turf — one tutorial a day. Subscribe & sharpen your web design skills.

Name:

Email:

We respect your email privacy.