How to add Jump List items to your WordPress site for IE9

Today we are going to learn how to implement a simple Jump List for IE9 without the need of a plugin; that way when people using Internet Explorer 9 pin your site in their Windows 7 taskbar, they are going to have faster access to content and richer experience.

WordPress Jump List in IE9

Well, we all are excited about Internet Explorer 9 Beta that came out last week with tons of new features, a cleaner and elegant new user interface, hardware acceleration,  HTML5 support, and much more. One of the features in IE9 beta that is catching people’s attention is Pinned sites which makes possible to access your favorite websites directly from the Windows taskbar without having to first open the web browser and making your favorite websites look like a real Windows application.

If you have notice after you pin a website (i.e facebook.com) on the taskbar and you right click on it, a menu will pop-up, this menu is called Jump List. This it is a quick and easy way to access different sections within the website or other important links.

Note: The number of items display by a Jump List will vary from website to website or applications.

Today we are going to learn how to implement a simple Jump List for IE9 without the need of a plugin; that way when people using Internet Explorer 9 pin your site in their Windows 7 taskbar, they are going to have faster access to content and richer experience.

OK, lets start:

1-  First, you are going to need a 32×32 pixels favicon image in your WordPress website, this is the image that will be display when you pin a site in Windows 7 taskbar; and you are also going to need another favicon image for each of the Jump List item; they could be 16×16 pixels.

Windows 7 Taskbar faviconsWindows 7 Taskbar Jump List - Facebook

If you don’t know how to create a favicon image, do a search online for “favicon generator”, there are a lot of websites that would let you upload and convert any .jpg and .png or other types of image files to a favicon (*.ico) file format.

After you’re done, upload them to your WordPress website!

Warning! Remember to always make a backup of your site before modifying any file.

2-  Log in to your WordPress site, browse to your theme template folder, locate and open the header.php file.

Look for a line of code that is similar to this one: <link rel=”shortcut icon” href=”<?php bloginfo(‘template_directory’); ?>/image-folder-path/favicon.ico” /> If you already have this line, the only thing that you have to do is to paste the following Jump List code below under this line.

<meta name=”application-name” content=”home page name“/>

<meta name=”msapplication-tooltip” content=”tooltip text“/>

<meta name=”msapplication-task” content=”name=Item#1;action-uri=Here goes the URL for Item#1;icon-uri=Here goes the link to the favicon image” />

<meta name=”msapplication-task” content=”name=Item#2;action-uri=Here goes the URL for Item#2;icon-uri=Here goes the link to the favicon image” />


Remember to replace the content in orange with your website settings and save the header.php file when you done.


If not have the first line of code I mentioned above, you will need to paste the following code before the </head>.

<link rel=”shortcut icon” href=”<?php bloginfo(‘template_directory’); ?>/image-folder-path/favicon.ico” />

<meta name=”application-name” content=”home page name“/>

<meta name=”msapplication-tooltip” content=”tooltip text“/>

<meta name=”msapplication-task” content=”name=Item#1;action-uri=Here goes the URL for Item#1;icon-uri=Here goes the link to the favicon image” />

<meta name=”msapplication-task” content=”name=Item#2;action-uri=Here goes the URL for Item#2;icon-uri=Here goes the link to the favicon image” />


Remember to replace the content in orange with your website settings and save the header.php file when you done.

Tip: Clear all your browser cache files and restart the IE9 before pinning your website to the taskbar. Also note that the web browser could take some time to sync with the favicon images.


Code explained:

The first line, is the line that the web browser is going to look for to grab and display an image in the browser tab.

Example: <link rel=”shortcut icon” href=”<?php bloginfo(‘template_directory’); ?>/image-folder-path/favicon.ico” />


Starting with the release of IE9 Beta, Microsoft has introduced HTML meta tags:

<meta name=”application-name” content=”Your Website Name”/>

This meta tag has two attributes name that must have the “application-name” value and content attribute that should be filled with the name of your website.

Example: <meta name=”application-name” content=”Pureinfotech”/>


<meta name=”msapplication-tooltip” content=”tooltip text”/>

This meta tag has two attributes name that must have “msapplication-tooltip” value and content attribute that hold the tooltip name of a link.

Example: <meta name=”msapplication-tooltip” content=”Pureinfotech – Simple computer help”/>


Next, to add an item to the Jump List you will need the following meta tag (Repeat this process for each item that you want to include. Try to limit the numbers of items to 4 or 5):

<meta name=”msapplication-task” content=”name=Task-Name; action-uri=Action-URL; icon-uri=Icon-URL” />

This meta tag has two attributes name that must have the “misapplication-task” and the content attribute that has 3 strings values (name, action-uri, and icon-uri) explained in the example below:

Example: <meta name=”msapplication-task” content=”name=NewsItem; action-uri=news; icon-uri=/favicon.ico” />


For WordPress you could use in action-uri=” the code<?php bloginfo(‘url’); ?>, this will pull the website URL and for icon-uri=” the code<?php bloginfo(‘template_directory’); ?>, this will pull the theme directory location.


WordPress example: <meta name=”msapplication-task” content=”name=News; action-uri=<?php bloginfo(‘url’); ?>/news; icon-uri=<?php bloginfo(‘template_directory’); ?>/image-folder-path/favicon.ico” />


Pureinfotech now also supports Jump List, so If you like to see Jump List in action using Internet Explorer 9, try pinning Pureinfotech.com to your Windows 7 taskbar.

I hope this info was helpful to you, remember to leave a comment in the section below. Thanks!