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
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).
<a href="#component-cats">Articles about cats</a>
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!
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.
Saw that you’ve opened an issue on GitHub. Will answer you there.
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?
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 ?