How to Create Windows 8.1 Start Screen Live Tile for your Website

Live-Tiles

Do you have a WordPress website or blog? then you may want to create a Windows 8/8.1 Start screen Live Tile, that will display recent posts from your site and keep your visitors informed of new articles.

So, here’s a quick guide that will walk you through the steps of creating a Live Tile for your WordPress Website

What you need?

1. Access to your WordPress account

2. Access to your hosting server, either through a FTP client or cPanel or Custom Control Panel (in case of Godaddy Hosting)

Creating the Live Tile

1. Visit http://www.buildmypinnedsite.com/en and Click “Build your own site tile”, then select a tile background color, and upload an image that should appear on the tile

Now you can choose your tile dimensions from the four available dimension options, and crop the image to fit those tiles, once customized, just click “Next Step”

Build-your-own-site-tile

Crop-logo

2. Enter your Feed URL, you can use your Feedburner URL or any other RSS feed service you are using, and click “Get Feed”, now you should see some code that contains some meta tags

Add-Notifications

Get-the-Code

 

Implementing the Live Tile

3. Now login to your WordPress account, go to Appearance – Editor – Header [header.php]. Now in the header.php file you can find the <head> tag and all other meta tags, here’s where you need to add the code you just copied. Add the code somewhere between <head> and </head> tags

You may also access this header.php file through your FTP client under the themes folderAdd-Code

 

4. Now click “Download Package”, once downloaded, extract the files, here you can see 4 or less image files, 1 xml file and then a Read me text document. Copy the image files to the root directory of your WordPress installation

Copy-images

Connect to your server either using FTP client (like FileZilla) or using cPanel and navigate to the root directory [Web Root (public_html/www)] or sub-directory where your WordPress installation reside, find index.php file and copy the images to the same folder/location of index.php file, Done.

Alternate Method to keep your meta tags section tidy

If you prefer your meta tags section to be clean, then just upload all contents of your downloaded package to the root folder and use the single line of meta code generated inside the header.php file under <head> tag

Meta-TagAdding Meta Tag to header.php

Meta-Tags-alternate-method

Live tile in action

Read this: How to Pin a website as Windows 8/8.1 Start screen Live tile (TheTechGears.com has a Live tile)

1. Visit your website on the Full screen Internet Explorer App (Find this on the start screen)

2. Click the “Star” icon, that represents “Favorites”

3. Now Click the “Pin” icon, select your tile and click “Pin to Start” [We recommend “Medium” sized tile, so that you can see our recent posts]

Go to the start screen, now you should see your live tile in action

Abilash A

I am a Web and Graphic designer, specializing in designing and hosting websites, blogs and forums. I love technology and blogging is my passion. I also specialize in blogger to WordPress migration. Currently I work Full-Time as a Quality Control and Testing Engineer.