How to make whole post div clickable in blog/archives

One of my client wanted to make each article grid div clickable in his website. So he asked for my help. As I have troubleshooted his website and found that his website is built on the Genesis framework.

First I tried to do it with css and added below css Code.

							
							
					.entry-header .entry-title a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-decoration: none;
    /* Makes sure the link doesn't get underlined */
    z-index: 10;
    /* raises anchor tag above everything else in div */
    background-color: white;
    /*workaround to make clickable in IE */
    opacity: 0;
    /*workaround to make clickable in IE */
    filter: alpha(opacity=0);
    /*workaround to make clickable in IE */
}				
			

As due to each article post had only one link which is with tile and css property Opacity:0 it was making Blog post title invisible. So to overcome from this fix we had to add another post link with class ‘post-block-link’ in the article which is hidden and make our each article grid div clickable. So we added below code in functions.php and work job done.

							
							
					add_filter( 'genesis_post_info', 'custom_post_meta_text' );

function custom_post_meta_text( $title ) {
	$single_post_link = get_permalink( wp_get_post_parent_id( get_the_ID() ) );
    $post_info = 'by [post_author_posts_link] • Updated on [post_modified_date]';
	if ( is_home() || is_category() || is_tag()) {
		if ( $single_post_link ) {
			$post_info .= '<a class="post-block-link" href="'.$single_post_link.'"></a>';
            }
		}
	return $post_info;
}				
			

I hope this trick will help others too. Do let me know in comment if any one facing issue implementation. Also share your thought or other available trick which simplify it.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top