Elementor Posts Widget is among one of the most used widgets which is almost an integral part of more than 99% of websites. If you add the Post Widgets or have used it before, you are well aware that the Widget by default add links to Single Post URL on both Featured Image & Post Title. Amazingly, you can add a Read More button and same link can be added to it.
Unfortunately, till the present version developers at Elementor haven’t added a toggle switch to show link or not on the Widget, the same goes for Archive Posts. Recently, while working on a project I just needed to remove the links both on title & thumbnail (Featured Image), so I decided to share the same, anybody looking for this similar functionality can use the code.
What We Need?
In order to get the desired result, we need to use some custom Vanilla JavaScript. If you are jQuery fan, you can write the same in jQuery as well. We can add our code by going to ELEMENTOR -> CUSTOM CODE, which also allows us place our custom code on a specific page as well.
It is a pretty straightforward code and a matter of removing the HREF attribute on the a tag. Elementor uses two special classes elementor-post__title & elementor-post__thumbnail__link which are added when posts are displayed on the front-end. So our simple script will:
- Select the classes using document.querySelectorAll( ) function.
- Next we run a For Each loop & pass a custom function.
- Our custom function will simply change the href attribute of <a> tag.
<script type="rocketlazyloadscript">
const postLinks= document.querySelectorAll('.elementor-post__title, .elementor-post__thumbnail__link')
postLinks.forEach(removePostLinks);
function removePostLinks(postLinks) {
postLinks.removeAttribute("href");
postLinks.childNodes[1].removeAttribute("href");
}
</script>