Adding a custom social profile link with icon in the header

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.

add_filter ('tc_social_in_header' , 'custom_social_in_header');
function custom_social_in_header() {
  //class
  $class =  apply_filters('tc_social_header_block_class', 'span5');
?>
  <div class="social-block <?php echo $class ?>">
    <?php if ( 0 != tc__f( '__get_option', 'tc_social_in_header') ) : ?>
      <?php echo tc__f( '__get_socials' ) ?>
        <a class="social-icon custom-icon" href="#my_social_profile_link" title="Follow me" target="_blank"></a>
      <?php endif; ?>
  </div><!--.social-block-->
<?php
}

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.

.custom-icon:before {
content: "\\f212";
}

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

.custom-icon:before {
	content: "";
	width: 18px;
	height: 18px;
	display: inline-block;
	background: url('https://upload.wikimedia.org/wikipedia/commons/b/bc/Xing-icon.png') no-repeat;
	background-size: 18px 18px;
}

Hope this will help you guys!