Quick Start Guide

MetroPress is a app template that was developed with quick and flexibility in mind. Anyone can easily customize their application using the built-in available options and simple CSS change.


You will need basic knowledge of developing Window 8 apps using HTML5 and JavaScript. To get a better understanding, please read our QuickStart Guide to begin.


MetroPress is an extendable framework that is easily customized to create awesome Windows store applications. Underneath, MetroPress serves as a solid backbone between Windows8 and WordPress, allowing for more creative features to be built upon WordPress.


MetroPress is an app template that was designed for quick modification while keeping flexibility in mind. Anyone can easily customize their application using built-in available options and simple CSS changes. Here is the quick seven-steps process to install MetroPress and customize your app:

1) Download the source at http://metropress.codeplex.com/
2) Install JSON API plugin http://wordpress.org/extend/plugins/json-api/ into your WordPress website
3) Open WPApi.js from MetroPress solution and change apiURL to point to your website. (i.e apiURL: ‘http://www.webnotwar.ca/’)
4) Change the following options from WPApi.js:
  • appTitleImage – url for the header image in the main hub view (optional)
  • appTitle – header text in the main hub view (Note: appTitleImage will replace the appTitle if it is specified)
  • showRecent – displays a recent news section in the main hub view
  • showPages – displays a page section in the hub main view
  • showPageIds – shows an array of Page IDs to be displayed; If not specified, all pages will be displayed
  • showCatIds – shows array of Categories to be displayed; If not specified, all categories will be displayed
  • cacheTime – is the duration for the cached data
  • getNumberOfTiles() – controls how many tiles to show for each category in the main hub view
  • getDefaultPostCount() – controls how many posts to fetch for each category
5) Change the localStorageSchemaVersion value to a higher version number to prevent caching and ensure the settings update.

6) Update colors from default.css
The overall styling, and colors are defined in default.css. You can easily change the theme-color, link anchor color, and fonts. Here is an example:

/* colors */
.theme-color, a, a:link, a:visited {
color: #ff6102 !important; /* link */
a:active, article a:hover {
color: #ffd800; /* mouse over link */

.theme-bg-color {
background-color: #ff6102 !important;

.fragment progress.win-ring {
color: #ff6102;
width: 100px;
height: 100px;
position: absolute;
left: calc(50% - 50px);
top: calc(50% - 50px);
7) In the image folder, you replace all existing images with your brand or logo.
8) Update the content in the about page about-flyout.html

Now, give it a try, and run your app : )!


1) Most of the WordPress interaction happens in the wpapi.js file. In particular, check out the newDataSource() function to understand how the calls works. In a high level, it roughly does the following:
- get all categories
- get all pages
- get recent posts
- get posts per category

2) In the current implementation, WPApiCategory object can represent a list of Pages, Posts, or bookmarked posts.

3) Changing the value of WPApi.localStorageSchemaVersion will reset the LocalStorage.

4) The mainpage.html has a ‘allpost-list’ div tag which is a GridView control. This GridView binds to a grouped list that is grouped by Pages, Recent posts, Bookmarks, and Posts by each category. You can apply different template and styling to this control to get a new look and feel.

5) There are 3 lists that contains all the posts, bookmarked posts, and pages:
wpapiCategory.list – stores the data posts for a category, or pages
WPApi.list – a list combined from all the wpapiCategories
WPApi.groupedList – a Grouped list created from WPApi.list. The mainpage’s GridView is data-bind to WPApi.groupedList

Last edited Dec 27, 2012 at 5:43 PM by raymondtsang, version 2


No comments yet.