How to add extra social icons to Mystique Wordpress Theme
Posted on 14. Apr, 2010 by Dgrut in Themes, Tips n trik, Wordpress
Thanks to GeekRMX for this tutor on his post Añadir iconos sociales al tema Mystique.
Let’s see how to add social icons on the top menu bar.
These instructions are valid as of version 2.0 of Mystique to the current version (2.2.3) and is not necessary to make changes in theme files.
As an example, let’s put icons of Facebook, Twitter and RSS, replacing that Mystique has by default so that everyone has the same style.
First, add the following lines of code in “Mystique Options> User CSS.
#header a.nav-extra.rss{background:transparent url(/wp-content/uploads/mystique_icons/nav-rss.png) no-repeat top}
#header a.twitter{background:transparent url(/wp-content/uploads/mystique_icons/nav-twitter.png) no-repeat top}
#header a.facebook{background:transparent url(/wp-content/uploads/mystique_icons/nav-facebook.png) no-repeat top}
Alternatively, we can make the icons stand out a bit more above the navigation bar:
#header p.nav-extra {top:-40px;}
#header a.nav-extra {height:64px;}
Thus, we would have to go to the directory “/ wp-content/uploads/mystique_icons /” these images:
Now copy the following code in “Mystique Options> Advanced> User features, without deleting the first line (<? Php) that appears by default in the picture.
function mystique_custom_nav_icons($nav_extra)
{
$nav_extra = '<a class="nav-extra rss" title="Feed RSS" href="'.get_bloginfo('rss2_url').'"><span>Feed RSS</span></a>';
$nav_extra .= '<a class="nav-extra twitter" title="Follow me on Twitter" href="TWITTER_URL"><span>Follow me on Twitter</span></a>';
$nav_extra .= '<a class="nav-extra facebook" title="My profile on Facebook" href="FACEBOOK_URL"><span>My profile on Facebook</span></a>';
return $nav_extra;
}
add_action('mystique_navigation_extra', 'mystique_custom_nav_icons');
You should change FACEBOOK_URL and TWITTER_URL and the directions of your profiles.
With this code we would be adding the icons of Facebook, Twitter and RSS in that order from left to right, but we can modify the lines of the function to put the icons you need or change the order.
It is important to use the assignment operator (=) in the first line of the function, because if we use the concatenation (.=), icons are added to those that Mystique has by default instead of replacing them.
The following icons have been made by Mark N Hewitt , but Its tweaked some of them because they were not well trimmed.
You can download the file. Zip with 32 icons and you need to upload to your server :
|
Related posts:
Dave
Sep 1st, 2010
Hi, this was excellent! It really saved my ass! Thank you!
s-postal.ru
Jul 2nd, 2010
Написано конечно всё правильно, хотя и только поверхностно. В любом случае спасибо
Dgrut
Apr 30th, 2010
Did you have upload the mystique nav icon on /wp-content/uploads/mystique_icons/
gui
Apr 20th, 2010
gui´s last blog ..
Dgrut
Apr 18th, 2010
you welcome.
Jane Lambert
Apr 17th, 2010
Thanks for the info, I’ve been really keen to add the facebook icon to my website, and now I have.
Dgrut
Apr 16th, 2010
Please check if class=”nav-extra twitter” or else have added on the function.
because without it only text will display.
copy the function above completely, check the class have added correctly.
i have visit your blog,please change TWITTER_URL with your status url.
gui
Apr 16th, 2010
Hi there, same thing for me… using version 2.2.3, did the changes and only text is displayed… any clue?
thanks a lot
gui´s last blog ..
Dgrut
Apr 15th, 2010
I have the edit function, please replace with a new Function.
Cidadao
Apr 15th, 2010
Not working for me, only show text no icons.
Cidadao´s last blog ..Hello world!