WordPress Post List

The best way to display WordPress posts in your app is with a post list. These grab content from your site via the WP-API, and they can be cached for offline.

Note: API based content does not support custom plugins 

For example, display a list of posts or pages from your WordPress site. You can also display custom post type content, such as books, products, or speakers.  This content is stored for offline use after viewing, and is typically faster than an iframe page.

Limitations of List Pages

API lists display read-only post content, they do not work with custom plugins or special content.

For example, an embedded form, slider, or custom gallery plugin will not work through the API. If you have anything other than read-only content such as a blog post, you should use an iframe page instead.

Create a Post List

To display your WordPress posts, in the App Customizer go to Custom Pages => Add New.

Choose the Page Builder, then choose the WordPress Post List block. Add your title and list route. (see below for help on list routes)

Options

Display: display posts as a square with a large image (Card), or with a small image to the left of the post title (default).

Infinite Scroll: fetch more posts when the list is scrolled.

Show Tabs: If using a tab menu and a side menu, and you want tabs to show at all times, check this box.

Show Search: Show a search icon in the header that can be clicked to search the posts.

Refresh: Adds an icon and the text "Refresh" above the list that users can click to fetch more posts. The post list can be pulled to refresh by default, so the extra Refresh button is not recommended.

2 Columns: split the list into 2 columns (card display).

Customize Posts Displayed: If you want to use a custom post type, or add arguments such as categories or number of posts displayed, check this box. Then enter the full url to the WP-API endpoint you want to use, along with any arguments. For example: https://apppresser.com/wp-json/wp/v2/posts?per_page=5&categories=12

Default Featured Image

The small image next to your posts will be pulled from your WordPress featured image. To change this image, upload a file called default.png to your offline assets under the settings tab of the app customizer. Recommended size is 150x150px.

List Routes

A list route is any API endpoint with collection data, such as posts or pages. Here are a list of example endpoints:

Some endpoints (such as users) require authentication.

Custom post types and post meta data do not show up in the API by default.  View this article for help.

To add custom content to the list item display, you can use  template hooks.

Custom Route Parameters

The WP-API allows you to add parameters to your query to show custom results. For example, to show a certain category, you would add this url as your route:

https://yoursite.com/wp-json/wp/v2/posts?categories=40

The '40' at the end is the category term ID. You can do the same for tags by changing the parameter to ?tags=XX.  How to find the category or tag ID.

There are other parameters available, such as author, orderby, exclude, and more. For a full list, please see the  "Arguments" section here.  You can string parameters like this:

https://yoursite.com/wp-json/wp/v2/posts?categories=40&author=1&exclude=214

You would put that full url as the list route in your custom page.

For more information, please view  this blog post, and the WP-API documentation.

<!-- link -->
<a href="http://example.com/" data-apppage="playlist">pushPage playlist</a>

<!-- button -->
<button type="button" data-apppage="playlist">Press playlist</button>

<!-- image -->
<a href="http://example.com/test/attachment/1022221534173742554/" rel="attachment wp-att-1120" data-apppage="playlist"><img src="http://example.com/wp-content/uploads/2018/08/1022221534173742554-150x150.jpg" alt="" width="150" height="150" /></a>

See: https://gist.github.com/stillatmylinux/01ad284dbcbeeac71f39c297ccce7fd0#file-pushpage-playlist-html