Casey Whitcher Profile
Casey Whitcher
Show Some Love, Share!
Share on facebook
Share on twitter
Share on linkedin

Post Contents

Make Dynamic Posts Clickable Without Plugins

Dynamic Clickable Elementor Columns
Design
Casey Whitcher Profile
By
Casey Whitcher
Show Some Love, Share!
Share on facebook
Share on twitter
Share on linkedin

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?

Special Thanks!

I owe this tip to Maxime of ElementorCodes.com. He took time out of his day to send me this to help me out with my site BenefitsOfStretching.com.

Great developer and a fantastic website if you’re looking for awesome Elementor tutorials.

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!

11 Responses

  1. 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.

      1. 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.

        1. 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

          code in elementor

          Hopefully, this will work better for people copying it now.

  2. 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%;
    }

    1. 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!

  3. 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.

  4. 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

Leave a Reply

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

Related Articles

Technical

GTM + WooCommerce + Facebook Pixel!

Crocoblock

The Big List Of Crocoblock Widgets

Crocoblock

See All JetTricks By Crocoblock On One Page

CSS

Flexbox Tricks Are An Elementor Game Changer

RELATED
Technical

GTM + WooCommerce + Facebook Pixel!

Crocoblock

The Big List Of Crocoblock Widgets

Crocoblock

See All JetTricks By Crocoblock On One Page