Good evening guys and gals,

 

I am trying to customise an events widget and it displays a list of events on a page, very much like blog posts.

 

Each entry has a thumbnail picture, title and description and I want to wrap each one in a div to stop everything drifting. Is this possible?

 

So I want it to be like this:-

 

<div id="events-list">
Item one
</div>

<div id="events-list">
Item two
</div>

My current markup is:-

 

<?php if( $eo_event_loop->have_posts() ): ?>

	

		<?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 );
			?>
            <div class="events-list" > 
            
        	<ul>
            	<li class="event-thumbnail" style="float:left;">
                	<?php echo get_the_post_thumbnail( $post_id, array(200, 300, true), $attr ); ?> 
                </li>
                
                <li class="event-title">
                	<h3><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" ><?php the_title(); ?></a></h3><h4><?php echo __('on','eventorganiser') . ' '.eo_get_the_start($format); ?></h4>
                </li>
                
                <li class="event-info">
                	<?php the_excerpt(); ?> 
                </li>
            </ul>
             
			</li>

		<?php endwhile; ?>

	</div>

<?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; ?>

Which outputs the following:-

 

<div class="events-list" > 
            
        	<ul>
            	<li class="event-thumbnail" style="float:left;">
                	<img width="200" height="133" src="" class="attachment-200x300x1 wp-post-image" alt="" /> 
                </li>
                
                <li class="event-title">
                	<h3><a href="" >Event Title</a></h3><h4>on September 21, 2013 6:30 pm</h4>
                </li>
                
                <li class="event-info">
                	<p>Event Description Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices et eros pharetra sagittis. Aenean aliquet ante ante, quis imperdiet mauris luctus in. Vestibulum aliquet augue sed massa posuere condimentum. Sed justo risus, dictum in metus vel, vestibulum euismod dui. Quisque nec hendrerit quam. Etiam et enim vitae velit commodo euismod sed vel […]</p>
 
                </li>
            </ul>
             
			</li>

		
			            <div class="events-list" > 
            
        	<ul>
            	<li class="event-thumbnail" style="float:left;">
                	<img width="200" height="135" src="" class="" alt="" /> 
                </li>
                
                <li class="event-title">
                	<h3><a href="" >Event Title</a></h3><h4>on October 9, 2013 10:00 am</h4>
                </li>
                
                <li class="event-info">
                	<p>Event Description Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices et eros pharetra sagittis. Aenean aliquet ante ante, quis imperdiet mauris luctus in. Vestibulum aliquet augue sed massa posuere condimentum. Sed justo risus, dictum in metus vel, vestibulum euismod dui. Quisque nec hendrerit quam. Etiam et enim vitae velit commodo euismod sed vel […]</p>
 
                </li>
            </ul>
             
			</li>

		
			            <div class="events-list" > 
            
        	<ul>
            	<li class="event-thumbnail" style="float:left;">
                	<img width="194" height="300" src="" alt="n" /> 
                </li>
                
                <li class="event-title">
                	<h3><a href="" >Event Title</a></h3><h4>on November 20, 2013 6:30 pm</h4>
                </li>
                
                <li class="event-info">
                	<p>Event Description Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices et eros pharetra sagittis. Aenean aliquet ante ante, quis imperdiet mauris luctus in. Vestibulum aliquet augue sed massa posuere condimentum. Sed justo risus, dictum in metus vel, vestibulum euismod dui. Quisque nec hendrerit quam. Etiam et enim vitae velit commodo euismod sed vel […]</p>
 
                </li>
            </ul>
             
			</li>

		
	</div>

 

I have removed link URLs. As you can see it is not wrapping how I had planned. Can anyone guide me as to what I am doing incorrectly?

 

Thanks in advance :-)

I'm guessing it has something to do with this :

<li class="event-info">
                	<?php the_excerpt(); ?> 
                </li>
            </ul>
             
			</li>

		<?php endwhile; ?>

It looks like you have a stray closing li in there. If I were you I would check the source code in Firefox and see if there isn't anything in red. Or use a code editor or plugin or something. It can get a bit confusing when you are outputting html with php.

Edited September 25, 201312 yr by mantis

Thank you :-)