Make the Event Website URL a linked word or button

One of the handy ways to customize an event is to add a link to a website where people can get more information about it. This is one of the many optional fields provided in the event post editor.

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

kb-eventwebsite-link

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? We'll walk through how to do both in this article.

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:

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

kb-eventwebsite-linkedword

If you'd like the website link to open in a new window, you can use a slightly modified version of the above snippet.

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:

This is very similar to the last snippet, but does a couple of different things:

  • Adds a variable called $class
  • Adds that variable to the returned link

The $class can be any CSS classname you want. 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 classname instead.

Either way, once you have that classname, go into your theme's style.css file and make sure that the classname 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;
}

KB - button url

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 (at time of this writing, it's in line 148):

<dt> <?php esc_html_e( 'Website:', 'the-events-calendar' ) ?> </dt>

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

kb-eventwebsite-button

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.