Docs

[stinos]

Hi,

I Would like to include social media links + icons of platforms which are not by default included in the integrity footer/social menu. E.g.: 500px, Viewbug and maybe others in the future.

I would like them to be featured in the same way as the icons for Facebook/Instagram etc are featured with same spacing etc. I would also like to add them in my navbar, but from what I’ve found so far that is a bit more complicated with the integrity theme. So let’s start with the footer for now, I couldn’t find anything on that so far.

How can I achieve this? Do I need to replace one of the links/icons I don’t use under Customizer–>social or can I add it there somehow?

Looking forward to your reply,

Thanks

[Darshana]

Hi there,

Thanks for writing in! Please check the following post for a possible implementation (https://community.theme.co/forums/topic/want-to-add-custom-social-media-icons-how-to-do-it/page/2/#post-318884).

Hope that helps.

[stinos]

Hi,

Thanks for your quick reply!

Just to summarize. I need to:

1) Create Child Theme.
2) Add custom .php as mentioned on top of page you referred me to
3) Replace a certain Social Media icon/link with link/icon I would like to use with following code (example by you)

To replace Whatsapp with an email icon replace this line:

if ( $whatsapp ) : $output .= ‘<i class=”x-icon-whatsapp” data-x-icon=””></i>‘; endif;

With this:

if ( $whatsapp ) : $output .= ‘<i class=”x-icon-email” data-x-icon=””></i>‘; endif;

Few questions beforehand:

1) is this the correct order/flow?
2) I will read more about child themes, but do I need to re-do my whole website or will everything stay as it is?
3) How do I know if Themeco has the social media icons I need and how do I know what the code/location of that icon is?

Thanks!

[Nabeel A]

Hi again,

1. Yes this is the correct order. You will just need to activate the child theme after installation, then add the mentioned code.

2. Everything will stay the same you don’t need to re-do your whole site.

3. You can refer to this link to find all the X theme icons and it’s code http://demo.theme.co/integrity-1/shortcodes/icons/

Thanks!

[stinos]

Perfect thank you!

[Jade]

You’re welcome.

[mariacollado]

