Pull events into columns

[Lara]

Hello, I’m trying to pull the latest events into columns on the homepage of a site in addition to still having the standard /events page with all active events.

Here is an image of what I’m trying to achieve:

I already managed to pull events with this block of code that I found on another thread ` <div class=”row”>
<?php
$posts_array = get_posts(‘post_type=tribe_events’);
foreach ( $posts_array as $post ) : setup_postdata( $post ); ?>
<div id=”post-<?php the_ID() ?>” class=”<?php tribe_events_event_classes() ?>”>
<?php tribe_get_template_part( ‘list/single’, ‘event’ ) ?>
</div><!– .hentry .vevent –>
<?php endforeach; ?>
</div>`

Thanks!

[Geoff]

Hey there, Lara!

Do you already have a CSS grid that provides columns for you? If so, go ahead and wrap each event instance in that column class to get the split you’re looking for. Depending on your CSS grid, that might looks something like:

<div class=”row”>
<?php
$posts_array = get_posts(‘post_type=tribe_events’);
foreach ( $posts_array as $post ) : setup_postdata( $post ); ?>
<div id=”post-<?php the_ID() ?>” class=”<?php tribe_events_event_classes() ?> one-third”>
<?php tribe_get_template_part( ‘list/single’, ‘event’ ) ?>
</div><!– .hentry .vevent –>
<?php endforeach; ?>
</div>

The CSS for columns isn’t included in the plugin, so you’ll need to add that to your theme’s style.css file if it isn’t there already. 🙂

Cheers!
Geoff

[Geoff]

Hey Lara! This thread has been quiet for more than a couple of weeks, so I’m going to go ahead and close it. Please feel free to open a new thread if you still have any other questions here at all and we’d be happy to help. 🙂

Cheers!
Geoff

[Lara]

Thanks that works! But how can I get the events to display in upcoming order from left to right? Meaning the left column will display the most recent upcoming event, the middle column the second most recent upcoming event and so on…

Thanks!

[Geoff]

Hi Lara, thanks for following up!

That’s where CSS will come into play. You can target styles in your theme’s styles.css file to position events in tidy rows. What that CSS is will either depend on the styles that already exist in your theme, or it could involve writing your own styles. Either way, we do have a handy article on how to locate CSS selectors using DevTools. I’d suggest checking that out as a starting point.

Cheers!
Geoff

[Lara]

Thanks, I already have the events in rows. What I’m asking is how do I get the most upcoming event to appear first (from left to right). Right now they are arranged according to when the events were created rather than when the event will take place.

[Geoff]

Ah, gotcha!

In that case, I think you will want to tribe_get_events() to query events instead because it includes an argument specifically to set the order by upcoming events. Here’s a tutorial that will help walk through that, which I hope you’ll find a lot easier than the current query being used. 🙂

Cheers!
Geoff

[Lara]

I’m getting close, it’s displaying 2 out of the 3 events in the correct order but it is showing me this error above the events: Warning: Illegal string offset ‘eventDisplay’ in /nas/wp/www/staging/packedperfectly/wp-content/plugins/the-events-calendar/src/functions/template-tags/general.php on line 232

• This reply was modified 10 years, 9 months ago by Lara.

[Geoff]

What’s the code you’re working with for the query? I’d be happy to take a look at see if I spot where the error is.

Thanks!
Geoff

[Lara]

Thanks! Here it is:

                <div class="row">
                    <?php
                    $posts_array = tribe_get_events('post_type=tribe_events');
                    foreach ( $posts_array as $post ) : setup_postdata( $post ); ?>
                    <div id="post-<?php the_ID() ?>" class="<?php tribe_events_event_classes() ?> grid_3">
                        <?php tribe_get_template_part( 'list/single', 'event' ) ?>
                    </div>
                <?php endforeach; ?>
            </div>

• This reply was modified 10 years, 9 months ago by Lara.

[Geoff]

Hi Lara,

That helps a lot, thanks!

This will get you much closer to what you’re looking for:

[php]
<?php
$events = tribe_get_events( array(
‘eventDisplay’ => ‘upcoming’,
‘posts_per_page’ => 3,
) );

foreach ( $events as $post ) {
setup_postdata( $post ); ?>
<div id="post-<?php the_ID() ?>" class="<?php tribe_events_event_classes() ?> grid_3">
<?php tribe_get_template_part( ‘list/single’, ‘event’ ) ?>
<?php echo "</div>";
} ?>
[/php]

I hope this does the trick! 🙂

Cheers,
Geoff

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts