Custom styling events archive shortcode

Hey guys,

I'm trying to style the output of the archive shortcode but I need some more info in order to do so. I hope you guys can help.

I'm calling the shortcode like so:
[eab_archive lookahead="yes" weeks="10" order="ASC" override_styles="yes" template="http://jongerenservicepunt.nl/customeab.php"]

No currently, I have the source of the shortcode-archive-default.php in that file, being:

<section class="eab-events-archive <?php esc_attr_e($args['class']); ?>">
<?php foreach ($events as $event) { ?>
<?php $event = $event instanceof Eab_EventModel ? $event : new Eab_EventModel($event); ?>
<article class="eab-event <?php echo eab_call_template('get_status_class', $event); ?>" id="eab-event-<?php echo $event->get_id(); ?>">
<h4><?php echo $event->get_title(); ?></h4>
<div class="eab-event-body">
<?php echo eab_call_template('get_archive_content', $event); ?>
</div>
</article>
<?php } ?>
</section>

However, I want to style this differently. What I'm missing though, is a list of things that I can call in this template.
<?php echo eab_call_template('get_archive_content', $event); ?>
calls all the
"View event
Takes place on 22 juli 2015 from 20:00 to 23:00
Gerard Callenburgstraat 38
59 seats left"
etc. but I want the codes to call out the excerpt of the event, and more importantly, the url of the featured image..!

I have attached a screenshot of the kind of output I'm trying to create...

Kind regards,
Niels

  • Adam Czajczyk

    Hey Niels,

    I hope you're well today and thank you for your question!

    All the Events are custom type posts, which means they are actually posts and can be handled using core WP functions/template tags.

    Once you're already know the post ("event") ID as you're operating inside the loop, you should be able to simply use

    the_excerpt()

    for displaying an event's excerpt and

    the_post_thumbnail()

    for displaying the event's featured image.

    Having this shown on the page, you should then be able to easily style it with CSS because you can either put this template tags in side your own html block (like <div>:wink: and/or inspect the page with Chrome's or Firefox'es "Inspect element" tool.

    I hope that helps!

    Cheers,
    Adam

  • Niels

    Hi Adam,

    Thanks for your reply. This sort of got me going, as well as searching for some similar posts on the forum.

    So right now I'm still using the short code, and refer it to my own template file. As of now, this is as follows:

    <section class="eab-events-archive <?php esc_attr_e($args['class']); ?>">
    <?php foreach ($events as $event) { ?>
    	<?php $event = $event instanceof Eab_EventModel ? $event : new Eab_EventModel($event); ?>
    	<article class="eab-event <?php echo eab_call_template('get_status_class', $event); ?>" id="eab-event-<?php echo $event->get_id(); ?>">
    		<h4><a href="<?php echo get_permalink($event->get_id()); ?>"><?php echo $event->get_title(); ?></a></h4>
    		<span class="small"> <?php echo get_event_dates($post); ?>
    </span>
    	<div class="eab-event-body">
    	<?php if ($event->has_featured_image()) { ?>
    		<?php echo $event->get_featured_image('small'); ?>
    	<?php } ?>
    	<p><?php echo $event->get_excerpt_or_fallback(520, '&hellip;'); ?></p>
    </div>
    	</article>
    <?php } ?>
    </section>

    I'm using the class_eab_template file to check out the classes and see what I can use. I've got the thumbnail, title and excerpt. I'm just trying to get the date and the category printed. Can you help me with that? In the class I can find the function
    public static function get_event_dates ($post)

    But I'm not sure how to call it in my template. I've tried variations of
    <?php echo get_event_details('get_event_dates', $event); ?>
    or
    <?php echo get_start_dates($event->get_id()); ?>

    But obviously I'm not a good enough coder to find the right code to get this to work :smiley:

  • Adam Czajczyk

    Hey Niels,

    I hope you're well today and thanks for this additional description.

    It seems that you've managed to create a solid foundation, which is great!

    As for date. I think this might help:

    echo eab_call_template('get_event_dates', $this->_event));

    As for widgets. I suppose this is strictly related to the events page template code. I'm not sure how do you call sidebar there but you'll want to either use a standard get_sidebar function like this:

    get_sidebar();

    or provide it with a sidebar ID and this ID should equal the ID of the sidebar on blog posts pages.

    https://codex.wordpress.org/Function_Reference/get_sidebar

    If I'm missing anything here, please let me know and I'll be happy to provide you with further assistance!

    Cheers,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.