Best way to Display upcoming events like this

[christina]

Hi all,
I’m wondering the best way to achieve a look like this: http://church-event.vamtam.com/home-standart (right above the “Our Gallery” section, not the counter)
Is this a customization of the Events Calendar list Widget ? Can anyone point me in the right direction?

Thanks

[matthewdenton]

Hi!

Thanks for taking the time to reach out to us with your query. The event listing you speak to in that site most likely is done from a customization to there theme. We provide a template function tribe_get_events that can be used to query for events that can than be displayed as desired. It looks to me like they are limiting the results to the next 4 upcoming events and then are displaying them per their own html/css.

I hope this information gets you started. You may also want to reference our docs and Themer’s Guide for more information.

Thanks again,

– Matthew

[christina]

Thanks for taking the time to get back to me! I’m having trouble setting the events to appear horizontal oppose to vertically

[matthewdenton]

Hi!

I’m glad I was able to answer your question. We don’t support customization requests in the forums. However if you are looking to have your events layout horizontally you may want to look at floating the events. Also you could look at the css for the sample site you sent us they do a horizontal display and could give you a starting point to work from.

Thanks,

– Matthew

[christina]

Do you think it would be best to customize a widget or use a template function

[matthewdenton]

Hi,

The effort to customize this functionality into a Widget might not be worth the time. I’d recommend using template tags to build out your desired view. You can still build out the theme changes as a child theme or included file so that you can re-use the code on other sites or pages within your site.

– Matthew

[christina]

okay thanks. I think I am good with everything but I’m not 100% clear where in my theme I should be adding the template tag to call out my customizations.

[christina]

This is the code that im trying to post
<script src=”http://pastebin.com/embed_js.php?i=edXjvjRt”></script&gt;

[christina]

<div class=”row wpv-tribe-multiple-events style-<?php echo $style ?>”>
<?php foreach($events as $i => $event): ?>
<div class=”wpv-grid grid-1-4 <?php if($i % 4 !== 0) echo ‘left-border’ ?>”>
<div class=”event-wrapper”>
<?php
$start = strtotime($event->EventStartDate);
$end = strtotime($event->EventEndDate);
$day = date(‘d’, $start);
$month = date_i18n(‘F’, $start);

$stime = date(get_option(‘time_format’), $start);
$etime = date(get_option(‘time_format’), $end);
?>
” title=”<?php esc_attr_e(‘Read More’, ‘church-event’) ?>”>
<div class=”date”>
<div class=”day”><?php echo $day ?></div>
<div class=”month”><?php echo $month ?></div>
</div>
<h3 class=”title”><?php echo $event->post_title ?></h3>

<div class=”when-where”>
<div><?php echo $stime ?> — <?php echo $etime ?></div>
<div>@ <?php tribe_get_venue_link($event->ID, true) ?></div>
</div>
” title=”<?php esc_attr_e(‘Read More’, ‘church-event’) ?>” class=”button button-border accent1 hover-accent1″><span class=”btext”><?php _e(‘Read More’, ‘church-event’) ?></span>
</div>
</div>
<?php if($i % 4 == 3 && $i < count($events) – 1): ?>
</div>
<div class=”row wpv-tribe-multiple-events”>
<?php endif ?>
<?php endforeach; ?>
</div>

[matthewdenton]

Hi, Thanks for sharing your code where do you have this currently. Where it should go in your theme depends on where you want it in your site. I would suggest that you start by creating a custom page template file in your theme. You can create a new page in draft mode that uses that page template and you can test your changes until you have it working as desired.

I hope the above helps. We can’t support making customizations but if you have further questions on the template tags please let us know and make sure to look at the Themer’s Guide listed above it has lots of tips and helpful information.

– Matthew

[matthewdenton]

Hi, I wanted to quickly follow-up with you to see if you are all set or if you have further questions. Please let me know if you do have additional questions I can assist with or if I should go ahead and close this thread.

Thank you,

– Matthew

[Author]

Posts