Custom Layouts for WordPress Content

If you'd like to create a custom layout that displays different types of WordPress content, you can do that here.

You can add content from your WordPress site to your custom HTML page in the form of lists and sliders. For example, add a login link at the top of the page, a "featured" post below that, a carousel (or slider) of more posts, and a list of categories below that.

The combinations are endless!

First, create a new custom page by visiting your app customizer => Custom Pages => Add New.

Next, visit this article to grab some custom layout starter code. Below you can see documentation for the custom components that are in the starter templates.

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)
media: boolean = set to true if this is a list of media like podcasts (post meta must have a media url)
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.
showTabs: boolean = if you have tabs, and you want to show the tabs after clicking to an article, set showTabs="true"

<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>

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>