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>


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>

Category List

Display a list of categories. When a category is clicked, it goes to a post list page of only that category.

<ap-list infiniteScroll="true" categories="true" route="https://mysite.com/wp-json/wp/v2/categories"></ap-list>

Note: the route must be the default category endpoint - "...wp-json/wp/v2/categories"

You can customize the display of this list using custom CSS, with the selector .category-list. For example, in your custom CSS you could add:

.category-list .card { background: black; }
.category-list .card h2 { color: #fff; }

If you would like the resulting category post list to be a card display, add card="true":

<ap-list infiniteScroll="true" categories="true" card="true" route="https://mysite.com/wp-json/wp/v2/categories"></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>


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>