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.
