Positioning Slider or Hero Image on The Events Calendar Photo View Page

The Problem

The task was to place a slider above the photo view of the events calendar. I thought it would be a “piece of cake” to simply the genesis_below_header() hook to accomplish the task. But because the events plugin view is a custom post type that does not have a page ID making it difficult to us the is_page() conditional tag. There were no helps anywhere even at the plugin website. A few people have had a similar problem but website refers them to a link for making custom template.

 

Tools: The Events Calendar Plugin Pro; Genesis Framework; and Genesis Sample Theme.

 

While these steps can be used with any WordPress themes, in this tutorial, I am using the Genesis Sample child theme because Genesis themes are the easiest to customize with minimal knowledge of PHP.

The Solution

STEP 1: Follow the instructions from their Themer’s Guide to create your Default Events Template for various event views.

 

STEP 2: Watch the video here in addition to STEP 1 to give you the clue to STEP 3.

 

STEP 3: Create your custom-events-page.php to set the page. If you’re using the genesis theme, you can get a few tips here on making custom template.

 

STEP 4: Hook the slider with add_action(). This is much easier using the Soliloquy plugin because it gives you the function code to hook. You can use any slider as long as you have the code (functions or shortcodes) available. Once you create a post with Soliloquy, on the right sidebar you have available a set of shortcodes and functions like this one the right.

 

STEP 5: Create a hook function for any location where you want the slider or banner to appear. Genesis themes come with several hook locations for any object you want to show. In the case, the task is to show the banner right on top of the event photo view. So the best location is below the header and thankfully, genesis has a hook location called genesis_below_header(). Hence, my function code looks like this:

---

---

STEP 6 Open the custom event template created in STEP 2, add the code in STEP 4 at the bottom of the page just before the //* Run the Genesis loop comment. If you place the code outside of genesis() it will not work. For a non-genesis theme, the code could be placed inside functions.php with additional conditional statement.

 

STEP 7: Style the page with the appropriate custom CSS

 

STEP 8: Nothing else. Enjoy the slider view!

 

The Events Calendar plugin pro gives you more flexibilties to customize your event views and pages. I was able to resolve the problem with the above-listed steps but may likely not work for you.