Display Upcoming Events using Events+

Hi guys,
I tried to contact you via live chat but it seems you are experiencing overload.

I want to start using the Events+ plugin to manage events but would like to display the events on the homepage. It is a divi site so was wondering if I could display them using a shortcode as I don't have a widget on the homepage?

Thanks

  • Ash
    • WordPress Hacker

    Hello Baldafrican

    To include a featured image you have to customize the template. You can create archive-incsub_event.php and single-incsub_event.php file to overwrite archive and single event view. You can also use css to apply style, that case you have to use custom css.

    Have a nice day!

    Cheers,
    Ash

      • James Morris
        • WordPress Enthusiast

        Hello Baldafrican,

        The template files you would create would be located in your theme directory and would not be affected by any plugin updates. You can learn more about making custom template files here.

        Basically, you will need to go to /wp-content/plugins/events-and-bookings/default-templates/default and copy those template files into /wp-content/themes/{your_current_theme}/ and apply your customizations there. These custom templates will then show as available in WP Admin -> Events -> Settings -> Appearance settings as options.

        I hope this clarifies a bit. Let us know if you have any further questions. We'll be happy to help! :slight_smile:

        Best regards,

        James Morris

          • James Morris
            • WordPress Enthusiast

            Hey Baldafrican,

            All I had to do was copy over the two files as directed into my theme's root folder.

            Screenshot: http://storage5.static.itmages.com/i/17/1220/h_1513765375_6973892_800c213c7e.png

            Make my changes. In this case I'm just adding a simple, red H1 to test.

            Screenshot: http://storage7.static.itmages.com/i/17/1220/h_1513765421_2052155_80918cc732.png

            I added a little custom CSS to center align the content.

            Screenshot:
            http://storage2.static.itmages.com/i/17/1220/h_1513765461_7695429_064a668810.png

            And that's all. Once I saved the file on the server, the layout took just as planned.

            Screenshot:
            http://storage4.static.itmages.com/i/17/1220/h_1513765498_8695176_67689c2caf.png

            Let us know if you have any further questions. We'll be happy to help! :slight_smile:

            Best regards,

            James Morris

          • Baldafrican
            • Made in Africa

            Hey James Morris ,

            Thanks for the reply. I can only assume I am doing something wrong.

            I have copied the file 'shortcode-archive-default.php' to my theme folder and then changed it to show the following

            <?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(); ?>">
                    <div>
                        <span class="eab-event-seperator-month">
                            <span><?php echo get_the_date( 'F' ); ?> </span>
                        </span>
                    <div class="eab-event-featured-image">
                        <?php if ( has_post_thumbnail()) : ?>
                           <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
                           <?php the_post_thumbnail(); ?>
                           </a>
                         <?php endif; ?>
                    </div>
                    <span class="eab-event-event-title>
            		  <h4><?php echo $event->get_title(); ?></h4>
                    </span>
            		<div class="eab-event-body">
            			<?php echo eab_call_template('get_archive_content', $event); ?>
            		</div>
            	</article>
            <?php } ?>

            and yet if you view the page, you will see it does not reflect the changes made.

            Any ideas as to what I am doing wrong?

          • Nahid
            • Tech Support

            Hey Baldafrican !
            Hope you are having a great day!

            As you are trying to change the template of the events archive that is being displayed with the "[eab_archive]" shortcode, you'll need to add the "template" argument to the shortcode to override the default template and use your preferred one placed in your theme directory.

            The "template" argument should contain the name of the template file that you have placed in your theme directory but without the ".php" extension. In your case, as the name of the template file that you have placed in your theme directory is 'shortcode-archive-default.php', the shortcode should look like ''[eab_archive template="shortcode-archive-default" (other arguments here...)]".

            Tip: It is highly recommended to use a child theme for placing custom templates as they might get wiped off in case of theme updates.

            Hope this helps. Let me know if that works for you. Thanks!

            Best,
            Nahid

          • Nahid
            • Tech Support

            Hey Baldafrican !
            Hope you are doing well today!

            I'm glad that worked for you. To display the featured image, try using "get_the_post_thumbnail( $event->get_id() )" function instead of "the_post_thumbnail()". The whole code should look like the following:

            <?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(); ?>">
                    <div>
                        <span class="eab-event-seperator-month">
                            <span><?php echo get_the_date( 'F' ); ?> </span>
                        </span>
                    <div class="eab-event-featured-image">
            			<?php if ( has_post_thumbnail( $event->get_id() ) ) : ?>
            				<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
            					<?php echo get_the_post_thumbnail( $event->get_id() ); ?>
            				</a>
            			<?php endif; ?>
                    </div>
                    <span class="eab-event-event-title">
            		  <h4><?php echo $event->get_title(); ?></h4>
                    </span>
            		<div class="eab-event-body">
            			<?php echo eab_call_template('get_archive_content', $event); ?>
            		</div>
            	</article>
            <?php } ?>

            Hope this helps. Let me know if this works for you. Thanks!

            Best,
            Nahid

          • Oguz
            • QA Engineer

            Hey Baldafrican ,

            Hope you're well.

            If we are talking about button texts the easiest way to edit them looks like language files. You need to edit events-and-bookings/languages files and copy them to wp-content/languages/plugins folder to prevent changes when update.

            Hope it helps!

            Cheers,
            Oguz

          • Oguz
            • QA Engineer

            Hey Baldafrican ,

            Hope you're well.

            Removing that buttons completely is not an easy thing. You can try on classes like events-and-bookings/lib/class_eab_template.php but it can break the plugin because of it's not designed for removable buttons.

            We can do that easily via CSS if it's ok for you. If you can show me the buttons you want to hide via screenshot I can give you proper CSS codes for that.

            Cheers,
            Oguz

          • Baldafrican
            • Made in Africa

            Hi there,

            Thanks for the reply.

            I currently have the events looking like this

            but am hoping to get a look and feel more like this

            So I would like to remove or at least rearrange these elements

            Perhaps 'remove' the buttons displayed by the arrow.
            Set the featured image to display on the left of the details.
            Have the location displayed beneath the date and time.

            Possible? \_('.':wink:_/

  • Dimitris
    • Support Star

    Hello there Baldafrican,

    hope you're doing good today and don't mind me chiming in here! :slight_smile:

    As this kind of setup will require some extended custom work (including using filters used in Events+ functions in template files from /lib/class_eab_template.php file), I've made some changes using strictly CSS (and making a few changes in above template file you're using).
    Here's my results:

    Here's the template file I used (I included CSS in the same file, you can move these in your style.css of your child theme):

    <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(); ?>">
    		<div class="eab-event-featured-image">
    			<?php if ( has_post_thumbnail( $event->get_id() ) ) : ?>
    				<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
    					<?php echo get_the_post_thumbnail( $event->get_id() ); ?>
    				</a>
    			<?php endif; ?>
    		</div>
    		<div class="eab-event-body">
    			<h4><?php echo $event->get_title(); ?></h4>
    			<?php echo eab_call_template('get_archive_content', $event); ?>
    		</div>
    	</article>
    <?php } ?>
    </section>
    <style>
    	.eab-event {
    		height: auto;
    		min-height: 150px;
    		background: lightgray;
    		padding: 25px 15px;
    	}
    	.eab-event-featured-image {
    		width: 33%;
    		float: left;
    	}
    	.eab-event-body {
    		width: 67%;
    		float: left;
    	}
    	.eab-event-featured-image a,
    	.eab-event-featured-image a img {
        -webkit-box-shadow: none;
        box-shadow: none;
    	}
    	.eab-event-body hr,
    	.wpmudevevents-buttons {
    		display: none;
    	}
    	.eab-event-body > .event {
    		display: -webkit-flex;
    		display: flex;
    	}
    	.wpmudevevents-location {
    		order: 1;
    	}
    	.wpmudevevents-date {
    		order: 2;
    	}
    	.wpmudevevents-viewevent {
    		order: 3;
    	}
    	.eab-event-body .wpmudevevents-location,
    	.eab-event-body .wpmudevevents-date {
    		background: none;
    		margin-left: 0;
    		padding-left: 0;
    	}
    </style>

    Hope that's some help! :slight_smile: For more custom work, please advise our jobs board page, Jobs&Pros.

    Warm regards,
    Dimitris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.