Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Demonstration of how to customise the event list widget. Provides an example template with CSS styling, as used in the Omega theme (http://wp-event-organiser.com/demo/).
/**
* This should be added to your theme's style.css
*/
.eo-events-widget{ font-size: 14px }
.eo-events-widget li{ overflow:hidden;}
.eo-events .eo-date-container{ color:white;float:left;;text-align: center;width: 35px;line-height: 1.3; margin:0px 5px; }
.eo-events .eo-date-month{ margin: 0px;display: block;font-size: 14px;font-variant: small-caps;color: white;letter-spacing: 3.2px;text-align: center;}
.eo-events .eo-date-day{ display: block;margin: 0px;border: none;font-size: 20px; }
.eo-events .eo-date-container{ background: #1e8cbe}
.eo-events .eo-date-day{ background: #78c8e6}
<?php
/**
* Custom template for event list widget for Event Organiser
* Must be named: widget-event-list.php and live in your theme's directory'
*/
global $eo_event_loop,$eo_event_loop_args;
//Date % Time format for events
$date_format = get_option('date_format');
$time_format = get_option('time_format');
//The list ID / classes
$id = $eo_event_loop_args['id'];
$classes = $eo_event_loop_args['class'];
?>
<?php if( $eo_event_loop->have_posts() ): ?>
<ul <?php if( $id ) echo 'id="'.esc_attr($id).'"';?> class="<?php echo esc_attr($classes);?>" >
<?php while( $eo_event_loop->have_posts() ): $eo_event_loop->the_post(); ?>
<?php
//Generate HTML classes for this event
$eo_event_classes = eo_get_event_classes();
//For non-all-day events, include time format
$format = ( eo_is_all_day() ? $date_format : $date_format.' '.$time_format );
?>
<li class="<?php echo esc_attr(implode(' ',$eo_event_classes)); ?>" >
<div class="eo-date-container">
<span class="eo-date-month" style="background-color: <?php echo eo_get_event_color(); ?>;">
<?php eo_the_start( 'M'); ?>
</span>
<span class="eo-date-day" style="background: <?php echo eo_color_luminance( eo_get_event_color(), 0.2 ); ?>;">
<?php eo_the_start( 'j'); ?>
</span>
</div>
<strong>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" ><?php the_title(); ?></a>
</strong>
<?php echo wp_trim_words( get_the_content(), 20 ); ?>
</li>
<?php endwhile; ?>
</ul>
<?php elseif( ! empty($eo_event_loop_args['no_events']) ): ?>
<ul id="<?php echo esc_attr($id);?>" class="<?php echo esc_attr($classes);?>" >
<li class="eo-no-events" > <?php echo $eo_event_loop_args['no_events']; ?> </li>
</ul>
<?php endif; ?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment