Docs

[aispile]

This is my website. http://oncub.com

I have 2 custom made social icons now. Both are in .svg format.
I want to add these to the top nav area and the footer area.

When you look at the screenshot there are existing social options however I wish to add two more options for ‘blog.naver.com’ and ‘kakao.com/story’.

[aispile]

In the attached .zip file there are two .svg format icons

[Christopher]

Hi there,

Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Please add following code in child theme’s functions.php file :

// Social Output
// =============================================================================

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' );
    $github      = x_get_option( 'x_social_github' );
    $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' );

    $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="" aria-hidden="true"></i></a>'; endif;
      if ( $twitter )     : $output .= '<a href="' . $twitter     . '" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-x-icon="" aria-hidden="true"></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="" aria-hidden="true"></i></a>'; endif;
      if ( $linkedin )    : $output .= '<a href="' . $linkedin    . '" class="linkedin" title="LinkedIn" target="_blank"><i class="x-icon-linkedin-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $xing )        : $output .= '<a href="' . $xing        . '" class="xing" title="XING" target="_blank"><i class="x-icon-xing-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $foursquare )  : $output .= '<a href="' . $foursquare  . '" class="foursquare" title="Foursquare" target="_blank"><i class="x-icon-foursquare" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $youtube )     : $output .= '<a href="' . $youtube     . '" class="youtube" title="YouTube" target="_blank"><i class="x-icon-youtube-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $vimeo )       : $output .= '<a href="' . $vimeo       . '" class="vimeo" title="Vimeo" target="_blank"><i class="x-icon-vimeo-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $instagram )   : $output .= '<a href="' . $instagram   . '" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $pinterest )   : $output .= '<a href="' . $pinterest   . '" class="pinterest" title="Pinterest" target="_blank"><i class="x-icon-pinterest-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $dribbble )    : $output .= '<a href="' . $dribbble    . '" class="dribbble" title="Dribbble" target="_blank"><i class="x-icon-dribbble" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $flickr )      : $output .= '<a href="' . $flickr      . '" class="flickr" title="Flickr" target="_blank"><i class="x-icon-flickr" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $github )      : $output .= '<a href="' . $github      . '" class="github" title="GitHub" target="_blank"><i class="x-icon-github-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $behance )     : $output .= '<a href="' . $behance     . '" class="behance" title="Behance" target="_blank"><i class="x-icon-behance-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $tumblr )      : $output .= '<a href="' . $tumblr      . '" class="tumblr" title="Tumblr" target="_blank"><i class="x-icon-tumblr-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $whatsapp )    : $output .= '<a href="' . $whatsapp    . '" class="tumblr" title="Whatsapp" target="_blank"><i class="x-icon-whatsapp" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $soundcloud )  : $output .= '<a href="' . $soundcloud  . '" class="soundcloud" title="SoundCloud" target="_blank"><i class="x-icon-soundcloud" data-x-icon="" aria-hidden="true"></i></a>'; endif;
      if ( $rss )         : $output .= '<a href="' . $rss         . '" class="rss" title="RSS" target="_blank"><i class="x-icon-rss-square" data-x-icon="" aria-hidden="true"></i></a>'; endif;
       $output .= '<a href="#"><img src="Add image URL here"></a>';
       $output .= '<a href="#"><img src="Add image URL here"></a>';
    $output .= '</div>';

    echo $output;

  }
endif;

Replace Add image URL here with image path and # with profile URL in following lines of code :

  $output .= '<a href="#"><img src="Add image URL here"></a>';
       $output .= '<a href="#"><img src="Add image URL here"></a>';

Hope it helps.

[aispile]

I followed the instruction with the child theme. It work on top right nav area only. I do not have icons in footer area.
Please take a look at the files

[Thai]

Hi There,

To fix this issue, please add the following CSS:

.x-colophon.bottom .x-social-global a img {
    width: 43px;
    margin-top: -25px;
    height: 50px;
}

Hope it helps 🙂

[aispile]

Thank you so much!
I have one more question..

When mouse hover I want to switch the icon
from
‘http://oncub.com/wp-content/uploads/custom_svg/kakao_icon.svg’
to
‘http://oncub.com/wp-content/uploads/custom_svg/kakao_icon_green.svg’

[Rue Nel]

Hello There,

Thanks for updating us in! To switch the icon , please add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

(function($){
  $('a[href="http://oncub.com/wp-content/uploads/custom_svg/kakao_icon.svg"]').on({
    mouseenter: function () {
        $(this).attr('href', 'http://oncub.com/wp-content/uploads/custom_svg/kakao_icon_green.svg');
    },
    mouseleave: function () {
        $(this).attr('href', 'http://oncub.com/wp-content/uploads/custom_svg/kakao_icon.svg');
    }
  });
})(jQuery);

Hope this helps. Please let us know how it goes.

[aispile]

Hi, I applied the code but it does not work.

This is my entire code from custom Javascript.

jQuery(function($){
	$(document).ready(function(){
		$("#footer-logo").insertBefore("footer .x-social-global a.facebook");
    $("footer .x-colophon-content").insertAfter("footer .x-social-global");
	});
});

(function($){
  $('a[href="http://oncub.com/wp-content/uploads/custom_svg/kakao_icon.svg"]').on({
    mouseenter: function () {
        $(this).attr('href', 'http://oncub.com/wp-content/uploads/custom_svg/kakao_icon_green.svg');
    },
    mouseleave: function () {
        $(this).attr('href', 'http://oncub.com/wp-content/uploads/custom_svg/kakao_icon.svg');
    }
  });
})(jQuery);

[Paul R]

Hi,

Your custom icons are no longer showing in your footer.

Please make sure you have added the code provided in #1297104 in your child theme functions.php file.

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[aispile]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for updating in! Regretfully the given WP admin details is not working for us. It seems that the password is incorrect. I have check your site and it turns out that the child theme is not active. The js code will only work if the icon on the page container this: [href="http://oncub.com/wp-content/uploads/custom_svg/kakao_icon.svg"] is being displayed. If the icon is not present, no action will be taken.

Hope this helps.

[Author]

Posts