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
While the tutorial has been written for Genesis Sample, it should work with a few adjustments in any Genesis theme
Step 1If you haven't already, a) create a category called
Featuredand 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 Eventunder 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 2a) Upload lightslider.min.css to child theme's
cssdirectory (create, if not existing). b) Upload lightslider.min.js to child theme's
jsdirectory. Create a file named say,
lightslider-init.jsin the same location having the following:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.