Make entire post (div) clickable (linked)

If you self-host WordPress and have a full site editing-enabled theme, here’s how to make the entire post block within your main list of posts clickable. In other words, this is for if your theme forces the user to click directly on the post title to go to the post, but you instead want them to be able to tap anywhere within that post’s block.

Thanks to Gutenberg and sites that have the full site editing experience, this is all you need to do.

  1. Go to Appearance and Editor
  2. Add a new block in your footer
  3. Type /html
  4. Choose the HTML block
  5. Paste in this Javascript
  6. Save
<script>
var items=document.querySelectorAll(".wp-block-post");
items.forEach(function(item){
  item.addEventListener("click",function(ev){
     var link=item.getElementsByTagName("a")[0];
     link.click();
  })
});
</script>

Optionally, if you want the mouse cursor to turn into a pointer/hand icon on hover, add this to your custom CSS:

.wp-block-post:hover {
cursor: pointer;
}


Leave a Reply

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

Billy Wilcosky