Make Dynamic Posts Clickable Without Plugins
Post Contents
How Do I Make My Entire Posts Clickable?
Ok, so if you’re like me, you’re frequently building some type of post grid, listing, or Loop.
You might be creating blog posts, product reviews, real estate listings, events, employee listings, or available puppies at your local animal shelter. * Side note, go get one.
Whatever your custom post type is, there are only a couple of things you can make clickable…
Your options are usually, an actual image, and the title, but that’s about it until now.
Here’s what you can’t do.
You can’t make the background image clickable, you can’t make the column clickable or the section.
Even though,
What you really want is for the entire listing to be clickable for each of your items right?
For my blog site, BenefitsOfStretching, this was a problem.
We’ve already talked about how to make a single column clickable in Elementor. But, that only works if you know where the link is going.
So,
How do you make all of the columns dynamically clickable to their respective posts?
If you happen to use Elementor Custom Skin (a great plugin by the way), Crocoblock (a personal favorite), or even regular Elementor posts, this is big deal. Let’s do it.
Setting Up Your CSS
First, the trick to this is going to be finding each of the columns you want to be clickable
To do this you will need to go to your Posts widget after you’ve placed it on the page.
Head over to advanced and apply a class name to the posts, any old class name will do.
I chose caseys-js-columns, I could have named it strawberry, no problem, just don’t add the period in front of it, yet.
So now, we have our columns named so we can target them, we just need to add a little jQuery to the top of our site.
Adding the jQuery
So now, we have our columns named so we can target them, we just need to add a little jQuery to the top of our site.
I chose to put this in the header, so it appears on every page. There are of course many other ways to do it.
I generally make sure to remove all padding and margin from the HTML widget and set the background to match my site background just to play it safe.
Then we just have to enter our custom jQuery into the HTML field.
The Script
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.caseys-js-columns').find('.elementor-post').each(function(){
let link = $(this).find('a').attr('href');
$(this).wrapAll( document.createElement( 'a' ) );
$(this).closest('a').attr('href', link);
});
});
});
</script>
You will just need to replace the part of the code above that says .caseys-js-columns with .whateveryourclassnameis and you should be good to go! What Just Happened?
Want to break down what this script is doing?
The first part is waiting for the full page to be loaded.
Next, it’s the script is looking through the entire post listing for anything with the class of caseys-js-columns, and inside of that, for something with the class of elementor-post.
elementor-post is a default Elementor class for all posts.
Then, the script is saying that for each listing, we’re going to create a variable called “link”.
“link” is going to be equal to whatever is found as the href for an A tag that exists in your column pointing to the right location, like…. your title.
Then it will wrap the entire section with another A tag.
Finally, this will set that A link the variable “link” that was defined earlier.
Pretty neat aye?
What About A New Window?
<a href="somelink.com">your link</a>but now, we need to do something that will create:
< href="somelink.com" target="_blank">your link</a>This is actually pretty simple but just needs a quick update. In our previous section we had this bit of code:
$(this).closest('a').attr('href', link);which could have also been written like:
$(this).closest('a').attr({href:link});See where I’m going with this? So, we could also use
$(this).closest('a').attr({href:link, target:"_blank", title:"My new page title"});
This last version takes three attributes, link (a defined variable), target, and title. I just threw the title in there to show you can keep going with this, whatever works!
Special Thanks!
Final Thoughts
This method has been a lifesaver. I’ve used this on every Ele Skins site that I’ve made.
Do you know of a better way to do this?
Are you having problems with this?
Leave me a comment and I’ll help out!
