Step-By-Step: Converting A WordPress Blog Into A Windows 8 App Without Coding

Windows 8 Start Screen

Blogging has been a passion of mine for some time now.  While yes its true WirelesslyObsessed.com has been around since 2009 and yet has few posts, I have been ghost writing for some time for a multitude of blogs (most recently www.canitpro.com).  I have also been dabbling in social media since 2007 and have enjoyed engaging in conversations with people who are passionate about their interests.

My current role at Microsoft allows me to focus on social media communication as part of my daily activities thus allowing me the time to focus on my blog once more.  Times have changed since this blog’s inception and I wanted to evolve WirelesslyObsessed.com to allow easier access of information to perspective readers.  One of my colleagues and friend, Frédéric Harper, suggested building a Windows 8 application feeding the content from my blog to a live tile located on the start screen.  My immediate response was “Ok, how much is it going to cost me?” as it had been some time, say high school, since I last coded.  Fred then showed me a FREE online solution developed by ideaNotion, a Canadian based development shop, called IdeaPress.

The online solution worked great, and in less time than it takes to setup a smartphone, I was able to create a Windows 8 application based on WirelesslyObsessed.com.

PThurrott IdeaPress Tweet

Others like noted Microsoft aficionado, Paul Thurrott, have also discovered the IdeaPress Windows 8 application creation solution and have commented on the remarkable ease is creating said application.

Converting your blog into a Windows 8 modern application provides your reader the ability to seamlessly gain access to what is important to them without the bother of opening a browser.  Additionally, the peek functionality offered through Windows 8 Tiles offers your audience a glimpse of new posts provided on your site further engaging your readers to read and comment further.  There are so many possibilities for this solution ranging from sharing information with your readership to sharing pictures and experiences with family and friends.  Following this “Step-By-Step” process will help your efforts on converting your WordPress blog into a Windows 8 application.

Prerequisites

Converting your Blog

  1. Visit the Ideapress site and select Login to create an account. I used my Live account, but you can use other accounts such as Facebook as well. After creating the account, you will receive an email with a link to activate your account and reset your password.
  2. After you have logged in, select Start New App
  3. Next you will go through a series of pages to enter the details for your app. The first page is Settings where you enter the URL of your WordPress site.
    Enter URL
  4. WordPress.com won’t allow the app to post comments to your site without permission. So when you enter a URL for a WordPress.com site IdeaPress gives you instructions to log in to the Developer WordPress site with your WordPress account and follow the instructions provided to generate a Client ID and Client Secret which you use to complete the fields on the Settings Page.NOTE: Make a note of the app name you enter in WordPress you will need it again shortly.Create WordPress App
  5. Once you have specified the Client ID and Client Secret from your WordPress account you can go to the General Info tab and enter an App Name and App description. The app name should be the same app name you entered when you just entered in WordPress. The description should describe the content of your blog so that someone who is browsing your app in the Windows Store understands the type of content you provide and can decide if they want to download it.App name and description
  6. Now continue to the Content Configuration Tab. On this tab choose which pages from your WordPress blog you want included in the app.

Select Pages to include

  1. After you select the pages without receiving any error messages, continue to the Theme Configuration tab. Now, you can have some fun playing around with the look and feel of your app.NOTE: You even get a live preview as you make changes so you can see how the finished app will appear to the user.You can choose
    • Layout of your content
    • Images to display: Background image, title image (if you prefer an image such as a logo instead of text for a title on the main page), a default image to display for content read from your blog that is not already associated with an image.
    • Colors for headers, titles, background
    • Logos for your tiles
    • Images and color to display on the Splash screen that appears to the user when your app launches

    NOTE: IdeaPress tells you what image sizes are required for each logo or page. I used Paint to resize my images, you can also use free tools such as Paint.NET to resize images.

    NOTE: Even though I uploaded the images for my tile and splash screen I got an error saying I hadn’t uploaded any images. As soon as I uploaded a Default Article Image (under Layout and Theme) the error message went away, so I think Default Article image is mandatory and you just get a misleading error message when you don’t provide all the mandatory images.

    Theme Configuration

    8. When you have a look and feel that you like, go to the App Generation tab.

    On the App Generation tab you get to choose whether to Generate a Visual Studio Solution or an App Package.

    • Generate Visual Studio Solution – if you choose this option, you will get a package which contains a .jsproj file you can open in Visual Studio (install Visual Studio Express on your PC by downloading and installing the Windows 8 SDK). The advantage to this option is you can see the code, make changes to the code if you want to, get screenshots from the simulator, and build the app package to submit to the store yourself.
    • Generate App Package  – if you select this option, you will have to provide your Windows Store account information. IdeaPress will used this information to create and send you an app package. The advantage to getting the app package from IdeaPress is you can submit that package to the store directly without Visual Studio.NOTE: You will need a snap shot of your app when you publish it to the store, so you might want to go to the theme configuration tab and take a screen shot.

    Regardless which option you choose you will require a Privacy link.

    Your app will connect to the internet to access your blog content. The Windows Store requires any app that connects to the internet to have a privacy policy. The easies way to handle this is to add an extra page to your WordPress blog, the IdeaPress team provides an example privacy policy so you can get an idea of what information to include on the privacy policy page. Enter the URL of your privacy policy page here, and make a note of it, because when you submit your app to the store you will again be asked for the URL of the privacy policy.

    Submit app

    Finally you can check the box that says you have read and agreed to the terms and conditions and choose Submit. IdeaPress will email you a link to your solution or package and you can start the process of submitting it to the store.

    As mentioned earlier, converting your WordPress blog into a Windows 8 app creates a new and unique way to share you passion amidst your readers.  Once the application is in store, continue to submit blog posts to your blog and the application will automatically update for your readers showcasing the new content.  Download the WirelesslyObsessed.com Windows 8 app to your Windows 8 tablet or notebook to see the final result of the conversion.

Advertisements

2 thoughts on “Step-By-Step: Converting A WordPress Blog Into A Windows 8 App Without Coding

  1. Pingback: Teaching Microsoft Co-ops How to Build Apps Without Code | Wirelessly Obsessed

  2. Pingback: Homepage

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s