Make the Event Website URL a Linked Word or Button

By default, adding a URL to this field will result in that URL displaying on the event page using Classic Editor like this:

That’s great and all, but what if we have a really long URL and would rather replace that with a linked word instead? What about a button? Awesome news: in The Events Calendar in Block Editor, this is already possible.

We’ll walk through how to do both in this article for those of you holding on to Classic Editor mode.

Change the URL to a linked word

Our first goal will be to change the text from the URL to a “Visit Website →” label that is still linked to the same place. You can do that by adding the following snippet to your theme’s functions.php file:

function tribe_get_event_website_link_label_default( $label ) {
  $url = tribe_get_event_website_url();
  if ( $label === $url ) {
    $label = 'Visit Website »';
  }
  return $label;
}
add_filter( 'tribe_get_event_website_link_label', 'tribe_get_event_website_link_label_default' );

That will result in the URL being replaced with our “Visit Website »” label:

If you’d like the website link to open in a new window, you can use the code below:

add_filter( 'tribe_get_event_website_link_target', static function() {
    return '_blank';
} );

Change the URL to a button

What, you want a button instead of a simple link? Let’s do that. Let’s first make a few changes to the snippet we used to make the link:

<?php
/**
 * The Events Calendar: Change the Event Website plain text link to a button, including shortening the anchor text to
 * avoid a really long button.
 */
function tribe_change_event_website_link_to_button( $html ) {

	$label   = "Visit Website »";
	$classes = 'button tribe-events-button tribe-common-c-btn tribe-common-c-btn--small';

	if ( false === strpos( $html, 'class="' ) ) {
		$new_html = str_replace( 'href="', 'class="' . $classes . '" href="', $html );
	}
	else {
		$new_html = str_replace( 'class="', 'class="' . $classes . ' ', $html );
	}

	if ( ! empty( $label ) ) {
		$new_html = preg_replace( '/\"\>.{2,}?(\<\/a>)/', '">' . $label . '</a>', $new_html );
	}

	return $new_html;
}

add_filter( 'tribe_get_event_website_link', 'tribe_change_event_website_link_to_button' );

The class name(s) can be customized to your needs, of course. We included some common ones, but you might want to trim that list as you see fit. If you have a button style in your theme already, you can make it that. Or, if you’d prefer to design a special button for this link, then you could make up a new class name instead.

Either way, once you have that class name, go into your theme’s style.css file and make sure that the class name both exists and is styled the way you would like your button to appear. For example:

.my-button-class {
    background-color: red;
    padding: 10px;
    color: #fff;
    float: left;
}

Removing the “Website” heading

If you’ve changed the URL to a button or a link, you might want to remove the “Website” header above.

To remove the heading:

• Make a copy of the details.php file. It is located in /plugins/the-events-calendar/src/views/modules/meta/details.php.
• Make a new folder in your theme directory called tribe-events
• Make a new folder in that one called modules
• Make a new folder in that one called meta
• Drop the copied details.php file in that last folder

Now that the template is in the theme, it can be customized to suit your needs. In this case, remove the following line from the template:

Once that has been saved and everything else is in place, you’ll see your button or link without the header:

Wrapping up

There we have it: two ways to change the Event Website from a URL to something else. We hope you found this helpful and that it makes your calendar just that much more awesome.