Add button to single events in event list view

[pylon]

I’d like to add a ‘Volunteer’ button to single events in event list view that links to a consistent

<a name="#">

reference within the single event itself. The button will link to a default gravity form that I’ve positioned within a custom override to the single-event.php

Happy editing templates/html/css but wondering what action I need to add to the button so it links back to a vertical anchor within the full single event view itself.

Would also like to hide the Featured image in list view.

See grab here

Appreciate your help here.

• This topic was modified 10 years, 5 months ago by pylon.
• This topic was modified 10 years, 5 months ago by Cliff.
• This topic was modified 10 years, 4 months ago by Cliff.
• This topic was modified 10 years, 4 months ago by Cliff.

[Cliff]

Pylon, thanks for the thorough question and screenshot. They always help!

Check out this snippet:

Check out this snippet: https://gist.github.com/cliffordp/ce791df9a7c74d7846e2

Obviously, change the $output to whatever button/link you want.

You could also use one of the other hooks (like tribe_events_single_event_after_the_meta to insert your Gravity Forms shortcode with do_shortcode).

And check out https://theeventscalendar.com/knowledgebase/featured-images/ to see how to hide/modify the single event’s featured image display.

Let me know how these things go for you.

[Marianne]

I’m wondering how to add a button to bottom of photo view. Please keep in mind I am not a coder 🙂 So please if there is a simple solution that would be awesome.

[pylon]

Cliff

I think you misunderstood my enquiry! You can follow my progress so far by visiting this link.

Since my post, i’ve made progress but come across a problem. I’ve added/styled the ‘Volunteer’ button to a child theme copy of list>single-event.php

Button code as follows:

	<div class="volunteerbutton">
		<a class="gdlr-button medium" href="<?php
$url_event = rtrim(tribe_get_event_link(), '/');
echo $url_event;
?>#volunteer-form" title="Volunteer for this event" rel="bookmark">Volunteer</a>
	</div>

That bit of php strips out the default trailing slash from <?php echo esc_url( tribe_get_event_link() ); ?>

In tribe-events>single-event.php I then added an <a name="volunteer-form"></a> anchor just above the form (loaded in by using <?php tribe_events_before_html(); ?>) so the volunteer button should make the loaded page jump down to just above the form.

Now this works fine in Firefox and Chrome but not Safari or IE11. I read here and here about the issue but not sure if I need to update my URLs stewed to achieve this simple little jump! I’ve tried implementing with and without the URL trailing slash and also adding a phantom div with an id. They all work for Chrome/Firefox but not Safari / IE11.

Is there a better way of doing this using tri.be hooks or something? Appreciate your help here.

NB: Hook to add gravity forms is nice tip and thanks for hiding featured image info.

• This reply was modified 10 years, 4 months ago by pylon.

[Cliff]

Marianne,

Thank you for posting! In this forum we try to keep our threads focused on just one user’s problem. This ensures that we are addressing your specific problem instead of a general group one, and not possibly missing anything unique your situation.

To that end, would you mind opening up a new topic here about your issue? If you could please detail in your own words exactly what your problem is (instead of just linking here), that will go a long way toward helping you get this issue resolved as fast as possible. I hope you understand our reasoning here and do not mind this extra step, we have just found it serves our users best.

Pylon,

Sorry I misunderstood.

The Gist code I provided you was for the Event Single view, which is where you added the Volunteer Form. So the tribe_events_single_event_after_the_content code snippet I provided before could be used to include a Gravity Form shortcode (whether or not that’s how you accomplished adding the form you added).

The Volunteer button link you’re creating is going to #volunteer-form

For example: http://www.oneebp.org.uk/event/post-16-business-studies-work-experience-st-georges-rc-school/2015-04-24#volunteer-form

I see that your Event Single view added this:

<div id="volunteer-form"></div>
<a name="volunteer-form"></a>

While probably not best practice to do, it should probably work for all browser scenarios. I tried it on my Mac Chrome and Safari and the link to the form worked.

So good job figuring it out!

One suggestion I’ll make is to only add the link to an event’s volunteer form if the event is not in the past. You’re probably only interested in signing up volunteers for future events. You may want to reference this thread if you choose to implement my suggestion.

Let me know if there’s anything else I can do to help.

[pylon]

OK, well that’s good it works your end. I’ve tried on multiple Macs this end in Safari with no joy.

I love the idea of hiding the volunteer button on past single/recurring events. Inevitably, due to lack of php confidence, how would I combine the example code with my button code, which with the trailing slash is:

	<div class="volunteerbutton">
		<a class="gdlr-button medium" href="<?php
$url_event = rtrim(tribe_get_event_link(), '/');
echo $url_event;
?>#volunteer-form" title="Volunteer for this event" rel="bookmark">Volunteer</a>
	</div>

and with the trailing slash stripped out is:

	<div class="volunteerbutton">
		<a class="gdlr-button medium" href="<?php
$url_event = rtrim(tribe_get_event_link(), '/');
echo $url_event;
?>#volunteer-form" title="Volunteer for this event" rel="bookmark">Volunteer</a>
	</div>

Appreciate a little more help here.

