Adding Extra Icons to the Mystique Theme

Web site with added icons

This article is for users of Mystique Version 2.x – The Social Networking Icon deployment in the latest Mystique (Version 3.x) has changed to a module and is much simpler to work with.

The new web site is almost done now and I have 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

Many people have had 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).
Unzip and 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 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{background:url("/wp-content/uploads/mystique_icons/nav-email.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.soundcloud{background:url("/wp-content/uploads/mystique_icons/nav-soundcloud.png") no-repeat scroll right top transparent;}
#header{background:url("/wp-content/uploads/mystique_icons/nav-youtube2.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.twitter{background:url("/wp-content/uploads/mystique_icons/nav-twitter.png") no-repeat scroll right top transparent;}
#header a.google2{background:url("/wp-content/uploads/mystique_icons/nav-google2.png") no-repeat scroll right top transparent;}

The User CSS area looks like this:

Mystique User CSS

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

<!--?php <br ?-->function mystique_custom_nav_icons($nav_extra)
$nav_extra = '<a href="'.get_bloginfo('rss2_url').'" title="RSS Feeds"><span>RSS Feeds</span></a>';
$nav_extra .= '<a href="" title="Contact"><span>Contact</span></a>';
$nav_extra .= '<a href="" title="MySpace"><span>MySpace</span></a>';
$nav_extra .= '<a href="" title="SoundCloud"><span>SoundCloud</span></a>';
$nav_extra .= '<a href="" title="YouTube"><span>YouTube</span></a>';
$nav_extra .= '<a href="" title="LinkedIn"><span>LinkedIn</span></a>';
$nav_extra .= '<a href="" title="Facebook"><span>Facebook</span></a>';
$nav_extra .= '<a href="" title="Twitter"><span>Twitter</span></a>';
$nav_extra .= '<a href="" title="Google+"><span>google2</span></a>';

return $nav_extra;

add_action('mystique_navigation_extra', 'mystique_custom_nav_icons');

The Advanced > User functions area looks like this:

Mystique Advanced - User functions

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):

Please do not forget to change all links that you are using AND remove others that you are not using from both sections. There are countless sites around the internet that still have links to my sites on their headers – even though the graphic icons may have been removed.

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.