Add IE9′s Pinning Feature on WordPress, Show Recent Posts, Categories, More

If you use Internet Explorer 9 on a regular basis, you might be using the site pinning feature. This feature lets you access your favorite sites faster than the normal method of opening a browser and hitting the website bookmark.

Microsoft has made it possible for webmasters to customize their website’s pinned menu by adding jump lists, notifications and thumbnail preview controls. Pinned websites can be much like a custom-branded desktop app with custom favicon and navigation bar color. This feature was introduced with IE9, but I have never explored it much as I don’t use IE and had totally forgotten about it, that is until I read this post today by Martin on Ghacks . He has already covered ways to customize a site’s pinned menu but here I have expanded it further for WordPress users.

So here’s how you can customize your site’s pinned menu:

Create a High Quality Site Favicon

To make your website pinnable your site needs to have a high quality favicon.ico file. If you haven’t already added a favicon to your site, now is the time to create one, or if you already have, chances are it is a 16×16 pixels .ico.

IE9 uses a 24×24 version favicon as the Home button of a pinned site. And if a user’s taskbar is configured to use small icons, your site icon will be displayed at 16×16, otherwise the 32×32 version is displayed. That basically means you need a favicon with all the standard sizes. Here’s a free tool to create favicons: X-Icon Editor.

Once you have the favicon, upload it to your web server’s root directory or your theme directory. Then open your theme’s header.php file and add below line of code in it.

You can use dynamic URL:

<link rel="shortcut icon" href="<?php echo get_bloginfo('template_url') ?>/favicon.ico" />

Or hard code the favicon’s path:

<link rel="shortcut icon" href="http://your-site.com/favicon.ico" />

Declaring Pinned Site Metadata

Add below code to the header.php file as well:

<meta name="application-name" content="Your Site Name" />
<meta name="msapplication-tooltip" content="Tooltip message" />
<meta name="msapplication-starturl" content="http://www.Your-Site.com" />
<meta name="msapplication-window" content="width=1024;height=768" />
<meta name="msapplication-navbutton-color" content="#000000" />

These meta tags helps your site behave more like a desktop application.

• application-name: Your website name
• msapplication-tooltip: A tooltip is shown when pinned shortcut is on desktop
• msapplication-starturl: Your website URL
• msapplication-window: Controls the size of the website window
• msapplication-navbutton-color: Controls the color of the navigation buttons

More info: Declaring Pinned Site Metadata

Create Jump List Items and Category

You can create Jump lists and add items to it to increase pinned menu’s functionality.

With this code you can add a static item to the jump list:

<meta name="msapplication-task" content="name=Wallpapers;action-uri=http://sumtips.com/category/wallpapers;icon-uri=http://sumtips.com/favicon.ico"/>

This link will show up under Tasks list in the menu.

We can also create custom categories in the menu. Do note, at a time only one category would be visible.

To create a category, we have to call msSiteModeCreateJumplist method. It should come first before all other methods.

window.external.msSiteModeCreateJumplist('Latest Posts');

msSiteModeAddJumpListItem is used to create category items:

window.external.msSiteModeAddJumpListItem('Wall 1', 'http://sumtips.com/wall1.html', 'http://sumtips.com/favicon.ico');
window.external.msSiteModeAddJumpListItem('Test 3', 'http://sumtips.com/test3.html', 'http://sumtips.com/favicon.ico');

To display the category and its items, Windows uses msSiteModeShowJumplist method:

window.external.msSiteModeShowJumplist();

That was the static method.

Category and list items can also be created and displayed dynamically. Here’s the code for that:

<script language="javascript">
	function AddJumpList()	{
		try	{
			if (window.external.msIsSiteMode())	{
				window.external.msSiteModeCreateJumplist("Latest Post");
				window.external.msSiteModeAddJumpListItem("Wall 1", "http://sumtips.com/wall1.html", "http://sumtips.com/favicon.ico");
				window.external.msSiteModeShowJumplist();
			}
		}
		catch (ex)
		{
		}
	}
	AddJumpList();
</script>

As this is a JavaScript code, we can do a conditional check to see if the browser supports pinned feature and execute the code only then. msIsSiteMode method is used for the check.

More info: MSDN documenation.

Create Category and Display Latest Posts from WordPress

To display latest post from a WordPress site, we will use the above code and in addition to it also use PHP and standard WordPress loop:

<script language="javascript">
	function WinJumpList()	{
		try	{
			if (window.external.msIsSiteMode())	{
				window.external.msSiteModeCreateJumplist("Latest Posts");

				<?php
					$featuredPosts = new WP_Query();
					$featuredPosts->query("showposts=5");
					while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); ?>
						window.external.msSiteModeAddJumpListItem("<?php the_title(); ?>", "<?php the_permalink() ?>", "http://sumtips.com/favicon.ico");
					<?php endwhile; ?>

				window.external.msSiteModeShowJumplist();
			}
		}
		catch (ex)
		{
		}
	}

	WinJumpList();
</script>

You can as easily use other custom WordPress loops in the code. Say, to show popular posts, random posts, list of categories, etc.

Up to 20 list items can be displayed at a time in a custom category.

Display Message to IE Users Asking to Pin Site

Again, using the msIsSiteMode() method, we can detect if the user is on IE9 or a browser supporting pinning feature and display a message asking them to pin the site.

<script type="text/javascript" language="javascript">

if (!window.external.msIsSiteMode()) {
       document.write('<div id="pinMeContainer"><img class="msPinSite" src="/site-logo.jpg" /><span id="pinMe">You appear to be using IE9. Drag the site logo onto your Task Bar for a richer experience.</span></div>');
}

</script>

More info: MSDN documentation

And that’s how you implement IE9′s site pinning feature. Other than WordPress loop part, you can use this post as guide to implement the feature on any site. More info on this feature can be found on this site: http://buildmypinnedsite.com

Tweet

---