[Cliff]

Regarding your rtrim(), you might want to use these functions instead:

• https://codex.wordpress.org/Function_Reference/trailingslashit

<li data-wpview-marker=”https%3A%2F%2Fcodex.wordpress.org%2FFunction_Reference%2Funtrailingslashit”>https://codex.wordpress.org/Function_Reference/untrailingslashit

In what file are you adding this button code and what’s the full code snippet?

[pylon]

Cliff

Thanks for your continues assistance.

The file is the single-event.php in list for Calendar Pro in Child theme. Full path is:

http://www.oneebp.org.uk/wp-content/themes/flawless-childtheme/tribe-events/list/single-event.php

Full code is as follows. Here I’m still using the rtrim version:

<?php
/**
 * List View Single Event
 * This file contains one event in the list view
 *
 * Override this template in your own theme by creating a file at [your-theme]/tribe-events/list/single-event.php
 *
 * @package TribeEventsCalendar
 *
 */

if ( ! defined( 'ABSPATH' ) ) {
	die( '-1' );
} ?>

<?php

// Setup an array of venue details for use later in the template
$venue_details = array();

if ( $venue_name = tribe_get_meta( 'tribe_event_venue_name' ) ) {
	$venue_details[] = $venue_name;
}

if ( $venue_address = tribe_get_meta( 'tribe_event_venue_address' ) ) {
	$venue_details[] = $venue_address;
}
// Venue microformats
$has_venue_address = ( $venue_address ) ? ' location' : '';

// Organizer
$organizer = tribe_get_organizer();

?>

<!-- Event Cost -->
<?php if ( tribe_get_cost() ) : ?>
	<div class="tribe-events-event-cost">
		<span><?php echo tribe_get_cost( null, true ); ?></span>
	</div>
<?php endif; ?>

<!-- Event Title -->
<?php do_action( 'tribe_events_before_the_event_title' ) ?>
<h2 class="tribe-events-list-event-title entry-title summary">
	<a class="url" href="<?php echo tribe_get_event_link() ?>" title="<?php the_title() ?>" rel="bookmark">
		<?php the_title() ?>
	</a>
</h2>
<?php do_action( 'tribe_events_after_the_event_title' ) ?>

<!-- Event Meta -->
<?php do_action( 'tribe_events_before_the_meta' ) ?>
<div class="tribe-events-event-meta vcard">
	<div class="author <?php echo $has_venue_address; ?>">

		<!-- Schedule & Recurrence Details -->
		<div class="updated published time-details">
			<?php echo tribe_events_event_schedule_details() ?>
		</div>

		<?php if ( $venue_details ) : ?>
			<!-- Venue Display Info -->
			<div class="tribe-events-venue-details">
				<?php echo implode( ', ', $venue_details ); ?>
			</div> <!-- .tribe-events-venue-details -->
		<?php endif; ?>

	</div>
	<!-- Volunteer Button by Dom Conrad 04/12/2015 / Strips out trainiling slash from tribe_get_event_link -->
	<div class="volunteerbutton">
		<a class="gdlr-button medium" href="<?php
$url_event = rtrim(tribe_get_event_link(), '/');
echo $url_event;
?>#volunteer-form" title="Volunteer for this event" rel="bookmark">Volunteer</a>
	</div>
</div><!-- .tribe-events-event-meta -->
<?php do_action( 'tribe_events_after_the_meta' ) ?>

<!-- Event Image -->
<?php echo tribe_event_featured_image( null, 'medium' ) ?>

<!-- Event Content -->
<?php do_action( 'tribe_events_before_the_content' ) ?>
<div class="tribe-events-list-event-description tribe-events-content description entry-summary">
	<!-- <?php the_excerpt() ?> -->
	<a href="<?php echo tribe_get_event_link() ?>" class="tribe-events-read-more" rel="bookmark"><?php _e( 'Find out more', 'tribe-events-calendar' ) ?> &raquo;</a>
</div><!-- .tribe-events-list-event-description -->
<?php do_action( 'tribe_events_after_the_content' ) ?>

This button is pointing at anchor in http://www.oneebp.org.uk/wp-content/themes/flawless-childtheme/tribe-events/single-event.php – see around line 65-68:

<?php
/**
 * Single Event Template
 * A single event. This displays the event title, description, meta, and
 * optionally, the Google map for the event.
 *
 * Override this template in your own theme by creating a file at [your-theme]/tribe-events/single-event.php
 *
 * @package TribeEventsCalendar
 *
 */

if ( ! defined( 'ABSPATH' ) ) {
	die( '-1' );
}

$events_label_singular = tribe_get_event_label_singular();
$events_label_plural = tribe_get_event_label_plural();

$event_id = get_the_ID();

?>

