Category:

If you self-host WordPress here’s how to make the entire post block within your main list of posts (the blog loop) 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. This can be a better user experience especially on a small mobile device.

I’ll first go through the steps for full site editing themes, and then provide a solution for traditional themes.

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

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

If you have a traditional theme you may add the same JavaScript to your theme’s footer.php file, just above the </body> tag, but update the element targeted. Or, use a plugin that easily lets you inject scripts like this into your header or footer. And, you can use the same above CSS to add the mouse cursor pointer effect.

This JavaScript might work for you by default, but it depends on the theme. In the above example (see the first line after the script tag) I target the elements on the page with a CSS class of “post” which are within a main element called “blog.” If your posts are instead each wrapped in a div with a class called “chicken,” then you would change the first line to:

var items=document.querySelectorAll(".chicken");

Here’s the updated JavaScript for themes with the “.blog .post” structure. I hope this helps! Leave a comment if you have questions and I’ll do my best to help you further.

<script>
var items=document.querySelectorAll(".blog .post");
items.forEach(function(item){
  item.addEventListener("click",function(ev){
     var link=item.getElementsByTagName("a")[0];
     link.click();
  })
});
</script>


Leave a Reply

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

Billy Wilcosky