[Resolved] How to make whole post div clickable in blog / archives

[Zach]

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.

[Tom]

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.

[Zach]

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

[Tom]

Nice work, good solution! 🙂

[Zach]

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;
}

[Gulshan]

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.

[David]

Hi there,

can you raise a new topic where you can share a link to your site.

[Author]

Posts