Mark a "featured event" at the top of the List view?

[Peter]

Hello,
I am adding two new events to our events page. I currently have my Events page set to “List view (by going to Events>Settings>Display, and set the default to View by “List”). However, List view sorts events from “now” to “later.” Since these events occur later, they are put towards the bottom of the list. I want to give these events more prominence by putting them right at the top of the list, so people don’t have to scroll through several other events.

Is there a way *using tags, or what-have-you” to create a “featured event” tag or change the List view order on the events page?

I appreciate your time.

[George]

Hey Peter,

Unfortunately, while both reordering events or adding a “featured” category or something are indeed possible, they would require a good amount of custom coding – we don’t officially offer support for custom code here, but if you’re interested in possibly writing some custom code in your theme and such to help order things, let me know. I can offer some general advice and hopefully share some articles with you that you could then take to write custom code of your own.

If you are not interested in writing custom code, let me know.

I’m sorry about the disappointment on this front!

Cheers,
George

[Peter]

Hi George,

Yes, I would like an opportunity to try my fledgling skills on this. I would need to know such things as:
1) What do I use (Tags, category, etc?) to mark that the event is “featured”
2) Which filters do I use to find the featured event post, and which action gets it sorted to the top of the list view?
3) Which plugin files need to be made custom (by dragging a copy into my “wp-content/themes/my-custom-theme” folder) in case I need to modify them (rather than just the custom theme’s functions.php file).

But that would be exciting, please shoot me whatever documents and tutorials that you can think of to help me achieve this. Thank you.

[George]

Hey Peter,

Cool, glad to know you’re wiling to flex your coding muscles here! It’s important to note that we cannot offer support for code, technically speaking, so I can’t offer line-by-line code instructions here, and we can’t help debug or troubleshoot problems you encounter while trying to write your custom code here.

But we can help with the general principles, and can hopefully give you enough kindling to build a fire of customization-ability on your own 🙂

Okay, so there are three main things to work through here. I’ll break them down as follows.

1. Identifying which events are “Featured”

This ties closely to question #1 that you asked in your reply above. You can use tags OR categories, it’s really up to you – however, categories may make the most sense and are generally a bit simpler to work with.

2. Getting a list of “Featured” events

Question #2 in your reply gets at this idea, although your line of thinking is a bit off track of what I would personally recommend. Instead of using filters and actions or anything like that, i.e. modifying existing queries, your best option is really to just make a separate call of the tribe_get_events() function.

Where, exactly, should you call this function? We’ll get to that in the next part. But for now, just wrap your head around how this function works. Your best way of doing that is to read through this knowledgebase article here → https://theeventscalendar.com/knowledgebase/using-tribe_get_events/

Since tribe_get_events() essentially just wraps WP_Query, you can use category parameters quite easily. This is where using a category is easier than using a tag for labeling “Featured” events: let’s say you use an Event Category named “Featured” to label featured events (no need to get fancy or clever! 🙂 ) You could query for those events with a bit of code like this:

$events = tribe_get_events( array(
'posts_per_page' => 5,
'start_date' => new DateTime(),
'tribe_events_cat' => 'featured'
) );


And bam, there you go – that $events variable will hold up to 5 upcoming events from the “Featured” category.

3. Putting that list of “Featured” events atop The Events Calendar’s List View

As you mention in Question #3 in your last reply, you will need to make a custom Events Calendar template in your theme to place this tribe_get_events() call and the display loop after it to actually show the Events.

Your first course of action on this front should be to read this Knowledgebase article here → https://theeventscalendar.com/knowledgebase/themers-guide/

Using those principles, if you make a version of this file in your theme you should be able to build from there:

/src/views/list/loop.php

I hope this all helps!

Check out the articles I linked to; make back-ups of everything along the way so that you can experiment safely without damaging your site; and take your time working through things. If it seems complex, it genuinely is not – once you get some basic code working things tend to “click” with WordPress code like this and it’s pretty intuitive.

Best of luck with your customizations 🙂

Cheers,
George

[Peter]

Hi guys (George),

Haha! I did it. It works. But, man oh MAN is it a hack. For others seeking a solution, I have posted below the main file that I used, list/loop.php. I have documented in the code what I did. Thank you for helping write the array to pull the featured category posts. That was very helpful.

But I would like to figure out how to push the array into the list/single-event.php template. Because, at this point, I am just copying and pasting the code from single-event.php into list/loop.php. Which seems very redundant, right?

For others (as well as to help you guys out), these were my steps.

