Adding Facebook and LinkedIn icons on Mystique v2.x

Mystique theme for WordPress has reached version 2.0. Milenko is very active on updating it. With 2.0, you don’t need to edit any theme files manually, and this makes it much easier to add new social networking icons and replace the default Twitter and RSS icons. Here is how to do it:

First, download the image below (all icons were created by Mark Hewitt, I only merged the LinkedIn icon into the default icon set. You can find other icons on his site.), and upload it to your site. It will go to the SITE_ROOT/wp-content/uploads/ directory, if you did not change your upload destination.

OK, now that you have uploaded your image to your site, you will have to edit your site style. You will add the necessary changes to Mystique’s settings, so that they will not be overwritten after a theme update. Go to your admin panel and select Mystique settings under Appearance. In the settings page, select the User CSS tab, and add the following lines there:

/* Extra navigation icons */
#header a.nav-extra.rss{background:url("/wp-content/uploads/nav-icons.png") no-repeat scroll right top transparent}
#header a.twitter{background:url("/wp-content/uploads/nav-icons.png") no-repeat scroll -128px top transparent}
#header a.linkedin{background:url("/wp-content/uploads/nav-icons.png") no-repeat scroll -64px top transparent}
#header a.facebook{background:url("/wp-content/uploads/nav-icons.png") no-repeat scroll 0px top transparent}

The numbers after scroll in these lines select which icon to show. 0px is the first icon (i.e. Facebook), -64px is the second one (i.e. LinkedIn) etc. with decreasing 64 pixels.

If you want to lift the icons up a little bit, add the following lines before the lines you have just written:

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

You can change the height of the icons by changing the value of -46px in the first line.

Now that you have readied your icons, let’s show them on your site. Now select the Advanced tab from Mystique Settings, left to the User CSS tab that you are currently on. In the User functions section, add the following -and read the warning below a few times before adding it-. (do not remove the first line that says php there!)

WARNING! The following code is PHP code, that means, it will render your blog unusable if you don’t know PHP and try to change the contents of the code. Backup your WordPress database before adding this code.

function mystique_custom_nav_icons($nav_extra)
{
  $nav_extra .= '<a href="YOUR_LINKEDIN_PROFILE" class="nav-extra linkedin" title="Contact me on LinkedIn!"><span>Contact me on LinkedIn!</span></a>';
  $nav_extra .= '<a href="YOUR_FACEBOOK_PROFILE" class="nav-extra facebook" title="Contact me on Facebook!"><span>Contact me on Facebook!</span></a>';
 
  return $nav_extra;
}
 
add_action('mystique_navigation_extra', 'mystique_custom_nav_icons');

If you want to remove Twitter icon and only want to show RSS, Facebook and LinkedIn icons, add this code instead of the one above:

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="YOUR_LINKEDIN_PROFILE" class="nav-extra linkedin" title="Contact me on LinkedIn!"><span>Contact me on LinkedIn!</span></a>';
  $nav_extra .= '<a href="YOUR_FACEBOOK_PROFILE" class="nav-extra facebook" title="Contact me on Facebook!"><span>Contact me on Facebook!</span></a>';
 
  return $nav_extra;
}
 
add_action('mystique_navigation_extra', 'mystique_custom_nav_icons');

If you want to change the order of the icons, change the order of the lines in the example. Also, you can remove a line altogether if you don’t want to show an icon. For example the following code only shows RSS and Facebook icons with Facebook icon at the right and RSS icon at the left:

function mystique_custom_nav_icons($nav_extra)
{
  $nav_extra = '<a href="YOUR_FACEBOOK_PROFILE" class="nav-extra facebook" title="Contact me on Facebook!"><span>Contact me on Facebook!</span></a>';
  $nav_extra .= '<a href="'.get_bloginfo('rss2_url').'" class="nav-extra rss" title="RSS Feeds"><span>RSS Feeds</span></a>';
 
  return $nav_extra;
}
 
add_action('mystique_navigation_extra', 'mystique_custom_nav_icons');

Change YOUR_LINKEDIN_PROFILE and YOUR_FACEBOOK_PROFILE according to your contact info. That’s all, now you should have the new icons on your site.

You may also like...

152 Responses

  1. Orangy says:

    Thanks for this. Helped a lot! 🙂

  2. foxprime says:

    Hello,

    I try to put icons (rss, youtube, twitter) INSIDE the navigation bar. Like this http://img121.imageshack.us/img121/4360/st1s.jpg (it’s a quickly toshop made^^)
    How i can do this ?

    Thanks for responses

  3. Jay says:

    I’m trying to use the Facebook icon but since my page doesn’t have a “username” from Facebook (because it’s new and doesn’t have 100+ likes) the link won’t work. I put in the ID number for my page but that doesn’t work.

  4. Just what I needed, and worked like a charm, thank you! I always thought that those social icons where too much in hiding, and wondered why FB and LinkedIn where not included.

  5. Plz tell me I want to add nav icons which is of size 52px(Default is 64px) How to adjust spacing 🙂

  6. Andy says:

    Hi Kerem,

    Please excuse my complete ignorance (I have zero IT skills). Have tried to follow your instructions, but I am having a problem. I have downloaded the zip file from Mark Hewitt as instructed. I then upload it (via the plugin section). I then pressed ‘activate plugin’ and got this message:

    The plugin does not have a valid header.

    Please could you let me know what I am doing wrong?

    the linkedin & facebook links are on my website, they are just not showing!

    Any help would be greatly appreciated!

    Thanks very much

    Andy

  7. Bu güzel bilgi için teşekkürler Kerem bey.

  8. This really worked like a charm. Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *