WP-AppKit’s themes have a menu template. This menu is configured in your app’s WordPress panel. But you might want to create a link or a button to display a specific screen in your app outside the “official” app’s menu. So how can we do that?

The menu builder and theme's menu side by side

The menu builder and theme’s menu side by side

As most webapps, WP-AppKit’s themes are a single HTML page. Screens are parts of this page and navigation is handled with JavaScript. Even if we chose to present them as separate templates to ease your work, you have to know that all templates are merged later in a single page.

In single page apps, navigation is handled with fragment identifiers (aka. anchors, see more at http://en.wikipedia.org/wiki/Fragment_identifier and http://backbonejs.org/#Router). If you wonder what’s a fragment identifier, it’s an optional part of the URL beginning with the # sign.

http://www.mysupernicedomain.com/lorem/ipsum/index.html#fragmentidentifier

The main difference between classic web URL and the WP-AppKit’s links is that there is nothing before the # sign. The # sign is also followed by keywords (eg. component).

At the moment, fragment formats for WP-AppKit’s themes are:

Home Screen #
Component (ie. post list, a single page, a page tree…) #component-[component-slug-defined-in-wordpress]
Post Detail #single/posts/[wordpress-post-id]
Post Comments #comments/[wordpress-comment-id]
A page #page/[component-slug-to-which-the-page-belongs]/[page-wordpress-id]

You can also use the nice TemplateTags object in your templates or in the functions.js.

Get a post link TemplateTags.getPostLink(post_id,’posts’)
Get a page link TemplateTags.getPageLink(page_id,component_slug)
Get comments link for a post TemplateTags.getCommentsLink(post_id)
Get the previous screen link TemplateTags.getPreviousScreenLink()

A last word to say is that there is no 404 error in an app. If your link is wrong, it defaults to the home screen.

Happy Coding!

Published by Mathieu on September 13, 2014

Freelance Senior Web Developer, WordPress since 2009, JS/Backbone since 2012, Custom Back-End devs, WebApps and Plugins for clients and the community.

4 Comments

  1. Is it possible to add a url to an image?
    Everytime we try it just dissapears.

    We would like to add some images that goes to specific categories of posts within the app.

    Reply
  2. Hi, when I use a ‘href’ of #component-whatever in a page link it opens a new window. But when its in the menu it works fine?

    Reply
    • Hi, if the targeted component (“whatever”) has been added to your app in Back Office, the link should open directly in the app indeed. Where exactly do you try to add this link with href=”#component-whatever” ? In your single.html template? directly in your post content? somewhere else in your app layout? Also can you check that you are using a version of Q for Android theme at least 1.0.4 ?

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Having questions?

FAQ | Tutorials | Documentation

Or

Contact Us