open event in new tab

Hi there,

Thanks for your note.

There is probably a way with a dash of custom code.

I say “probably” because I’m not entirely sure what you mean by “the events page” as it relates to your site.

Take our live preview site for example: https://demo.theeventscalendar.com/

The homepage is essentially also the events page, so there’s not really a way of opening that in a new window if someone happens to land on that page anyway.

However, there would be a way to write code to make sure when somebody clicked “Multi-day Event” (or any individual event link like that) that that opened in a new window.

Could you provide some additional details as to what you mean?

Links to a page on your site (and direction as to which links on that page should open in a new window when clicked) and/or annotated screenshots, if you wouldn’t mind, would be immensely helpful in directing you to a satisfactory solution.

Looking forward to your reply.

Best regards,
Leland

Awesome, that’s exactly the information I was looking for.

So first off, it looks like the event grid on that page are rendered by something called Fusion Builder.

I believe that’s related to your Avada theme. They might have a built-in feature that would help with this. It might be worth checking with their support just in case.

With that said, even if they don’t, the below PHP code snippet that I just whipped up for you should help:

<?php
add_action( 'wp_footer', function() {
// Only run this code on page id #27735, aka the "Upcoming Events" page
if ( is_page( 27735 ) ) :
?>
	
<script>
	(function () {
	 	// Customize your domain name here, if needed
		const DOMAIN_NAME = 'pellis.online';

	 	// Grab all links that start with /event/
		const eventLinks = document.querySelectorAll( 'a[href^="https://' + DOMAIN_NAME + '/event/"]' );
		
		// Define the function that will add target="_blank" to any link passed to it
		const targetBlankify = link => {
			link.setAttribute( 'target', '_blank' );
		};
		
		// Apply the targetBlankify function to each link
		eventLinks.forEach( link => targetBlankify( link ) );
	} )();
</script>

<?php
endif;
} );

If you’re not familiar with working with custom PHP snippets, we have a guide about it here: https://theeventscalendar.com/knowledgebase/k/best-practices-for-implementing-custom-code-snippets/

Or really any “php snippets wordpress” guide should help. It’s not specific to us.

Since this Fusion Builder isn’t our product and I don’t have access to it, this snippet isn’t specific to that or even The Events Calendar. It’s just looking for any link that starts with /event/ on your Upcoming Events page.

IF ANYONE ELSE IS READING THIS, please see this more generalized snippet: https://gist.github.com/lelandf/6ff9e9bf91066e09a5dbf6c0b3c8cbee

You will need to customize it for use on your site, especially the domain name.

Hope that helps.

Best regards,
Leland

• This reply was modified 2 years, 1 month ago by Leland Fiegel. Reason: bbpress messing with my code snippet

Happy to help!

I’ll go ahead and mark this topic as resolved. Feel free to start a new topic if you have any other questions and we can take a look.

Best regards,
Leland