Adding a custom social profile link with icon in the header


Note :This snippet works only with the Classical style option. The Classical style option can be enabled in Appearance > Customize > Advanced > Theme Style. More about the theme style option here


Customizr comes with predefined social networks that you can easily activate from the customizer screen. You might want to add one that is not included natively in the theme. In this case, here’s an example of what you can do with Customizr, using the filters.

I highly recommend that you use a child theme and copy the following code in the functions.php file of this child theme.

  • In the first example, I add the Vimeo social network icon in the header. It uses the genericons font icon (genericons is a GPL  icon font used in Customizr).
  • In the second example, I use an image to add the Xing social network icon.

 

1 – Filtering (php code in functions.php)

In your functions.php copy/paste the following code. It simply adds a filter to the existing Customizr function that renders the social icons in header.

The code simply adds the  <a class="social-icon my-social-icon" href="#my_social_profile_link" title="Follow me" target="_blank"></a>  code to the original function. We have used the social-icon  class and create a new one : custom-icon .

There are also filters available for the social icons in footer and sidebars.

 

2 – Styling

Example 1 : with an icon (Vimeo icon)

In the custom css section, copy and paste the following css code. As we use the social-icon  class, the genericons font is already defined for the ::before  pseudo-class, we just have to add the content code.

Note : in the above code, there are two backslashes because you need to “escape” one if you copy it in the Custom CSS in customizer. You just need one backslash if you use this code in a regular stylesheet.

Note : Since Customizr 3.3.1 and Customizr-Pro 1.0.12 you cannot use quotes and double quotes in your custom-css box (due to new wordpress themes guidelines) anymore. Therefore you should put the CSS code in your child-theme style.css, without escaping the quotes.

Of course, you can easily change this code for another social network. If you don’t find a social icon in an icon font, just use an image as background in your ::before pseudo-class, like in the following example

 

Example 2 : with an image for the Xing social network

 

Hope this will help you guys!

 


Related Snippets you may also like


We can help you to implement this snippet

Coding is our job and we know WordPress inside and out. We can help you to customize your website with small chunks of code snippets like this one.

Send us your request and we'll get back to you quickly.



