Custom HTML Pages

Custom pages allow you to create custom layouts with HTML that can work offline. Here are some things to know:

  • Custom pages can work offline
  • They can be completely independent of your website
  • You can create custom layouts for your WP-API sliders and lists
  • You can add HTML and some Ionic tags
  • You must rebuild your app after making changes to a custom page

For example, make a custom "About Us" page with text and images that works offline. Add custom Ionic tags, such as an  intro slider. Add a Google Map embed code to display a map, create a custom API list layout, and more.

Example

Here is a custom layout example:

You can find the code for that page  here.

Video

Creating Custom HTML Pages

To create a custom page, go to the App Customizer, and click Custom Pages. Below the list of pages, click "Add new page."

Choose "Custom HTML."

A form will appear where you can enter your page details.

All custom pages only show for the app where you created them, so you won't see the page you just created if you go to another app.

Custom HTML

To create a page with simple text and images that works offline, you can add custom HTML content.

For example, try adding a page title, then add this to the page content area:

<h2>About Us</h2>
<h4>Fred Gaviria</h4>
<p>President</p>
<h4>Alice Floor</h4>
<p>Vice President</p>
<h4>Frank Tank</h4>
<p>Chief Operating Officer</p>

Next, click create page. If your page was created successfully, you will see it at the top of your custom pages list in the sidebar.

This page will not show up in your app preview yet.

Important: To get this page in your app, you need to add it to your menu and build the app. 

Go to Menus and add this page to your active menu. To do that, click Menus => Your Menu => Add Item => AppPages => Your Page. Next, go to "Build and Preview" and click Build app.

When the build is complete, you should be able to see the page you created in your app preview by clicking on the menu item you added.

Advanced HTML and Ionic Components

The example above is very simple, but you can do advanced things with custom pages such as using Ionic components.

For example, try adding this to a custom page:

<ion-card>
  <ion-card-header>
    Header
  </ion-card-header>
  <ion-card-content>
    The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
  </ion-card-content>
</ion-card>

<button ion-button>Button</button>

See more  Ionic Components here.

It's important to note that you can use display components such as a card, but components that require data (such as a search box, form, or dynamic list) do not work without custom code.

WP-API Lists and Sliders

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

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

Maps, Youtube videos, etc.

To add a Google Map, simply paste the map embed code into the page content box. The same goes for a YouTube or Vimeo video, or any type of iframe content.