Adding twitch as social link - and sorting the icons

Sparkling
1

Hello,

i have two questions:

  • i would like to add an other icon/link to the list: twitch.tv is there a way to add this by hand or can only you do it?

  • is there a way to sort the social links?

Thx!

2

Hi @hurz,

I hope you are well today and thank you for your question.

You can achieve this by adding the following function sparkling_social in the functions.php file of your child theme and modifying it to add new icons and sort it.

/**
 * Display social links in footer and widgets if enabled
 */
function sparkling_social($force = false){
  if($force || of_get_option( 'footer_social' ) != 0){
    $services = array (
      'facebook'   => 'Facebook',
      'twitter'    => 'Twitter',
      'googleplus' => 'Google+',
      'youtube'    => 'Youtube',
      'vimeo'      => 'Vimeo',
      'linkedin'   => 'LinkedIn',
      'pinterest'  => 'Pinterest',
      'rss'        => 'RSS',
      'tumblr'     => 'Tumblr',
      'flickr'     => 'Flickr',
      'instagram'  => 'Instagram',
      'dribbble'   => 'Dribbble',
      'skype'      => 'Skype',
      'foursquare' => 'Foursquare',
      'soundcloud' => 'SoundCloud',
      'github'     => 'GitHub',
      'spotify'    => 'Spotify'
      );

    echo '<div class="social-icons">';

    foreach ( $services as $service => $name ) :

        $active[ $service ] = of_get_option ( 'social_'.$service );
        if ( $active[$service] ) { echo '<a href="'. esc_url( $active[$service] ) .'" title="'. esc_html__('Follow us on ','sparkling').$name.'" class="'. $service .'" target="_blank"><i class="social_icon fa fa-'.$service.'"></i></a>';}

    endforeach;
    echo '</div>';
  }

}

You can use the attached child theme that contains the above code so just use it and modify the code.

Best Regards,
Movin

3

When you say ‘modify the code’… do you just mean add 'twitch' =&gt; 'Twitch' );

Also, when you say Child Theme. is this required?

This isn’t working for me. More explanation is required, if you don’t mind.

4

Hi @yawnny,

Thank you for your questions.

When you say ‘modify the code’.. do you just mean add `’twitch’ => ‘Twitch’ );`
Yes you have to add this code along with some additional code that shows this social icon as displayed below. 
/**
 * Display social links in footer and widgets if enabled
 */
function sparkling_social($force = false){
  if($force || of_get_option( 'footer_social' ) != 0){
    $services = array (
      'facebook'   => 'Facebook',
      'twitter'    => 'Twitter',
      'googleplus' => 'Google+',
      'youtube'    => 'Youtube',
      'vimeo'      => 'Vimeo',
      'linkedin'   => 'LinkedIn',
      'pinterest'  => 'Pinterest',
      'rss'        => 'RSS',
      'tumblr'     => 'Tumblr',
      'flickr'     => 'Flickr',
      'instagram'  => 'Instagram',
      'dribbble'   => 'Dribbble',
      'skype'      => 'Skype',
      'foursquare' => 'Foursquare',
      'soundcloud' => 'SoundCloud',
      'github'     => 'GitHub',
      'spotify'    => 'Spotify',
      'twitch' => 'Twitch'
      );

    echo '<div class="social-icons">';

    foreach ( $services as $service => $name ) :

        $active[ $service ] = of_get_option ( 'social_'.$service );
        if ( $active[$service] ) { echo '<a href="'. esc_url( $active[$service] ) .'" title="'. esc_html__('Follow us on ','sparkling').$name.'" class="'. $service .'" target="_blank"><i class="social_icon fa fa-'.$service.'"></i></a>';}
        if ( $service == 'twitch' ) {
             echo '<a href="http://www.twitch.tv/" title="'. esc_html__('Follow us on ','sparkling').$name.'" class="'. $service .'" target="_blank"><i class="social_icon fa fa-'.$service.'"></i></a>'; 
        }
    endforeach;
    echo '</div>';
  }

}

Change the URL http://www.twitch.tv/ in the above code with your twitch URL.

Also, when you say Child Theme. is this required?

Yes the child theme is required to overwrite the function sparkling_social, if you change this function directly in the Sparkling theme then you have to make these changes again after theme updation as changes made in the theme files get lost on theme updation.

For your convenience i have attached the demo child theme of Sparkling theme that contains the above updated code.

Best Regards,
Movin

5

I still do not quite get how to do this. For which version is this? I would like to also do the same with Emails and mailto links. Also where can I get the email icon from?

6

Hi @jogerj,

The instructions provided here are for the older version of Sparkling theme in the latest version of the theme social icons are handled differently as described below.

  1. Create a menu like any other menu.
  2. Use the correct urls for created custom links menu items, so for twitter it must be twitter.com for facebook it must be facebook.com. Otherwise URLs won’t get recognized and you will get squares without icons.
  3. Set theme location for this menu as “Social Links”

For the email you have to add something like mailto:[email protected]?Subject=Hello%20again in the URL field of custom menu item.

Best Regards,
Movin

7

@movin
I have done that with a mailto link and all, however it only shows a button without the envelope icon. The other social network links work normally. My website is fivebulous.com

8

Hi @jogerj,

Sorry we have not yet released the theme version supporting email social icon. We will release it ASAP.

In the meanwhile try using the attached small plugin to display the email social icon.

Best Regards,
Movin