Hi, is this code : (https://community.theme.co/forums/topic/want-to-add-custom-social-media-icons-how-to-do-it/page/2/#post-318884).

// Custom Social Output
//
// Adding Yelp
// =============================================================================
 
if ( ! function_exists( 'x_social_global' ) ) :
  function x_social_global() {
 
    $facebook    = x_get_option( 'x_social_facebook', '' );
    $twitter     = x_get_option( 'x_social_twitter', '' );
    $google_plus = x_get_option( 'x_social_googleplus', '' );
    $linkedin    = x_get_option( 'x_social_linkedin', '' );
    $xing        = x_get_option( 'x_social_xing', '' );
    $foursquare  = x_get_option( 'x_social_foursquare', '' );
    $youtube     = x_get_option( 'x_social_youtube', '' );
    $vimeo       = x_get_option( 'x_social_vimeo', '' );
    $instagram   = x_get_option( 'x_social_instagram', '' );
    $pinterest   = x_get_option( 'x_social_pinterest', '' );
    $dribbble    = x_get_option( 'x_social_dribbble', '' );
    $flickr      = x_get_option( 'x_social_flickr', '' );
    $behance     = x_get_option( 'x_social_behance', '' );
    $tumblr      = x_get_option( 'x_social_tumblr', '' );
    $whatsapp    = x_get_option( 'x_social_whatsapp', '' );
    $soundcloud  = x_get_option( 'x_social_soundcloud', '' );
    $rss         = x_get_option( 'x_social_rss', '' );
 
    $yelp        = 'http://your-yelp-link-here/';
 
    $output = '<div class="x-social-global">';
 
      if ( $facebook )    : $output .= '<a href="' . $facebook    . '" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook-square" data-x-icon=""></i></a>'; endif;
      if ( $twitter )     : $output .= '<a href="' . $twitter     . '" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-x-icon=""></i></a>'; endif;
      if ( $google_plus ) : $output .= '<a href="' . $google_plus . '" class="google-plus" title="Google+" target="_blank"><i class="x-icon-google-plus-square" data-x-icon=""></i></a>'; endif;
      if ( $linkedin )    : $output .= '<a href="' . $linkedin    . '" class="linkedin" title="LinkedIn" target="_blank"><i class="x-icon-linkedin-square" data-x-icon=""></i></a>'; endif;
      if ( $xing )        : $output .= '<a href="' . $xing        . '" class="xing" title="XING" target="_blank"><i class="x-icon-xing-square" data-x-icon=""></i></a>'; endif;
      if ( $foursquare )  : $output .= '<a href="' . $foursquare  . '" class="foursquare" title="Foursquare" target="_blank"><i class="x-icon-foursquare" data-x-icon=""></i></a>'; endif;
      if ( $youtube )     : $output .= '<a href="' . $youtube     . '" class="youtube" title="YouTube" target="_blank"><i class="x-icon-youtube-square" data-x-icon=""></i></a>'; endif;
      if ( $vimeo )       : $output .= '<a href="' . $vimeo       . '" class="vimeo" title="Vimeo" target="_blank"><i class="x-icon-vimeo-square" data-x-icon=""></i></a>'; endif;
      if ( $instagram )   : $output .= '<a href="' . $instagram   . '" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram" data-x-icon=""></i></a>'; endif;
      if ( $pinterest )   : $output .= '<a href="' . $pinterest   . '" class="pinterest" title="Pinterest" target="_blank"><i class="x-icon-pinterest-square" data-x-icon=""></i></a>'; endif;
      if ( $dribbble )    : $output .= '<a href="' . $dribbble    . '" class="dribbble" title="Dribbble" target="_blank"><i class="x-icon-dribbble" data-x-icon=""></i></a>'; endif;
      if ( $flickr )      : $output .= '<a href="' . $flickr      . '" class="flickr" title="Flickr" target="_blank"><i class="x-icon-flickr" data-x-icon=""></i></a>'; endif;
      if ( $behance )     : $output .= '<a href="' . $behance     . '" class="behance" title="Behance" target="_blank"><i class="x-icon-behance-square" data-x-icon=""></i></a>'; endif;
      if ( $tumblr )      : $output .= '<a href="' . $tumblr      . '" class="tumblr" title="Tumblr" target="_blank"><i class="x-icon-tumblr-square" data-x-icon=""></i></a>'; endif;
      if ( $whatsapp )    : $output .= '<a href="' . $whatsapp    . '" class="tumblr" title="Whatsapp" target="_blank"><i class="x-icon-whatsapp" data-x-icon=""></i></a>'; endif;
      if ( $soundcloud )  : $output .= '<a href="' . $soundcloud  . '" class="soundcloud" title="SoundCloud" target="_blank"><i class="x-icon-soundcloud" data-x-icon=""></i></a>'; endif;
      if ( $rss )         : $output .= '<a href="' . $rss         . '" class="rss" title="RSS" target="_blank"><i class="x-icon-rss-square" data-x-icon=""></i></a>'; endif;
 
      if ( $yelp )         : $output .= '<a href="' . $yelp         . '" class="yelp" title="Yelp" target="_blank"><i class="x-icon-yelp" data-x-icon=""></i></a>'; endif;
 
    $output .= '</div>';
 
    echo $output;
 
  }
endif;

suposed to make appear the new social icon adition to the customizer? I have done it but nothing happens. Thanks in advanced!

[Rupok]

Hi @mariacollado

It’s a working example and it should add the Yelp icon. And you need to change the URL (http://your-yelp-link-here/) with your own.

Provide us your URL where you are trying to add this.

Thanks!

[mariacollado]

Hi Rupok, thanks for your answer. WHen you say it should add the Yelp Icon , do you mean it should be added also in the customizer menu, under the rest of the social media, under rss? I’m working locally so I will have to do it myself, but I have follow every step and it doesn’t work for me 🙁
Thanks

[Rupok]

Hi there,

It won’t add option to the Customzier as it’s just adding it within the code if you see

$yelp = 'http://your-yelp-link-here/';

So it’s actually hard-coded within the code since adding to option is pretty complex and need more complex coding.

However the code seems pretty correct and should work fine. You can update us when you move your site to a server. We’ll surely look into it to solve this for you.

Cheers!

[Author]

Posts