In Genesis Facebook group, a user asked:
Genesis Responsive Slider:
I currently have a "featured" category that populates the slider. We use Modern Tribe Events on the website. I would like to create an event category called "Featured Events" and have those also included in the slider. Any insight on how to marry both of these into the slider? I can see where I can select one or the other but not sure how to select more than one.
I entered the list of taxonomy IDs to exclude from the slider (basically all IDs except the 2 categories I want to use) but that did not do it.
Do I need to use a different slider? Or is there another way to accomplish this?
In this tutorial, we shall
- register a custom image size for images in "Home Featured" section.
- in a function hooked to `genesis_after_header`, loop through the results set of two combined queries and show image (featured image if present, otherwise a placeholder) and linked title. The first query fetches 2 posts categorized under "Featured" category and the second query fetches 2 entries of `tribe_events` post type that have been set as featured.
- add CSS to overlay the title at the bottom of the image on larger screen and below the image on smaller screen widths
- load lightSlider on the homepage and initialize it on the posts' container
to display a custom posts slider that pulls entries of standard posts belonging to a specific category and events which have been marked as Featured below the header on the front page in Genesis.
While the tutorial has been written for Genesis Sample, it should work with a few adjustments in any Genesis theme
Step 1
If you haven't already,
a) create a category called Featured and assign it to your posts that you want to feature (appear in the slider).
Set featured images (1600 x 500 ones used in this example) for the posts.
b) install and activate The Events Calendar.
Add/edit events and tick Feature Event under the Event Options meta box for the events you want to feature (appear in the slider).
Set featured images (1600 x 500 ones used in this example) for the events.
Step 2
a) Upload lightslider.min.css to child theme's css directory (create, if not existing).
b) Upload lightslider.min.js to child theme's js directory.
Create a file named say, lightslider-init.js in the same location having the following:
