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