Custom HTML Reference

Here is a reference of all the elements you can use in a custom HTML page, with examples.

It's easiest to start with one of our templates, if you haven't already, see them here (AppPresser 4 only)

WordPress Posts

Display a list of posts. See all configuration options here.

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

A slider, or carousel with posts. See all configuration options here. (For a slider that shows static content, see below)

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

Media

Play a downloaded audio or video file

<ion-button (click)="mediaModal('files/my-movie.mp4')">Play Movie</ion-button>

Menu Items

Display your menu items on the page. See our starter templates for more examples.

<ion-list>
        <ion-item lines="none" *ngFor="let p of pages.all.items | slice:1" [ngClass]="p.extra_classes" (click)="pushPage(p)" [hidden]="p.show === false">
            <ion-icon *ngIf="p.class" slot="start" name="{{p.class}}"></ion-icon>
            <ion-label>
                {{p.title}}
            </ion-label>
        </ion-item>
</ion-list>

LearnDash Courses

See LearnDash setup docs

<ap-list wp="true" card="true" class="col-2" route="https://mysite.com/wp-json/wp/v2/sfwd-courses?per_page=10"></ap-list>

Hide/Show Content

Login button

<ion-button expand="block" (click)="loginModal()">Sign up or Login</ion-button><br>

Based on logged in or out

<div *ngIf="user">     
<h2 *ngIf="user.username">Hello, {{ user.username }}</h2>     
<p>A logged in user can see this</p> </div> 

<div *ngIf="!user">
<p>This will show if a user is not logged in.</p>
<p><button ion-button large type="button" (click)="loginModal()">Please Login</button></p> 
</div>

Based on user role

<!-- Example of a logged in user that has a role -->
<div *ngIf="user?.role=='admin'">You are an admin</div>
<div *ngIf="user?.role=='member'">You are a member</div>

<!-- Example of a logged in user that has no role -->
<div *ngIf="user?.role==''">Hello user, thank-you for logging in.</div>

<!-- Example of a user who is not logged in -->
<div *ngIf="!user">Hello stranger. You are not logged in.</div><br>

Based on Language

<div *ngIf="language?.code=='en'">Hello English speaker</div> 
<div *ngIf="language?.code=='es'">Hello Spanish speaker</div> 
<div *ngIf="language?.code=='ru'">Hello Russian speaker</div> 
Language code: {{ language?.code }}
<div *ngIf="!language">Language is not set</div>

Ionic UI Components

Use some static UI components from the Ionic library. Note that dynamic components like segment, input or forms, search, etc will not work because they require custom Javascript. AppPresser already has many of those items built-in.

Static HTML slides example. See ion-slides documentation.

<ion-slides pager="true" [options]="{slidesPerView:2.35,spaceBetween:0,pagination: { el: '.swiper-pagination',type: 'progressbar'}}">
  <ion-slide (click)="pushPage( { url:'https://apppresser.com', type:'custom'})">
    <img src="assets/mountains-1000.jpg" alt="">
    <h3>{{ 'AppPresser' | translate }}</h3>
  </ion-slide>
  <ion-slide (click)="pushPage( 'my-page-slug' )">
    <img src="assets/mountains-1000.jpg" alt="">
    <h3>{{ 'AppPresser' | translate }}</h3>
  </ion-slide>
</ion-slides>

Other

These components use custom HTML pages, but they require extra setup. Please click for documentation.