How to turn your WordPress site into a Windows 8 app – for free!

Apr01

As part of Ladies Learning Code‘s partnership with Microsoft this year, we’re working on helping beginners to launch apps in the Windows 8 app store. Part 1 of our effort involved workshops in Toronto, Vancouver and Ottawa on Windows 8 app design and/or development. The team at Nascent (one of our silver-level sponsors) did an incredible job of developing the content for those workshops (as well as an awesome to-do list app) and leading both a design and development workshop in Toronto. Thanks as well to Kharis O’Connell (@rmtwrkr) for leading our App Design workshop in Vancouver, and to Barbara Spanton (@_b_a_r_b_) for leading it in Ottawa.

Part 2 of our plan involves a cool tool developed by IdeaNotion that makes it easy for anyone – even beginners – to turn their WordPress site into a Windows 8 app. It’s called IdeaPress, and you can access it on any laptop, running any operating system that has an up-t0-date browser. We’re taking things one step further by offering to publish apps using Ladies Learning Code’s Windows store developer account (which costs $99 annually) using a Windows 8 device that we’ve borrowed from Microsoft. We’re aiming to help 50 beginners publish apps in the Windows 8 app store by April 5th. If you’d like one of them to be yours (and we hope you do!), please follow the simple steps below.

1. Make sure your website is compatible with IdeaPress

IdeaPress works with WordPress – both self-hosted WordPress.org as well as WordPress.com sites will work! If you have a self-hosted WordPress site (aka. WordPress.org), there’s just one tiny extra step that you need to do…

2. If you have a self-hosted WordPress site (aka. WordPress.org), you need to install the JSON API plugin.

Log in to the admin dashboard of your website and click on “Plugins” on the left menu bar. Click “Add new” at the top of the page. In the search bar, type “JSON API” and click “Search Plugins”. The JSON API plugin we’re looking for should be the first result (it’s the one by Dan Phiffer). Under the title, click “Install Now”. Activate it. If you don’t see an option to activate it, go to “Plugins” and then “Installed Plugins” and activate the JSON API plugin from there. Finally, go to “Settings” on the left menu bar. Click on “JSON API” and activate “Core”, “Response” and “Post” by clicking “Activate” under each word.

(If you have a WordPress.com site, you don’t have to do this step! Also, if you’d like to have me do the rest of these steps for you, I’m happy to! Just send me an email and let me know the URL of your WordPress site, and I’ll go right ahead and create an app for you!)

3. Go to IdeaPress.meClick “Get Started” on the homepage, and enter the address of your WordPress site as well as your email address. If you have a self-hosted WordPress site (WordPress.org) and you have the JSON API plugin installed, it will move you on to the next step.If you are converting a WordPress.com site, it will ask for one more piece of information – your Client ID and your Application Secret. To get those, follow these instructions (instructions coming soon!)

4. General Info

Give your app a name and a description. It’s worth spending some extra time on your description, because an unclear description that doesn’t clearly explain the value of the app will be rejected by the Windows 8 App store. Here are a few examples of descriptions that were accepted by the app store:

For Wesbos.com:

“Welcome, friends. You have reached the personal blog & portfolio of Wes Bos. I’m a designer, developer and entrepreneur from Toronto, Canada. Please take a look at my work gallery, read my blog or get in touch!”

For Hackeryou.com:

“HackerYou, based in Toronto, Canada, offers the city’s best part-time courses for people who want to learn to code. The recipe? Hands-on, project-based learning from industry-leading professionals. Small classes and a 10:1 ratio (or better!) of students to instructors. And a learning environment that’s social and collaborative. Make this year the year you finally learn to code – HackerYou can help get you there.

App features:

  • Check out upcoming courses
  • View upcoming workshops
  • Inquire about corporate training
  • Learn about the team behind HackerYou
  • Meet HackerYou’s advisors”

Make a note of your app description in a Word document or draft email – you’ll need it again later!

5. Content Configuration

Now is your chance to customize how your app looks. First, start by choosing which pages should be included in the app. For best results, choose pages with lots of content, as well as a unique image. I recommend avoiding including your “Home” page, if you have one, unless your homepage has content that is significantly different from what’s on your about page.You’ll also select which categories to include, and whether or not you’d like to include recent posts. I usually include all categories and recent posts.

6. Theme Configuration

Now is your chance to change the layout and colours of your app, and add images. This is where you can make your app look really polished. You’ll need a few different images – click here to download a file that includes blank files for each of the images you’ll need. You can use a program like Pixlr to add your logo, etc. to them.

  • Background image: 1366px by 768px (I usually just upload an image that’s completely white.)
  • Title image: 300px by 80px (This should be your logo – it goes on the top left-hand corner of your app)
  • Default article image: 252px by 168px (this image will appear anytime one of your posts or pages doesn’t have a photo)
  • Logo: 150px by 150px (kind of like an app icon)
  • Wide logo: 310px by 150px
  • Splash screen: 620px by 300 px
  • Screenshot: Later, you’ll also need a screenshot of your app which should be 1366px by 768px. You can create one by simply pasting your Splash Screen image onto an image that is 1366px by 768px. This mimics what the splash screen of your app looks like when someone first opens it.

7. Accept the terms of use and generate app package

Be sure to select “Generate App Package” from the options on the left side of the screen. In order to have Ladies Learning Code publish your app, you’ll need to enter the following information:

Privacy policy: If you have one of your own, you can modify it to be suitable for your app. Otherwise, just use the general one that we created for all apps published by Ladies Learning Code. Here’s the link: http://ladieslearningcode.com/privacy-policy

Identity Name: This has to be in the format of “MyCompany.OurAwesomeApp”. So, if Ladies Learning Code is going to publish your app, and you named it “Coolest App” (back in Step 4), your Identity Name would be “LadiesLearningCode.Coolest App”.

Publisher Name: If we’re going to submit your app for you, the Publisher Name should say “Ladies Learning Code”.

Publisher ID: Enter the following: CN=0332249A-B178-470E-8455-17DC36E0D37E

Terms of use and privacy policy: Tick the box if you accept!

Click “submit” to generate your app. It will be emailed to you.

8. Get Your App Published

Shortly, you’ll receive an email from IdeaPress that includes a download link. Forward that email to me at heather [at] ladieslearningcode.com and include the following:

a) Your app description (just paste it into the body of the email). If you forgot to make a note of your app description in Step 4, you can log in to IdeaPress, open your app from the dashboard and use the arrows to navigate to the app name and description page.

b) Your 1366 by 768 px screenshot (attach it to the email).

Once I receive your email, I’ll submit your app to the store and let you know when it’s live! Thanks for helping us reach our goal of 50 apps in the Windows 8 app store!

If you have any questions about the steps involved in turning your WordPress site into a Windows 8 app, feel free to get in touch with me at heather [at] ladieslearningcode.com. And if you have a WordPress-based website, please help us to reach out goal of helping 50 beginners publish apps in the Windows 8 app store by April 5th!