Note: If your events are only in one category this will not be as helpful for you but maybe this is the motivation you’ve been looking for to categorize your events!

Screenshot of What We’ll Be Doing

Adding The CSS

You can add the CSS needed to achieve this effect in your theme’s main style.css file or you can also use The Events Calendar events.css file located in /wp-content/plugins/the-events-calendar/resources/events.css. If using events.css, make sure you are overriding the plugins stock events.css file by duplicating it and placing it in an ‘events’ folder within your theme. This will ensure you won’t lose your styles the next time you update.

For demonstration purposes say you have three categories named: Presentations, Conferences and Celebrations. An event under one of these categories will then be given a class with the name of it’s category prefixed with ‘cat_’, for example: ‘cat_presentations’ for the Presentations category.

This class will be used for every event displayed on the calendar that is in that category so you can add a background color to that class in CSS and have that background used for all the events in that category. In CSS all you need to do to target this class and apply styling to it is use:

.cat_presentations {
background: #fed64c;
}

This would apply a yellow background to events in the Presentations category.

Then for example in the next category Conferences, you want to give it a blue background, you would just add below the above CSS:

.cat_conferences {
background: #68a7d3;
}

Now since these classes are also used in the events list view and on single events you’ll want to more specifically target your CSS selectors so the backgrounds are only used in the calendar view. To do that, just add:

.tribe-events-calendar .cat_presentations {
background: #fed64c;
}

‘.tribe-events-calendar’ is another class that is added to the entire calendar and the category classes are children of that class so by prepending with the parent class you are indicating to only style the category events that are within it and not on the list view or single event pages.

There is a lot more you could do with styling your calendar, like changing the background of the strip in the tooltip popup to match your calendar event background. For example:

.cat_presentations > .tribe-events-tooltip .tribe-events-event-title {
background: #fed64c;
}

And you can combine this with the other background CSS like so:

.tribe-events-calendar .cat_presentations,
.cat_presentations > .tribe-events-tooltip .tribe-events-event-title {
background: #fed64c;
}

And since event links might not be looking so hot on that new background, you can style those in same way, specifically for each category like so:

.tribe-events-calendar .cat_presentations a {
color: #333;
}

I’m also only using one property at a time but you can add as many styling properties as you want:

.tribe-events-calendar .cat_presentations a {
color: #333;
font-weight: bold;
text-decoration: underline;
text-transform: uppercase;
}

The skies the limit! Here is a full snippet from the examples I used here and from what you see in the screenshot above:

.tribe-events-calendar a {
font-weight: bold;
}
.tribe-events-calendar .cat_celebrations a,
.tribe-events-calendar .cat_conferences a {
color: #fff;
}
.tribe-events-calendar .cat_presentations a {
color: #333;
}
.tribe-events-calendar .cat_celebrations,
.cat_celebrations > .tribe-events-tooltip .tribe-events-event-title {
background: #6da351;
}
.tribe-events-calendar .cat_presentations,
.cat_presentations > .tribe-events-tooltip .tribe-events-event-title {
background: #fed64c;
}
.tribe-events-calendar .cat_conferences,
.cat_conferences > .tribe-events-tooltip .tribe-events-event-title {
background: #68a7d3;
}

This should give you a pretty good base to work off of and actually even a pretty good CSS primer if you didn’t know much about CSS before. Hopefully it will inspire you to learn more about the powers of CSS and how much you can do to customize the look of your events in The Events Calendar.

If you have questions, hit me up in the comments!

Basically what we need to do is unregister an already registered widget, copy the code for that widget and make our modifications and then register our copy in place of the other widget.

Full functions.php Source: http://pastebin.com/cuYhhXWz 

Full widget-featured-display.php Source: http://pastebin.com/UqvxU0uk

Unregister The Widget

This is slightly different depending on how the widget is registered. In some cases you will want to use this code:

function remove_widgets() {
unregister_widget('TheClassNameOfMyWidget');
}
add_action( 'widgets_init', 'remove_widgets', 11 );

In this particular case to unregister the Next Events widget you’ll want to use:

remove_action( 'widgets_init', 'events_calendar_load_featured_widget',100);

Since that action is added to add the widget, you want to remove the action. If you’re wanting to unregister another widget you’ll just want to look through the widget code to see how it was added and adjust accordingly. Note that when using the unregister function you’ll need to get the classname of the registered widget in the widget code.

Place this code in your functions.php file or as a separate include to keep things organized. If you save functions.php at this point and go back to your Widgets page in WordPress you should notice the Next Events widget is gone. Don’t worry, we’re going to add it back

Copy the Original Widget Code

For the Next Events widget this can be found in plugins/events=calendar-pro/lib/widget-featured.class.php - open the file and copy the entire contents.

Paste Widget Code

Paste the code into your functions.php file or your separate include above or below the above code.

Make it Your Own Widget

At the top of the widget code you’ll see the class declaration for the widget that identifies the widget throughout WordPress. Change the following lines:

