Adding a custom social profile link with icon in the header 53

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!


  • 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 ( 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

  • 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!

  • Chris

    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.

  • Chris Sullivan

    Google+ wants me to add the rel=”publisher” to my link to our google+ page in order to “verify” that the page is ours.


    • Chris Sullivan

      Any luck with this?

      • Nicolas

        Hi, there’s no easy way from admin to do that as of now. I am working on more flexibility for that.

        • Chris Sullivan

          Thank you anyways Nick. I like the capabilities if the theme, keep up the great work.


  • 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


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

    • Nicolas

      Thanks for sharing this feedback Denis!

  • MARY

    Hi I added the code and my page disappeared. I am a total newbie :-) How can I regret or reach my page again?

    • Nicolas

      Hi Mary, I would recommend to upload a clean new functions.php file to your server.

  • 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

    • Stamatis Kanatas

      I forget to told that i want to add vimeo icon in footer!

      • Nicolas

        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.

  • Stamatis Kanatas

    Thank you very much!

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

    • Nicolas

      Hi Eydie, that’s quite hard to say. Can you report this in the Customizr user forum on and join screenshots and a url if you can?

      • Eydie

        Doing that right now. Thanks, Eydie :)

      • Eydie

        Hi Nicolas, I couldn’t find where to join screenshots. Here’s the link to my post on the forum.

        I appreciate any help you can give me. It’s so odd that the social icons appear on my test site, but not on my business website.

        Eydie :)

  • 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 (,linkedin )and after that add another image from my gallery?There is a code to do that!Thank you!!!!

  • 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?

    • Nicolas

      Hi Jessica, I will write a snippet to change the icons order.
      About the icon size, hard to say without seeing the website.
      Stay tuned, cheers!

      • Jessica

        Sorry – forgot to include the screenshot link to go with my earlier reply:

      • Jessica

        Hi Nicolas,
        Any update on changing the order of the social icons? I appreciate your help and this theme! It’s been wonderful to work with!

  • Arno

    Hi Nicolas, I forgot to mention the link is available! Right from the WordPress icon is the link functional, but just no icon!

    Thank you Arno

  • 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

  • Arno

    Hello again
    sorry but the php I do not get wrapped!

    does not work.
    Thank you Arno

  • Douwe Pieter


    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!

    • Nicolas

      Hi Douwe, you might want to check the following freshly created snippet to change the social links titles.
      Thanks for using Customizr

  • 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?

    • Nicolas

      Hi Frank, I just updated this snippet with an example showing how to add an image icon.
      Hope this will help you!

      • Frank


        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 ">


        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:

        Thanks again, and cheers!

        • Nicolas

          It looks very good! Thanks for sharing

  • Greg

    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!

  • 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,

  • 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?

  • Stacey

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

  • Nicolas

    Hi Stacey, it seems that you have declare the same function twice.
    You might want to read those pages to fix your issue :
    Best and enjoy Customizr!

  • 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,

  • josh

    I already added one social icon… can I add two? Thanks Nicolas!

  • 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

    • Nicolas

      Hi, Customizr is fully compatible with Contact Form 7.
      Hope this helps!

  • Stefania

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

  • 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?


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

    • Nicolas

      Thanks for reporting this Sean.
      I will update it in the next release.

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

      I don’t configured any of the default ones in the theme, cause i don’t have any facebook etc.,
      only for and …
      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