MEET SITKA | A super-customizable modern WP theme!

Okay
  Print

Turn Oleander's featured area slider into an image gallery slider



Oleander's featured area slider allows you to highlight posts and/or pages of your choosing in a full-width spread. If you would prefer to use the slider as an image gallery instead of a featured post/page element, it's very possible to do! 




1 ) CREATE PAGES FOR YOUR IMAGES

Because the slider only recognizes posts or pages, we'll create a series of "dummy" pages. For each image you'd like to feature in the slider, you can create 1 dummy page. 

Give the pages any title you'd like. 
Assign one of your desired images as each of the page's "Featured Image". 
To learn how to assign one, check out: How do I add a Featured Image?

When finished, publish each page. 


2 ) DETERMINE YOUR PAGES' ID NUMBERS

Next, we'll need to determine the unique ID numbers of each dummy page you just created. Every time you publish a post or page, WordPress assigns it a number. We will use our newly-created dummy pages' ID numbers to target them for the slider. 

To learn how to determine a page's ID number, please check out: How to determine a post, page, or category ID

Note down each of your page's ID numbers. 


3 ) ADD YOUR IMAGES TO THE SLIDER

Navigate to WP Dashboard > Appearance > Customize > Featured Area Settings

Where it says "Select featured post/page IDs", enter your pages' ID numbers into the field. 
Please be sure to separate each page ID with a comma. 

Your dummy pages should now be displaying in your slider. 


4 ) HIDE THE SLIDER'S TEXT & HYPERLINK OVERLAY

To then hide the text overlay and the hyperlink function that covers the slider's image (so visitors can't click through to your dummy page), you can navigate to WP Dashboard > Appearance > Customize > Custom CSS, and copy & paste in the following code:

.feat-overlay {display: none;}


If you would also like to hide the left and right arrow icons that appear when you hover over your slider, you can copy & paste the following into your Custom CSS box as well:

.featured-area .bx-controls-direction {display: none;}


5 ) MAKE YOUR SLIDER AUTO-ROTATE

Lastly, to make your slider auto-rotate through the different images, we can add a timer function to it. 

You can reference the following article for the necessary steps: Add a timer to Oleander's slider