Code by Day | Explore By Weekend

How To Change The Divi Events Calendar Website URL Field Into A Button Tutorial by Pee Aye Creative

How To Change The Divi Events Calendar Website URL Field Into A Button

This tutorial for the Divi Events Calendar plugin will show you how to highlight and style colors of specific events in event categories.
Divi Events Calendar Product Featured Image 2.0

Change The Links Into Buttons With PHP

When a customer asked about doing this, I did a quick search and found lots of answers in The Events Calendar knowledgebase. One of the main sources for the code is found here, and of course I modified it and added more to it to make it better. The instructions are found below, but be sure to follow along with the video to make sure you do it right. 

NOTE: Editing PHP code is no joke, and you must do it carefully. Please be sure to watch the video to learn how to use the snippets and see the results in action.

Where To Add The PHP Code Snippets

If you are using our free Divi child theme or any other child theme (required for this type of code), place this snippet into the functions.php file. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

Change Website URL Into Button
// change the event website URL link into a button and replace the URL with text
function tribe_change_event_website_link_to_button( $html ) {
 
  $label   = "Visit Website";
  $classes = 'button tribe-events-button';
 
  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' );

If you want the button link to open in a new tab, you can also add the snippet below in addition to the previous one.

Open Button Link In New Tab
// open the event website URL link in new window
add_filter( 'tribe_get_event_website_link_target', 'blank_target_for_new_window' );
function blank_target_for_new_window() {
	return '_blank';
}

Style The Button With CSS

Now that you have changed the event website URL into a button, you will probably want to style the button to match your website. On the single event page, it uses the default styling from The Events Calendar, but in the module it just looks like a link. But you probably want the buttons to look the same anyhow, and you can style them easily with CSS.

I have provided a snippet below that will get you started. This of course can be customized however you want, such as changing the background color, border radius, hover styles, etc.

Style The Event Website URL Button
/*style the event websute URL button*/

.button.tribe-events-button {
	display: inline-block;
	color: #ffffff;
	background: #0048ff;
	padding: .7em 1.3em;
	margin-top: 4px;
	border: 2px solid #0048ff;
	border-radius: 50px;
	font-weight: bold;
	transition: .5s ease all;
}


/*style the event websute URL button on hover*/

.button.tribe-events-button:hover {
	color: #0048ff;
	background: transparent;
	transition: .5s ease all;
}

Take a look at these before and after photos!

change the Divi Events Calendar website URL into a button before image
change the Divi Events Calendar website URL into a button after

Note that you may need to set your Events Details Link color to default in the module settings. You can do this in the Events Feed setting>Design tab>Details Text>Details Link Color.

adjust the link color when changing the Divi Events Calendar website URL into a button

You may also need to adjust the bottom padding of the events. You can do this from Events Feed setting>Design tab>Events>Event Padding.

adjust the event spacing changing the Divi Events Calendar website URL into a button

Also if you happen to be using the icons or labels, then you would probably want to hide them when the website URL is changed into a button. You can use this snippet to hide either of those things.

Hide The Website URL Icon Or Label
/*hide website URL icon in Events Feed*/

.ecs-weburl.weburl-ecs-icon:before {
	display: none;
}


/*hide website URL label in Events Feed*/

.ecs-weburl .ecs-detail-label {
	display: none;
}

As mentioned in the video, you may want to disable the event title if you are only using the website URL field and not the more info button. This would prevent people from going to the single event page.

Disable Event Title Link
/*disable the event title link in the Events Feed*/

.decm_event_display .entry-title a {
	pointer-events: none;
}
18
Last updated Jan 22, 2021 @ 10:42 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

Subscribe
Notify of
guest
10 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Pete D
Pete D
4 months ago

When I paste in, the link disappears… It is normal?

Marius S
Marius S
4 months ago

Same problem. When I paste in, the link disappears…

Eli
Eli
12 days ago

Hi, could you click on the calendar event and have it redirect to an external url, not the event page?

Eli
Eli

Well, it doesn’t work. with the event calendar extension yes. clicking on the title in the calendar month view if I can redirect to the external url, but if I use divi calendar on a page and click on the calendar it takes me to the single event page not the external url.

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 5,900 others and subscribe to our helpful Divi videos!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart