Docs

[njartist]

Hi there,

I know this questions has been asked before… I tried all the answers supplied in the threads but haven’t been able to make this work…

I’d like to add an additional icon on my top header by the social icons. It would be a contact button linking to an email address. The icon would be of an envelope. With the same rollover effects as the other icons.

My client’s website is: http://gerrymattia.com/
WordPress version 4.5
X Version: 4.4.2

Thanks,
Melissa

[Joao]

Hi Melissa,

I can see you said you tried all the solutions offered on the threads.

But please try to follow step-by-step this topic and it should work.

https://community.theme.co/forums/topic/add-email-button-to-top-bar-alongside-social-media-icons-integrity/

If it doesn´t please let us know.

Thanks,

Joao

[njartist]

Thank you for your reply. I’ve tried this solution but tried again this morning.

The result is all the social icons disappear on the top header bar.

Any other suggestions please?

http://gerrymattia.com/

Thanks,
Melissa

[Thai]

Hi Melissa,

Please replace your topbar content with this HTML:

<i class="x-icon x-icon-phone" data-x-icon=""></i> Phone: +1-914-762-1097&nbsp;&nbsp;|&nbsp;&nbsp;<i class="x-icon x-icon-mobile-phone" data-x-icon=""></i> Cell: +1-914-318-3890&nbsp;&nbsp;|&nbsp;&nbsp;<i class="x-icon x-icon-print" data-x-icon=""></i> Fax: +1-914-432-7311&nbsp;&nbsp;|&nbsp;&nbsp;<i class="x-icon x-icon-envelope-o" data-x-icon=""></i> Email: <a href="mailto:info@gerrymattia.com">info@gerrymattia.com</a>

Hope it helps 🙂

[njartist]

Hi Thai,

This is good stuff. And we’re going to use this. Thanks!

BUT… my question is: We’d like to add an additional icon to the right of the twitter and LinkedIn social icons. This would be a red button with an envelope icon for email contact.

I’ve attached a screenshot of what we hope to achieve.

Thanks again,
Melissa

[Friech]

Hi Melissa,

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 that open/edit your child theme’s functions.php file and paste the code below in there.

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', '' );
    $emailme     = 'info@gerrymattia.com';

    $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-email" 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 ( $emailme )     : $output .= '<a href="mailto:' . $emailme     . '" class="email" title="Email"><i class="x-icon-email" data-x-icon=""></i></a>'; endif;

    $output .= '</div>';

    echo $output;

  }
endif;

Paste it just below this line:

// Additional Functions
// =============================================================================

Hope it helps, Cheers!

[njartist]

Success! Thank you, Friech!

[Prasant Rai]

Happy to hear that. Feel free to ask us again. Have a great day! 🙂

[Author]

Posts