Creating the Difference

Get Correct Event Navigation in Events Manager

Posted on: 11-11-2018
Categories: PHP, Snippets Tags:
Get Correct Event Navigation in Events Manager

If you are using the marvelous Events Manager plugin, you can choose to display your single event pages either as posts or pages. Depending on your theme, posts will usually display navigation links at the bottom of the post, while pages don’t. (Read more about the differences between these two.)

Why WordPress navigation links don’t work on Events.

The way WordPress creates the navigation links (previous post / next post) is solely based on its Post ID. Post IDs are automatically assigned to your new post/page/event/etc. by incrementing their value by one. (Read more about this in this article: WordPress Codex – Next and Previous Links.)

But, if you’re anything like me, you will probably not create all your events in a nice and structured and perfectly chronological order. 🙂 For me, it’s not uncommon that today’s event has ID 10, while tomorrow’s event got assigned Post ID 312 and the one a week from now has ID 178. See the problem here? Normally WordPress would arrange those to Post ID -> displaying: Today – Next Week – Tomorrow.

But…
We want to have our visitors loop through our events based on start date, right?
Well, here’s how to do that.

Step 1: Create a shortcode for Event Navigation.

A shortcode is nothing more than a command between two brackets [ ], which calls a specific piece of code.

Add this to your functions.php:Click here to learn how to safely add your code to WordPress.

Step 2: Add the shortcode to your mark-up.

In your WordPress Admin Dashboard, go to Events → Settings → Formatting → Events → Single Event Page → Single event page format. At the very bottom of that textarea, type this: [event-navigation]

Step 3: Add CSS styling (optional).

Your theme will probably have these classes defined in its css stylesheet already, but if not here is something to get you started:

All done!

Let me know what you think… 🙂