WordPress API Components for Custom HTML Pages

You can add content from your WordPress site to your custom HTML page in the form of lists and sliders.

API Lists

To add a list to your custom HTML page, use the ap-list component. 

<ap-list route="https://mysite.com/wp-json/wp/v2/posts?per_page=9"></ap-list>

Inputs:

route: string = the full url to a WP-API post endpoint. URL parameters allowed. (required)
card: boolean = display list as cards
infiniteScroll: boolean = load more posts when user scrolls down.  Only use when it's the last element on the page.

<ap-list card="true" infiniteScroll="true" route="https://mysite.com/wp-json/wp/v2/posts?per_page=9"></ap-list>

API Slider

To add a slider with API data to your page, use the ap-slider component.

<ap-slider route="https://mysite.com/wp-json/wp/v2/posts"></ap-slider>

Inputs:

route: string = the full url to a WP-API post endpoint. URL parameters allowed. (required)
pager: boolean = set to false to hide the pager bullets
slidesPerView: number = how many slides to show at a time
loop: boolean = set to true to loop slides
effect: string = The animation effect of the slides. Possible values are: slide, fade, cube, coverflow or flip. Default: slide.
paginationType: string = Type of pagination. Possible values are: bullets, fraction, progress. Default: bullets.
preventClicks: boolean = don't allow clicking of slide to enter detail view
freeMode: boolean = slides freely according to momentum
card: boolean = (false) set to true to show a border around each slide (image below)
wp: boolean = (false) set to true for LearnDash courses only

<ap-slider slidesPerView="2" freeMode="false" effect="slide" paginationType="progress" route="https://mysite.com/wp-json/wp/v2/posts"></ap-slider>