Using shortcodes on the pages

[Marianna]

I’m interested how to add image and description into the shortcode? I need to make informative page with the list of the events, sorted by tags, so my shortcode is [tribe_events_list tags=”xxx”]

The goal is to make shortcode show information like here: http://smolnikov.club/events/
But now it shows only dates and titles http://smolnikov.club/spearfishing/

What files can I change to make shortcodes show me pictures and other event info?

Thank you in advance 🙂

[Barry]

Hi Marianna,

Great question!

The [tribe_events_list] shortcode is really just another way of using the advanced events list widget – so customizing it is exactly the same as customizing the widget itself.

Please read through our Themer’s Guide in the first place, particularly with regards to the information on making template overrides, but the basic idea would be to copy:

events-calendar-pro/src/views/pro/widgets/modules/single-event.php

Placing your copy within your theme:

themes/YOUR_THEME/tribe-events/pro/widgets/modules/single-event.php

From there you can safely modify it and customize away – I hope that helps!

[Marianna]

Dear Barry,

Thanks a lot for this helpful information!

I’ve almost managed the shortcode view http://smolnikov.club/spearfishing/
But I’ve got one more question. How to manage the appearance like here http://smolnikov.club/events/ so that the image will be on the left, and title and description on the right?

My code in the new single-event.php file:

<div class=”tribe-mini-calendar-event event-<?php esc_attr_e( $mini_cal_event_atts[‘current_post’] ); ?> <?php esc_attr_e( $mini_cal_event_atts[‘class’] ); ?>”>

<div class=”list-info”>
<?php do_action( ‘tribe_events_list_widget_before_the_event_title’ ); ?>

<h2 class=”entry-title summary”>
” rel=”bookmark”><?php the_title(); ?></h2>

<?php do_action( ‘tribe_events_list_widget_after_the_event_title’ ); ?>
<?php do_action( ‘tribe_events_list_widget_before_the_meta’ ) ?>

<div class=”duration”>
<?php echo tribe_events_event_schedule_details(); ?></div>

<div class=”tribe-events-event-image”>
<?php echo tribe_event_featured_image( null, ‘medium’ ) ?>
</div>

<!– Event Content –>
<?php do_action( ‘tribe_events_before_the_content’ ) ?>
<div class=”tribe-events-list-event-description tribe-events-content description entry-summary”>
<?php the_excerpt() ?>
</div><!– .tribe-events-list-event-description –>
<?php do_action( ‘tribe_events_after_the_content’ ) ?>

***
Besides I added the following CSS code – so that the footer widget doesn’t show images, maybe it will help somebody:

.tribe-events-adv-list-widget .tribe-events-event-image {
display: none;
}

[Barry]

Hi Marianna,

I’d recommend using CSS and applying floats in the relevant directions to some of those elements – this is really custom development/design territory, though, so I’m afraid we can’t write this for you – but there are certainly lots of great resources on writing CSS online (and it looks like you’ve got a good handle on applying CSS within WordPress).

As we can’t really go much further I’m going to go ahead and close this topic – but I hope the customization work goes well 🙂

[Author]

Posts