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


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.

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!

 


About Nicolas

My name is Nicolas Guillaume (nikeo). I am the developer of the WordPress Customizr Theme. This website is a discussion platform, your comments are welcome!


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

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

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

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

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

  • 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

    with

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

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

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

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

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

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

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

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

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

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

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

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

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

Leave a Comment

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

Do you need to share some code? To display it in a nice looking syntax highlighter, wrap your code between the following tags (css code in this example) : <pre class="lang:css">YOUR CODE</pre> ( possible code language acronyms : css, php, xhtml, javascript, sql)

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=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">