<div id="tribe-events-content" class="tribe-events-single vevent hentry">

	<p class="tribe-events-back">
		<a href="<?php echo esc_url( tribe_get_events_link() ); ?>"> <?php printf( __( '&laquo; All %s', 'the-events-calendar' ), $events_label_plural ); ?></a>
	</p>

	<!-- Notices -->
	<?php tribe_events_the_notices() ?>

	<?php the_title( '<h2 class="tribe-events-single-event-title summary entry-title">', '</h2>' ); ?>

	<div class="tribe-events-schedule updated published tribe-clearfix">
		<?php echo tribe_events_event_schedule_details( $event_id, '<h3>', '</h3>' ); ?>
		<?php if ( tribe_get_cost() ) : ?>
			<span class="tribe-events-divider">|</span>
			<span class="tribe-events-cost"><?php echo tribe_get_cost( null, true ) ?></span>
		<?php endif; ?>
	</div>

	<!-- Event header -->
	<div id="tribe-events-header" <?php tribe_events_the_header_attributes() ?>>
		<!-- Navigation -->
		<h3 class="tribe-events-visuallyhidden"><?php printf( __( '%s Navigation', 'the-events-calendar' ), $events_label_singular ); ?></h3>
		<ul class="tribe-events-sub-nav">
			<li class="tribe-events-nav-previous"><?php tribe_the_prev_event_link( '<span>&laquo;</span> %title%' ) ?></li>
			<li class="tribe-events-nav-next"><?php tribe_the_next_event_link( '%title% <span>&raquo;</span>' ) ?></li>
		</ul>
		<!-- .tribe-events-sub-nav -->
	</div>
	<!-- #tribe-events-header -->

	<?php while ( have_posts() ) :  the_post(); ?>
		<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
			<!-- Event featured image, but exclude link -->
			<?php echo tribe_event_featured_image( $event_id, 'full', false ); ?>

			<!-- Event content -->
			<?php do_action( 'tribe_events_single_event_before_the_content' ) ?>
			<div class="tribe-events-single-event-description tribe-events-content entry-content description">
				<?php the_content(); ?>
			</div>
			<div id="volunteer-form"></div>
			<a name="volunteer-form"></a> <!--Volunteer Button on list view events links to here -->
			<?php tribe_events_before_html(); ?> <!-- Copied from default-template.php (where it is commented out) and added to this template in child theme, so the 'html before content' function only appears in single event view. Snippet set up in snippet plugin to test for single view and echo a gravity form shortcode for volunteering form. by Dozza 30/10/2015 -->
						<!-- .tribe-events-single-event-description -->
			<?php do_action( 'tribe_events_single_event_after_the_content' ) ?>

			<!-- Event meta -->
			<?php do_action( 'tribe_events_single_event_before_the_meta' ) ?>
			<?php tribe_get_template_part( 'modules/meta' ); ?>
			<?php do_action( 'tribe_events_single_event_after_the_meta' ) ?>
		</div> <!-- #post-x -->
		<?php if ( get_post_type() == Tribe__Events__Main::POSTTYPE && tribe_get_option( 'showComments', false ) ) comments_template() ?>
	<?php endwhile; ?>

	<!-- Event footer -->
	<div id="tribe-events-footer">
		<!-- Navigation -->
		<h3 class="tribe-events-visuallyhidden"><?php printf( __( '%s Navigation', 'the-events-calendar' ), $events_label_singular ); ?></h3>
		<ul class="tribe-events-sub-nav">
			<li class="tribe-events-nav-previous"><?php tribe_the_prev_event_link( '<span>&laquo;</span> %title%' ) ?></li>
			<li class="tribe-events-nav-next"><?php tribe_the_next_event_link( '%title% <span>&raquo;</span>' ) ?></li>
		</ul>
		<!-- .tribe-events-sub-nav -->
	</div>
	<!-- #tribe-events-footer -->

</div><!-- #tribe-events-content -->

Thanks for the codex heads-up. I’ll give that a try…

[Cliff]

Hi. Sorry for the delayed reply. Hopefully this bit of above-and-beyond coding help can make up for the delay 🙂

===

In your theme’s functions.php file, you could add this code to add the #volunteer-form and output the Gravity Form:

add_action( 'tribe_events_single_event_after_the_content', 'forum_1020203_volunteer_form' );
function forum_1020203_volunteer_form() {
$output = '<div id="volunteer-form"></div><a name="volunteer-form"></a>' . do_shortcode( '[gravityform id=8 title=true description=true ajax=true]' ) . PHP_EOL;
echo $output;
}

Unless you have other customizations in there, you could then delete the /wp-content/themes/flawless-childtheme/tribe-events/single-event.php file.

===

Add this code to the bottom of a fresh copy of /wp-content/plugins/the-events-calendar/src/views/list/single-event.php — and replace your copy of this file with it: /wp-content/themes/flawless-childtheme/tribe-events/list/single-event.php

$event_id = get_the_ID();

$end_time = strtotime( get_post_meta( $event_id, '_EventEndDate', true ) );

$volunteer_link = esc_url( trailingslashit( tribe_get_event_link() ) . '#volunteer-form' );

if( ! empty( $volunteer_link )
&& time() < $end_time ) { // event end time is not in the past
$button = sprintf( '<div class="volunteerbutton">
<a class="gdlr-button medium" href="%s" title="Volunteer for this event" rel="bookmark">Volunteer</a>
</div>',
$volunteer_link
);

echo $button;
}

 

Please let me know how things go for you!

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts