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!


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

  • Reply

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

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

  • Reply

    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!

  • Reply

    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.

  • Reply
    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.

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

  • Reply

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

  • Reply

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

  • Reply

    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?

  • Reply

    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

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

  • Reply

    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?

      • Reply


        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!

  • Reply

    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!

  • Reply

    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,

  • Reply

    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?

  • Reply

    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!

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

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

  • Reply

    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?


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

  • Reply

    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.

    • Reply

      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

Leave a Comment

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

Please check the following point before adding your comment

  1. - Did you check that you have the latest version the theme installed ?
  2. - Did you read the documentation ?
  3. - If you think it could be useful, please check your system informations : Navigate to Appearance > About Customizr and go to the bottom of the page.
  4. - Did you check if your issue was already resolved ? Before posting a new topic, you'll want to make a quick research with our Google powered search tool below.

You may also use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">