1. copied the view files list.php, list/loop.php, list/single-event.php, and list/content.php to my theme folder
2. I started under the line “<div class=”tribe-events-loop vcalendar”>” (currently line 21)
3. added a h2 “Featured Events” and added the right classes for styling purposes.
4. setup the array that contains all events with the category “Featured”
5. created a ul
6. added the foreach loop so that it would post each of these featured events
7. added a li with inline style none (which is very important for separating the events
8. nearly copied and pasted the template of list/single-event.php, including title, metadata, venue, cost, thumbnail, excerpt, and content if there is no thumbnail.
9. closed off the li
10. closed off the for loop.
11. fawlty04’s post on this board suggested using a wp_reset_query in his code. I started using his last bit of code for this project. I don’t know if the wp_reset_query is totally needed, but I haven’t had the guts to delete it yet.
12. I closed off the ul
13. The real magic: to move the title “Upcoming Events” below the “Featured Events” section that we have created, you have to remove three lines of code from list/content.php and paste it below my code in list/loop.php.

and that is it. Not pretty. but it works. I have tried to do the following to jam the array into the list/single-event template this way:

	  $events = tribe_get_events( array(
	  'posts_per_page'   => 5,
	  'start_date'       => new DateTime(),
	  'tribe_events_cat' => 'featured'
	) );

	//The FOR LOOP to go through each item in teh array. , takes your $events variable and runs it as a $post
	foreach($events as $post) {
	setup_postdata($post);
	?>
		<!-- Month / Year Headers -->
		<?php tribe_events_list_the_date_headers(); ?>

		<!-- Event  -->
		<?php
		$post_parent = '';
		if ( $post->post_parent ) {
			$post_parent = ' data-parent-post-id="' . absint( $post->post_parent ) . '"';
		}
		?>
		<div id="post-<?php the_ID() ?>" class="<?php tribe_events_event_classes() ?>" <?php echo $post_parent; ?>>
			<?php tribe_get_template_part( 'list/single', 'event' ) ?>
		</div><!-- .hentry .vevent -->

} //end for loop.
		<?php do_action( 'tribe_events_inside_after_loop' ); ?>

But that OBVIOUSLY doesn’t work. My brain is fried, and my eyes are criss-crossing. So, any additional guidance you can give me for that would be lovely.

Thanks a million!

Here is my list/loop.php file:

`<?php
/**
* List View Loop
* This file sets up the structure for the list loop
*
* Override this template in your own theme by creating a file at [your-theme]/tribe-events/list/loop.php
*
* @package TribeEventsCalendar
*
*/

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

<?php
global $post;
global $more;
$more = false;
?>
<div class=”tribe-events-loop vcalendar”>
<?php
//FEATURED EVENT Section, this is always above the list of events in LIST VIEW. If you add the category “Featured” to an event, it will show up in the following list.
// These are the parts to look out for:
// 1) the h2,
// 2) Setting up the featured events array
// 3) Setting up the foreach loop.
// 4) Pretty much stealing all of the code from the “list/single-event.php” template. Okay, so this is really just a hack.
// 5) Take the “List-title” code from list/content.php (line18) and place it underneath the hack code so that “Upcoming Events” is still listed.–>
?>
<h2 class=”tribe-events-page-title”>Featured events</h2>

<?php
//SETS UP FEATURED EVENTS ARRAY
$events = tribe_get_events( array(
‘posts_per_page’ => 5,
‘start_date’ => new DateTime(),
‘tribe_events_cat’ => ‘featured’
) );

//The FOR LOOP to go through each item in the array. , takes your $events variable and runs it as a $post
foreach($events as $post) {
setup_postdata($post);
?>
<li style=”list-style-type: none”;>
<div id=”post-<?php the_ID() ?>” class=”<?php tribe_events_event_classes() ?>”>
<!– Featured 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; ?>

<!– Featured Event Title –>
<?php do_action( ‘tribe_events_before_the_event_title’ ) ?>
<h2 class=”tribe-events-list-event-title entry-title summary”>
” title=”<?php the_title() ?>” rel=”bookmark”>
<?php the_title() ?>

</h2>

<div class=”tribe-events-event-meta vcard”>
<div class=”author <?php echo esc_attr( $has_venue_address ); ?>”>

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

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

</div>
</div>
<?php if ( has_post_thumbnail() ) { ?>

<?php do_action( ‘tribe_events_after_the_meta’ ) ?>

<!– Featured Event Image –>
<?php echo tribe_event_featured_image( null, ‘medium’ ) ?>

<!– Featured 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() ?>
” class=”tribe-events-read-more” rel=”bookmark”><?php esc_html_e( ‘Find out more’, ‘tribe-events-calendar’ ) ?> »
</div><!– .tribe-events-list-event-description –>

<?php } else { ?>

<div class=”event-content”>
<?php the_content(); ?>
</div>

<?php } ?>
</div>

<?php } //endforeach ?>
<?php wp_reset_query(); ?>

<br>
<br>
<?php
//The title for “Upcoming Events”. The following three lines were removed from list/content.php, line 18.
do_action( ‘tribe_events_before_the_title’ ); ?>
<h2 class=”tribe-events-page-title”><?php echo tribe_get_events_title() ?></h2>
<?php do_action( ‘tribe_events_after_the_title’ ); ?>
<!–We are done. Back to the normal loop.php file.–>

<?php while ( have_posts() ) : the_post(); ?>
<?php do_action( ‘tribe_events_inside_before_loop’ ); ?>

<!– Month / Year Headers –>
<?php tribe_events_list_the_date_headers(); ?>

<!– Event –>
<?php
$post_parent = ”;
if ( $post->post_parent ) {
$post_parent = ‘ data-parent-post-id=”‘ . absint( $post->post_parent ) . ‘”‘;
}
?>
<div id=”post-<?php the_ID() ?>” class=”<?php tribe_events_event_classes() ?>” <?php echo $post_parent; ?>>
<?php tribe_get_template_part( ‘list/single’, ‘event’ ) ?>
</div><!– .hentry .vevent –>

<?php do_action( ‘tribe_events_inside_after_loop’ ); ?>
<?php endwhile; ?>

</div><!– .tribe-events-loop –>’

[George]

Thanks for posting your solution Peter! Very cool of you to do so.

Best of luck with your site! 🙂

[Author]

Posts