Archived topic
How to make whole post div clickable in blog / archives
6 replies · Started by Zach on November 3, 2017
I’m using GPP 1.5. I’m using columns for the blog, blog archives, and CPT archives:
https://www.zachpoff.com/site/artwork/
I want to make each article grid div clickable but I’m struggling with the CSS technique mentioned above. I thought I could select the post title link (without selecting the title of single posts too) this way:
.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 */
}But it produces strange effects (title link disappears, links seem to overlap and cover huge areas) so I’m clearly missing something. I had better luck selecting the “read more” link, perhaps since it’s immediate parent is the div whose dimensions I want the link to fill? (The link text still disappears though, and some posts have manual excerpts so they won’t have a “read more” link.)
Am I missing something obvious? I’m really trying to avoid JS here, but maybe there’s a hook I could use to wrap the whole div in a link since html5 allows that?
Thanks for any insight.
Totally untested, but if you want to avoid javascript, you could do this:
add_action( 'generate_before_content', 'tu_open_block_link' );
function tu_open_block_link() {
if ( is_singular() || is_404() ) {
return;
}
echo '<a class="post-block-link">';
}
add_action( 'generate_after_content', 'tu_close_block_link' );
function tu_close_block_link() {
if ( is_singular() || is_404() ) {
return;
}
echo '</a>';
}Then you would make your link a block element:
.post-block-link {
display: block;
}You'll likely need some more CSS, but that should be a good start.
That markup confused browsers mightily. Even though the page source showed that each post was wrapped by the anchor, the inspectors in Safari and Firefox showed a phantom </a> before the rest of each post started. I know html5 allows
<a><div></div></a> but I think it might not allow
<a><div><a></a></div></a>?
Instead, I used your hook to insert an invisible link just after the inside-article div, and used CSS to expand it to fill the whole div:
add_action( 'generate_before_content', 'tu_open_block_link' );
function tu_open_block_link() {
if ( is_singular() || is_404() ) {
return;
}
echo '<a class="post-block-link" href="' . get_permalink() . '"></a>';
}CSS (note that .inside-article must be relative, otherwise the absolute positioning of the link won't work):
.inside-article {
position: relative;
}
a.post-block-link {
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 */
}Unless you think this will break something, I'm happy to mark this topic as resolved. -Zach
Nice work, good solution! :)
One more addition. I used this css so the whole div background color changes on hover. Single posts also have the .inside-article class, so these child selectors make sure our style only effects the posts in the blog index, archives, etc.
div.generate-columns-container > article > .inside-article:hover {
background-color: #ffffcc;
}add_action( 'generate_before_content', 'tu_open_block_link' );
function tu_open_block_link() {
if ( page_for_posts() || is_404() ) {
return;
}
echo '<a class="post-block-link" href="' . get_permalink() . '"></a>';
}I have seperate page for Homepage & Blog archive in the Reading settings instead showing latest posts. This shows call to undefined function error. Please help.
Hi there,
can you raise a new topic where you can share a link to your site.
