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. Hey, thank you very much! Sorry for botter you with that. I read the first comment but I really suck on CSS.

    About the files, the problem was actually permission. I moved the files by FTP between folders and messed all the permission.

    I do understand this thing of information overload.

    Thank you, Kerem!

  2. And… yes! Now is working just fine!

    Permission problems, the *right top* thing you said, and, all my files are under a wordpress folder (/wordpress/wp-content/themes/…). I have tried yesterday with and without it in the address. But, it was late in the night…

    Thank you!

    My User CSS

    /* Extra navigation icons */
    #header p.nav-extra {top:-46px;height:54px;}
    #header a.nav-extra {height:60px;}  
    #header a.nav-extra.rss{background:url("/wordpress/wp-content/themes/mystique/images/nav_icons/nav-rss.png") no-repeat scroll right top transparent}
    #header a.twitter{background:url("/wordpress/wp-content/themes/mystique/images/nav_icons/nav-twitter.png") no-repeat scroll right top transparent}
    #header a.googlebuzz{background:url("/wordpress/wp-content/themes/mystique/images/nav_icons/nav-googlebuzz.png") no-repeat scroll right top transparent}
    #header a.delicious{background:url("/wordpress/wp-content/themes/mystique/images/nav_icons/nav-delicious.png") no-repeat scroll right top transparent}
    #header a.flickr{background:url("/wordpress/wp-content/themes/mystique/images/nav_icons/nav-flickr.png") no-repeat scroll 0px top transparent}
    
  3. Josh says:

    Okay… so i literally just uploaded the png file… copied and pasted the two pieces of code … and it doesn’t work. i started over a coulple times… i can not figure out what i’m doing wrong. Is this out of date due to new theme version or something?

    The links are there the image just isn’t showing up.

    joshsliffe@gmail.com
    westclub.summitrdu.com

  4. Shahid says:

    what if i want to add custom icons, eg: linkedin, myspace, etc but all seperate icons, eg: rss, twitter, linkedin, facebook,myspace all seperate..

  5. Frankie John says:

    Can i use this theme for blogger or blogspot?.

  6. Sybil says:

    I was hoping you would be able to help me out. For some reason my facebook and rss icons will work, but the link to my twitter account is not available. It seems to be more of a positioning thing rather than the twitter account, because if I switch the placement of the facebook icon and the twitter icon, then the facebook icon doesn’t work. So basically it is the first icon in the series that isn’t working. If you mouse over the first icon, it does not raise up like the other two do either. I also plan on adding an icon for LinkedIn, but first need to get this part fixed. Any ideas?

  7. Sybil says:

    That was it! Thanks so much!

  8. Bilal says:

    Hey kerem .. real thanks for the tutorial
    I have one more query if u can help me
    Im tryin to add favicon for which i uploaded the .ico file in the root directory aswell as the mystiques directory then edited header.php with the code

    <link rel=”shortcut icon” href=”/favicon.ico” />

    cleared cache .. tried firefox Chrome IE8
    Doesnt work !!
    all im seeing is the default wordpress logo up there

  9. liudas says:

    Thank you, for this great tutorial!

  10. hi i followed your guide to the letter but the little icons have completley disapeared they are still there but just invisable what did i do wrong??? can anyone help me

    thanks

  11. matt says:

    I wonder why my pop-up icons (Twitter, Facebook, etc) popup so slowly. They dont seem smooth compared to yours. Is this a setting I missed somewhere? See ItalyPhotoBlog.com to see it in action…Thanks!

    • Kerem says:

      Hi Matt, they seem the same to me on my computer. Do you have an underpowered computer that may be slowing down? Maybe the photos or the twitter widget may be slowing your browser.

      BTW, being an amateur photographer myself, I liked your photos very much! 🙂

  12. sirmus says:

    hi, thanks for the heads up. i am wondering something. i’m making my very own icons for navbar and just adding the custom url for each. but when it comes to the “add to favorites/bookmarks” icon, i’m all messed up with the javascript code. so is there any way to make that favorites/bookmarks icon to actually work? or is this just an utopia? thanks in advance.

  13. Tobi S says:

    Hi Kerem, i have a problem.
    i did evrything u posted, but i have now a white window on my homepage also in the wordpress administration. 🙁
    (sry for my bad english)

  14. Tobi S says:

    i also deletet evrything and put a backup at the ftp-server, but the problem is still there.

    • Kerem says:

      Hello Tobi,

      Well I can’t help as I don’t know the address of your site. But you should check the server logs for your site if you see a blank page. Most probably you added some wrong code to Advanced tab and now PHP is complaining. You can see the problem in the error logs for your server.

  15. Tobi S says:

    Ah thx, i found it!
    i deleted your code from my mysql and it works now…
    now i added in the “User CSS” this Code and ic have no icons:

    /* Extra navigation icons */
    #header a.nav-extra.rss{background:url(“/wp-content/uploads/nav-rss.png”) no-repeat scroll right top transparent}
    #header a.twitter{background:url(“/wp-content/uploads/nav-twitter.png”) no-repeat scroll right top transparent}
    #header a.linkedin{background:url(“/wp-content/uploads/nav-linkedin.png”) no-repeat scroll right top transparent}
    #header a.facebook{background:url(“/wordpress/wordpress/wp-content/uploads/nav-facebook.png”) no-repeat scroll right top transparent}
    #header p.nav-extra {top:-45px;height:54px;}
    #header a.nav-extra {height:60px;}

    if i save your code in “advanced”, my homepage will be white again.
    (sry for my bad english xD)

    • Kerem says:

      Yes, that’s because probably you are not copying and pasting the exact code from my page. As it is a PHP code, it directly interferes with the working of PHP and any tiny syntax error in the code you write there can disable your site completely. Are you sure you have followed the steps on the page properly?

  16. Tobi S says:

    oh sorry, my page is tophitshd.com

  17. Tobi S says:

    omg u did it!
    thank u sooo much, i love u!
    god i´m crying, thank u!
    hours of trying are over ^^

  18. Thanks for your tips. But I find plugin to do this so there is no necessary to edit code. You can add variety of icons using Extra Nav Icons to Mystique plugin. There is posts on my site about this plugin if u want then check:
    http://www.namase.com/wordpress-tips-and-tricks/add-extra-nav-icons-to-mystique.shtml

  19. I want help frm u how to remove default Share this posts.

Leave a Reply

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