Make Whole Cards Clickable
Makes an entire Group, Column or Query Loop card with the class "wpide-card-link" clickable, using the link in its heading, so visitors don't have to hit the small title link.
Opens WPIDE on
Code
.wpide-card-link {
position: relative;
}
.wpide-card-link :is(h2, h3, h4, .wp-block-post-title) a::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.wpide-card-link a:not(:is(h2, h3, h4, .wp-block-post-title) a),
.wpide-card-link button {
position: relative;
z-index: 2;
}
.wpide-card-link:hover {
cursor: pointer;
}
.wpide-card-link:focus-within {
outline: 2px solid currentColor;
outline-offset: 4px;
}Notes
The link in the card's heading (or Post Title block) becomes the click target; other links and buttons inside stay clickable on their own.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.