if( !class_exists( 'TribeEventsFeatureWidget') ) {
class TribeEventsFeatureWidget extends WP_Widget {
function TribeEventsFeatureWidget() {

to:

if( !class_exists( 'CustomTribeEventsFeatureWidget') ) {
class CustomTribeEventsFeatureWidget extends WP_Widget {
function CustomTribeEventsFeatureWidget() {

You’ll also see this line towards the top of the widget code:

$this->WP_Widget('next_event', __('Next Event Widget'), $widget_ops);

..,which declares the widgets name as it appears in WordPress. Change ‘Next Event Widget’ to ‘Custom Next Event Widget’ or how ever else you want it to appear.

Remove Unnecessary Code

Scroll to the bottom of the widget code and remove the following:

/* Add function to the widgets_ hook. */
// hook is commented out until development is finished, allows WP's default calendar widget to work
add_action( 'widgets_init', 'events_calendar_load_featured_widget',100);
//add_action( 'widgets_init', 'get_calendar_custom' );
//function get_calendar_custom(){echo "hi";}
/* Function that registers widget. */
function events_calendar_load_featured_widget() {
register_widget( 'TribeEventsFeatureWidget' );
// load text domain after class registration
load_plugin_textdomain( 'tribe-events-calendar-pro', false, basename(dirname(dirname(__FILE__))) . '/lang/');
}

This will prevent conflicts with the existing widget code.

Register Your Widget

You’ve unregistered the default widget and copied the code from it. Now you need to register your copy. Simply paste the following code into functions.php or your include:

function activate_of_widgets() {
register_widget( 'CustomTribeEventsFeatureWidget' );
}
add_action( 'widgets_init', 'activate_of_widgets' );

Make Your Modifications

As I stated in the beginning a forum user asked if they can only display the featured thumbnail for the first Next Event post. We’ve got to make a few modifications to our widget code now to achieve this functionality. First, the Next Event widget only pulls in the one next event post so we’ll want to change this to pull in more than one post. Look for this function in your widget code:

if( function_exists( 'tribe_get_events' ) ) {
$posts = tribe_get_events( 'eventDisplay=upcoming&numResults=1&eventCat=' . $category );
$template = TribeEventsTemplates::getTemplateHierarchy('widget-featured-display');
}

And change ‘numResults’ to -1 instead of 1 which will bring in all events (or change it to however many you want to bring in (2, 3, 4, 5, etc.). So the code should now look like:

if( function_exists( 'tribe_get_events' ) ) {
$posts = tribe_get_events( 'eventDisplay=upcoming&numResults=-1&eventCat=' . $category );
$template = TribeEventsTemplates::getTemplateHierarchy('widget-featured-display');
}

The next step is we need to add a counter to determine what event we’re looking at so we can conditionally only show the Featured Thumbnail for the first event in the list. Find the following in your widget code:

if ( $posts ) {
/* Display list of events. */
foreach( $posts as $post ) :
setup_postdata($post);
include $template;
endforeach;
}

And change to:

if ( $posts ) {
/* Display list of events. */
$i = 0;
foreach( $posts as $post ) :
setup_postdata($post);
include $template;
endforeach;
}

…adding a variable with which to count by.

Update the View Template

Next we need to go into our actual widget view template which I covered in this (http://tri.be/how-to-show-featured-thumbnails-in-the-next-events-widget/) tutorial. If you don’t know what I’m talking about then go read that tutorial first to setup that file.

In widget-featured-display.php we need to now look at the counter variable we declared in our widget code and see if we’re on the first record and display the thumbnail code if we are and if not remove the thumbnail code. To do that we just need to use an if statement to check if the counter variable is 0 (on the first record), then display the event details with the featured thumbnail or else just display the event details. So it would look something like this:

<?php if($i == 0) { ?>

<div class="event">
	<?php if(has_post_thumbnail($post->ID, 'thumbnail')):
   	$image_id = get_post_thumbnail_id($post->ID);
   	$image_url = wp_get_attachment_image_src($image_id, 'thumbnail', true); ?>
		<a href="<?php echo get_permalink($post->ID) ?>" class="post-thumb"><img src="<?php echo $image_url[0]; ?>" alt="<?php echo $post->post_title ?>" /></a>
	<?php endif; ?>
	<a href="<?php echo get_permalink($post->ID) ?>"><?php echo $post->post_title ?></a>
</div>
<div class="when">
	<?php
		echo tribe_get_start_date( $post->ID, isset($start) ? $start : null );

		if($event->AllDay && $start)
			echo ' <small>('.__('All Day','tribe-events-calendar-pro').')</small>';
	?>
</div>
<div class="loc">
	<?php
		if ( tribe_get_city() != '' ) {
			echo tribe_get_city() . ', ';
		}
		if (tribe_get_region() != '') {
			echo tribe_get_region() . ', ';
		}
		if (tribe_get_country() != '') {
			echo tribe_get_country();
		}
	?>
</div>
<div class="event_body">
	<?php the_content('... More');?>
</div>
<?php $alt_text = ( empty( $alt_text ) ) ? 'alt' : ''; ?>

 <?php } else { ?>

 <div class="event">
	<a href="<?php echo get_permalink($post->ID) ?>"><?php echo $post->post_title ?></a>
</div>
<div class="when">
	<?php
		echo tribe_get_start_date( $post->ID, isset($start) ? $start : null );

		if($event->AllDay && $start)
			echo ' <small>('.__('All Day','tribe-events-calendar-pro').')</small>';
	?>
</div>
<div class="loc">
	<?php
		if ( tribe_get_city() != '' ) {
			echo tribe_get_city() . ', ';
		}
		if (tribe_get_region() != '') {
			echo tribe_get_region() . ', ';
		}
		if (tribe_get_country() != '') {
			echo tribe_get_country();
		}
	?>
</div>
<div class="event_body">
	<?php the_content('... More');?>
</div>
<?php $alt_text = ( empty( $alt_text ) ) ? 'alt' : ''; ?>

 <?php }
 $i++;
 ?>

Conclusion

That’s about it! You should now only see the thumbnail for the first event displayed in the widget.

Unregistering and registering your own copies of widgets can be super helpful in general because if there’s certain functionality in a plugins widget you want, you don’t have to modify the core and worry about losing your changes when there are updates to that plugin. You simply make a copy of the widget code, unregister the widget you copied from and register your own copy with your changes!

If you have any questions, hit me up in the comments

Full functions.php Source: http://pastebin.com/cuYhhXWz

Full widget-featured-display.php Source: http://pastebin.com/UqvxU0uk