63 thoughts on “Adding a custom social profile link with icon in the header

  • Courtney

    Hey Customizr team,

    This worked almost perfectly for me, but there’s one snafu I cannot figure out. I’m adding a Periscope icon to my social icon bar, which, unfortunately there is not an icon for in the genericons. I’ve used the code above for adding a png (example 2 added to my child theme style sheet), but when it is displayed it has a slight reduction in opacity that is removed when I hover. Of course, I would like for this icon to match the others in being dark grey with orange upon hover, but I have no idea how to make that happen. The icon also seems to be a smidge off in alignment with the rest of the icon bar – dropped down and to the right a bit on the desktop, but a bit larger when viewed in a mobile browser. Any thoughts on how to fix would be appreciated. I could always just default to the genericon for location, which is close to periscope, but I would rather have it perfect as opposed to almost. Site in question: http://www.omfairy.com/

      • Courtney

        Thanks Menaka. This might indeed be the answer to all of my issues, but is a bit over my head. I would need more detail to enable this to help me. Is this the appropriate place to comment that in the future, when making updates to CustomizrPro, it would be great if there were an easier way to add custom social networks, and have those populate not just the social bar in the header, but all of them (I guess footer, not sure if there’s any place else, but one never knows in the future)? If not, could you point me in the direction of where such requests might be posted?

  • Lawrence

    Love the theme, but unfortunately upgraded to 3.2.8 today and the custom image icon now no longer works. Funnily enough, the custom image icon does work in the preview pane when I’m customizing settings such as Global Settings… Advanced Options, but not otherwise. Any help with how to make it work once again would be appreciated.

    • MiXiM

      Hi guys,
      got the same problem as Lawrence. I have only two custom social links added like told here:

      http://presscustomizr.com/snippet/adding-custom-social-profile-link-icon-header/

      I don’t configured any of the default ones in the theme, cause i don’t have any facebook etc.,
      only for XING.de and GULP.de …
      These custom icons appear NOT in the website, but appear in the wp-admin edit mode. As soon
      i add a default icon, my custom icons appear after the default icon, seems that the custom icons
      will be ignored as long as no default social icon is configured. Please fix soon, should be a simple fix.

      Thx in advance and kind regards, MiXiM

  • Sean K Young

    You guys need to update the version of Genericons that is included with the download. Yours does not include the newer icons (e.g. the handset)

    • Felix Riba

      Hi! I have the same issue as Lawrence (I see the logos on the preview and not on the real page) and I don’t understand what you mean by updating the Genericons. I would appreciate some help. This is my first post btw, and I am very happy with Customizr.

  • Joel

    Hi Nikeo,

    Awesome template and great function. However, like josh, I too would like to add two custom social links (well actually I’m adding the usual ones but using this function to write bespoke titles for each one). Complete noob when it comes to editing php so could someone please show the correct code for adding more than one social?

    Thanks.

  • Stefania

    I have the same “issues” of Josh. I would like to add 2 icons on the social.
    Thanks,
    Stefania

  • femi iromini

    Please I need help to add contact form to my website. Also how do i create signup for newsletter button on my website

  • Robin Morris

    Hi Nicolas,

    I’m trying to add a subscribe button with a text field for email address to the header next to the social icon for facebook. Is there a good way to do that?

    Thanks so much,
    Robin

  • Stacey

    Update! Resolved the issue by going through godaddy.com admin panel and editing the functions.php file there. Please remove my other comment! Noob at work here!

  • Stacey

    So, I tried adding the code you suggested for “1 – Filtering (php code in functions.php)” and it completely shut down my site. I keep getting the error:

    Fatal error: Cannot redeclare custom_social_in_header() (previously declared in /home/content/16/8621416/html/staceynation/wp-content/themes/customizr/functions.php:243) in /home/content/16/8621416/html/staceynation/wp-content/themes/customizr/functions.php on line 243

    Wow. Please help. I can no longer access my site even through my WordPress dashboard. Is there any way to restore my page and revert back to before I added your code?

  • Fadi

    Hi, I’loved this theme and very happy with it and I’d like to add “Log-in” to the front page maybe next to the social media icons. I’ve tried the methods above but non of them work for me. Simply Log In word and linked to a URL. Can you or any one help me with that.

    Thank you,
    Fadi

  • Greg

    Hi,
    I am personally loving this theme, I think it is great and almost endlessly customizable!
    Just one question though, can anyone tell me the filters needed if i want to add these icons into my sidebar and footer?
    An example of the whole code would be appreciated too.

    Thanks in advance!

  • Frank

    Hi everybody,

    So I followed these directions, uploaded my PNG file, I have the URL for the image ready to go. I am aware of where to paste all the code. However, it’s not showing up. Is it supposed to show up in the Customizr menu? Right away? Also, since I’m not using Dribbble, could I simply replace the icon image for that with my new one and put a custom URL for my social site? Again, I have an image, I have the code, I know where it goes, it’s not showing up. Can anybody help?

      • Frank

        Nicolas,

        Thank you very much. I had to play with the code snippet just a little bit (because I’m still developing my CSS skillz), however, it works beautifully. I ended up using this combination (in case any other learners out there were asking a similar question):

        In the functions.php file (Appearance>Editor), I pasted the first code snippet:

        add_filter ('tc_social_in_header' , 'vimeo_in_header');
        function vimeo_in_header($resp) {
        //class added if not resp
        $class = ('resp' == $resp) ? '':'span5'
        ?>
        <div class="social-block ">


        <?php
        }

        Then, in the Custom CSS section of the Customizr tab, I pasted this second code snippet:
        .custom-icon:before {
        content: url("URL OF THE IMAGE YOU WANT FOR THE ICON");
        width: 18px;
        height: 18px;
        display: inline-block;
        background: url('URL OF THE IMAGE YOU WANT FOR THE ICON') no-repeat;
        background-size: 18px 18px;
        }

        And the result is a super cool Grizzy Bear icon with a link to one of our university's student organization's sites: http://www.tedxoaklanduniversity.com

        Thanks again, and cheers!

  • Douwe Pieter

    Hi,

    I’m just beginning to use the Customizr theme on my site and made some changes thanks to the great work of you guys here!

    I’m wondering, and I can’t seem to find it here in the code snippets: Hw can I change the href of the social links? e.g.: from ‘follow me on Twitter’ to ‘follow us on Twitter’.

    I’m sure there’s a simple way to do this.

    Thanks in advance!

    PS: love the theme and the work you guy’s put into it!

  • Arno

    Hello Nicolas, my son and I have tried to integrate the Blogger icon. Unfortunately, the icon is not in the line.

    I try to show the 2. code here

    Help possible? Thank you! Arno

  • Jessica

    How do I change the order in which the social icons appear? Also, my new icon is appearing and it links correctly, but it’s way smaller than the others… any ideas?

  • Michael

    Hello at team of customizr and congratullations!I want to ask you if i can add another icon of network that there isn’t at genericons!i want to add odnoklassniki icon but i don’t know how to do it!Can i keep the genericons (facebook.google+,linkedin )and after that add another image from my gallery?There is a code to do that!Thank you!!!!

  • Eydie

    Just found the Customizr theme and I’m loving it. I tested it out on a dummy site I own, and everything worked perfectly. Then installed it on my regular website. Everything is good to go except the Social Icons. I added the links to the RSS, Facebook, Twitter, Linkedin, Google+, Pinterest, and Instagram. The only icons showing are the RSS and Google+. If you hover over the spaces between the RSS and Google+, I see the ALT text – but no icons. Can you advise me as to what the issue might be? Oh, and I have the same issue when I add the social links to the right sidebar. Eydie 🙂

  • Stamatis Kanatas

    hi to everyone!I want to thank the customizr’s team for all that they offer!I want to ask if there is a method that i can add vimeo icon without a child theme (because my site is ready and i didnt made i child theme)……Thank you for your time

      • Nicolas Post author

        Hi, I would not recommend it usually but you can just copy the php in the functions.php file of the theme and the CSS either in the custom CSS of customizer or the style.css file.

  • Denis Charron

    Nicolas. Loved the code. Worked perfectly (once I removed the second backslash from the vimeo genericon). Took me a bit longer to find the correct syntax to replace the genericon with an image. Just wanted to share my discovery with others:

    Just replace

    with

    Of course you’ll have to upload your “my-icon.png” media file and use the correct url for that file.

  • Chris

    Hi,
    to be honest, even with this explaination I was not able to add another social network. I want to add the german network Xing. Could you pls give me some help.
    Thx

  • Noah

    Actually I lied, this worked but broke a bunch of my styling and stopped allowing me to edit content on several pages without returning an error….let the newbie adventures continue!

  • Noah

    I would just like to make a newbie comment about how to use the code above. Everything works perfect…IF you know to add opening and closing tags to the php code you say to copy and paste to the child functions.php. Once I figured out to add at the end all was well! For any other non-coders this is what I used.

    <div class="social-block “>

    • serge Sira

      Noah, I am a WordPress newbie…really stuck on this simple issue…perhaps you can assist…I have created my first wordpress site (http://sergesiracommunityoutreach.com/) and there are social Icons at the top right…normally (i.e., in Web Builder) when you click the buttons such as facebook or LinkedIn, a facebook or LinkedIn page opens up which allows one to share with friends or connections or make public as one likes…the buttons do not seem to function like that in WordPress (I note that the Facebook like button works fine as it showed up in my facebook page that I had like the home page in quesiton..

      With thanks in advance, Serge Sira

Comments are closed.