The new web site is pretty much done now and I have pretty much settled on using the fantastic Mystique theme for WordPress. This is one the nicest and most useful themes I have seen. Built by the amazingly talented people at Digital Nature.

Web site with added icons

Web site with added icons

Many people have been having trouble adding extra icons to the theme. There are a number of ways to do this found in various places around the web but none of them stand alone and work correctly. I though it only fair that I publish my little walk through.

Thanks go out to all the people involved in the other walk-throughs – Mark N Hewitt, Kerem Erkan and many others.

This works with the latest version of the theme, as of March 18 2010. It is an amalgamation of many steps and has taken me hours to check and double check.

The main area of confusion was that some of the icons are contained within one main icon. I didn’t want to use them. Plus it was very confusing when trying to use the other icons as well. Then it was a case of trial and error and making it neat and tidy. I think the below should be very easy to use (and add to if required).

Please be sure to use all the code from this page. Do not mix it with other code until you are sure that everything is working.

So here’s the 4 steps.

1. Put the icons on your server

Head over to Mark’s site and download the icon pack (it’s half way down the page in a zip file).
http://www.marknhewitt.co.uk/archives/1921
Unzip an put all the icon files in a folder on your server: ../wp-content/uploads/mystique_icons/ *icon files go here*
You will have to make the folder mystique_icons first.
Now go to the WP Control Panel > Appearance > Mystique settings…

2. This code goes in User CSS area

#header p.nav-extra {top:-46px;height:54px;}
#header a.nav-extra {height:60px;}

#header a.nav-extra.rss{background:url("/wp-content/uploads/mystique_icons/nav-rss.png") no-repeat scroll right top transparent;}
#header a.twitter{background:url("/wp-content/uploads/mystique_icons/nav-twitter.png") no-repeat scroll right top transparent;}
#header a.myspace{background:url("/wp-content/uploads/mystique_icons/nav-myspace.png") no-repeat scroll right top transparent;}
#header a.linkedin{background:url("/wp-content/uploads/mystique_icons/nav-linkedin.png") no-repeat scroll right top transparent;}
#header a.facebook{background:url("/wp-content/uploads/mystique_icons/nav-facebook.png") no-repeat scroll right top transparent;}
#header a.blogger{background:url("/wp-content/uploads/mystique_icons/nav-blogger.png") no-repeat scroll right top transparent;}
#header a.email{background:url("/wp-content/uploads/mystique_icons/nav-email.png") no-repeat scroll right top transparent;}
#header a.googlewave{background:url("/wp-content/uploads/mystique_icons/nav-googlewave.png") no-repeat scroll right top transparent;}

3. This code goes in Advanced > User Settings (over-write the <?php in case you aren’t sure)

<?php
function mystique_custom_nav_icons($nav_extra)
{
  $nav_extra = '<a href="'.get_bloginfo('rss2_url').'" class="nav-extra rss" title="RSS Feeds"><span>RSS Feeds</span></a>';
  $nav_extra .= '<a href="http://www.twitter.com/phil_pendlebury" class="nav-extra twitter" title="Twitter"><span>Twitter</span></a>';
  $nav_extra .= '<a href="http://www.myspace.com/philpendlebury" class="nav-extra myspace" title="MySpace"><span>MySpace</span></a>';
  $nav_extra .= '<a href="http://uk.linkedin.com/in/pendlebury" class="nav-extra linkedin" title="LinkedIn"><span>LinkedIn</span></a>';
  $nav_extra .= '<a href="http://www.facebook.com/pages/RIFFS-RAYS/99388735458" class="nav-extra facebook" title="Riffs & Rays @ Facebook"><span>Riffs & Rays @ Facebook</span></a>';
  $nav_extra .= '<a href="http://gwfts.blogspot.com/" class="nav-extra blogger" title="Google Wave Blog"><span>Google Wave Blog</span></a>';
  $nav_extra .= '<a href="http://www.pendlebury.biz/contact" class="nav-extra email" title="Contact"><span>Contact</span></a>';
  $nav_extra .= '<a href="https://wave.google.com/wave/?pli=1#restored:wave:googlewave.com!w%252Bupyy5rPyA" class="nav-extra googlewave" title="Google Wave"><span>Google Wave</span></a>';

  return $nav_extra;
}

add_action('mystique_navigation_extra', 'mystique_custom_nav_icons');

4. Edit the URLs in the code above

You don’t need to edit anything until you have checked that the icons show up correctly. When you’re ready just change the areas that are required (between the first set of quotes) e.g for me – the Twitter URL is (feel free to follow me):

http://www.twitter.com/phil_pendlebury

I hope some people may find this useful.

Thanks for reading.

Please note: There have been some comments that this does not look quite right in Google Chrome. It works fine in Firefox, Explorer and Safari. The icons don’t move as smoothly in Explorer but it works fine.

  • Share/Bookmark