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!
13 Responses
Hi,
I can’t make this work, I got a console error
Uncaught SyntaxError: Invalid or unexpected token
It directs me to the first line
document.addEventListener(‘DOMContentLoaded’, function() {
or does this only work when display the posts are displayed in loop template (made with Ele custom skin) ? I used a simple posts widget in card layout and the whole card is not clickable.
Hi Frank, should work regardless, could you send me a link to the page or post it and I can take a look?
Thanks it works now.
The problem is not with the script but with the way the quotes are copied and pasted inside the HTML widget. It apparently copies curly qoutes while it must be straight qoutes.
Thanks Frank, I have issues trying to display code into Elementor. I know some others have brought that up. It seems to convert it if you move back and forth between the visual editor and the text tab.My latest attempt is combining
Hopefully, this will work better for people copying it now.
Maybe you can use the new code highlight widget in Elementor 3.1 beta3.
It even has a copy button, very usefull, but experimental for now.
https://github.com/elementor/elementor/issues/13633
Anyway, I’m using this script and it works great now. I even made a global widget from the HTML widget so I can use it whenever I want.
I thing I had to fix is that the postcards don’t take full height anymore in the grid. This is because the posts widget uses CCS grid, the .elementor-posts-container is the grid container and the all direct children become grid items. With this script, the a wrappers become grid containers instead of the .elementor-post.
Simple CSS fix:
.caseys-js-columns .elementor-post {
height: 100%;
}
That’s awesome, sounds like you took this and ran with it. Checked out your site https://glyphbox.be/ awesome print work there. That Rock Noise Gate stuff looks like it was a blast to work on! I’ve been MIA here for a few weeks, started a new job that has been keeping my nose to the grindstone. Just launched a new site for them using Divi which I’ve barely touched in years, really made me appreciate Elementor!
Definitely saved your site, really appreciate your attention to detail and style!
Thanks, my website needs an update though. I made it in 2016, it’s hardcoded. I’m working with Elementor since 2018.
Anyway, this script is not only usefull for the posts widget, but also for the iconbox and imagebox widget.
One problem though, the script changes the HTML structure a bit and all my CSS to fic equal height issues didn’t work anymore. But I could fix it.
https://franktielemans.be/blog/make-widgets-clickable
The whole widget is linked to a page. It works for the posts, imagebox and iconbox now and the CSS fixes equal height problems. Scroll down for the code.
I noticed a little mistake in the closing of the script above:
should be
Thanks Jan, not sure how that got in there, but I updated it 🙂
Thanks for the code Casey it worked!
But I have a small issue. When you right click the link, and click on “search google for + title of the post” instead of just showing the title of the post, it shows the title of the post PLUS the alt text of the image that is associated with that post. You get what I mean?
Is there a solution for this? Because I assume it hurts SEO given it’s title + alt text.
Cheers
Hi Casper, I’m sorry I’m not really following? I just sent you a direct email, could you follow up with me and we’ll take a look?
What if we want the link to open in a new tab?
Hey Paul, Sorry I’ve been MIA from this site for a while, I’m guessing you already got this figured out, but if not, I’m updating the post above.