Topic: Need to add a Houzz Icon and Link in the footer

Tagged: x

Author

Posts
July 25, 2016 at 1:34 pm #1102293

David H
Participant

I would like it to look the same as the Facebook and LinkedIn that I have up now. What do I need to do?

Do I just add to Custom CSS?



Site is on dev server: http://isdg-austin.com/tgbuilder

Any help would be appreciated, thank you, David

July 25, 2016 at 2:18 pm #1102356

Rahul
Moderator

Hey There,
Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you’re trying to do.
If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do. We’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks for understanding!

July 26, 2016 at 9:52 am #1103573

David H
Participant

Sure. In the footer of the website I have added Facebook, Pinterest and LinkedIn Social media links, I would also like to also add a Link for Houzz there as well but in the customizer there is nothing for Houzz in the social media section so what do I need to do to add a Houzz social media link in the footer like I have already done with the others. Does that make sense. See attachment as well. Thank you.

July 26, 2016 at 10:32 am #1103646
Thai
Moderator
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.

After that add this code at your child theme’s functions.php:
```
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"></a>'; endif;
 if ( $twitter ) : $output .= '<a href="' . $twitter . '" class="twitter" title="Twitter" target="_blank"></a>'; endif;
 if ( $google_plus ) : $output .= '<a href="' . $google_plus . '" class="google-plus" title="Google+" target="_blank"></a>'; endif;
 if ( $linkedin ) : $output .= '<a href="' . $linkedin . '" class="linkedin" title="LinkedIn" target="_blank"></a>'; endif;
 if ( $xing ) : $output .= '<a href="' . $xing . '" class="xing" title="XING" target="_blank"></a>'; endif;
 if ( $foursquare ) : $output .= '<a href="' . $foursquare . '" class="foursquare" title="Foursquare" target="_blank"></a>'; endif;
 if ( $youtube ) : $output .= '<a href="' . $youtube . '" class="youtube" title="YouTube" target="_blank"></a>'; endif;
 if ( $vimeo ) : $output .= '<a href="' . $vimeo . '" class="vimeo" title="Vimeo" target="_blank"></a>'; endif;
 if ( $instagram ) : $output .= '<a href="' . $instagram . '" class="instagram" title="Instagram" target="_blank"></a>'; endif;
 if ( $pinterest ) : $output .= '<a href="' . $pinterest . '" class="pinterest" title="Pinterest" target="_blank"></a>'; endif;
 if ( $dribbble ) : $output .= '<a href="' . $dribbble . '" class="dribbble" title="Dribbble" target="_blank"></a>'; endif;
 if ( $flickr ) : $output .= '<a href="' . $flickr . '" class="flickr" title="Flickr" target="_blank"></a>'; endif;
 if ( $github ) : $output .= '<a href="' . $github . '" class="github" title="GitHub" target="_blank"></a>'; endif;
 if ( $behance ) : $output .= '<a href="' . $behance . '" class="behance" title="Behance" target="_blank"></a>'; endif;
 if ( $tumblr ) : $output .= '<a href="' . $tumblr . '" class="tumblr" title="Tumblr" target="_blank"></a>'; endif;
 if ( $whatsapp ) : $output .= '<a href="' . $whatsapp . '" class="tumblr" title="Whatsapp" target="_blank"></a>'; endif;
 if ( $soundcloud ) : $output .= '<a href="' . $soundcloud . '" class="soundcloud" title="SoundCloud" target="_blank"></a>'; endif;
 if ( $rss ) : $output .= '<a href="' . $rss . '" class="rss" title="RSS" target="_blank"></a>'; endif;

 $output .= '<a href="http://www.houzz.com/"></a>';

 $output .= '</div>';

 echo $output;

}
```
You can replace http://www.houzz.com/ with your houzz URL.

Hope this helps.
July 26, 2016 at 11:02 am #1103735

David H
Participant

Thanks for your help. If I have any other questions I will let you know.

July 26, 2016 at 11:35 am #1103793

Joao
Moderator

Thanks David,

Have a great day.

Joao

August 3, 2016 at 2:53 pm #1115971

David H
Participant

Hi Joao,

I don’t know what to do you get the houzz icon to work in my footer I am sure I will need an image as well. What do I need to do so I can paste into javascript, I do not know java. Please help!

if ( ! function_exists( ‘x_social_global’ ) ) :
function x_social_global() {

$houzz = ‘http://www.houzz.com/pro/toddglowka/todd-glowka-builder-inc/’;

$output = ‘<div class=”x-social-global”>’;

if ( $houzz ) : $output .= ‘‘; endif;

$output .= ‘</div>’;

echo $output;

}
endif;

August 3, 2016 at 2:57 pm #1115976

David H
Participant

I also know there is no icon for Houzz as well in the Xtheme so what can I do to make the icon without having to use the Houzz logo maybe just a text H in the square.

August 3, 2016 at 3:02 pm #1115981

David H
Participant

What am I missing? Thanks for your help!

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’ );
$houzz = ‘http://www.houzz.com/pro/toddglowka/todd-glowka-builder-inc/’;

$output = ‘<div class=”x-social-global”>’;

if ( $facebook ) : $output .= ‘‘; endif;
if ( $twitter ) : $output .= ‘‘; endif;
if ( $google_plus ) : $output .= ‘‘; endif;
if ( $linkedin ) : $output .= ‘‘; endif;
if ( $xing ) : $output .= ‘‘; endif;
if ( $foursquare ) : $output .= ‘‘; endif;
if ( $youtube ) : $output .= ‘‘; endif;
if ( $vimeo ) : $output .= ‘‘; endif;
if ( $instagram ) : $output .= ‘‘; endif;
if ( $pinterest ) : $output .= ‘‘; endif;
if ( $dribbble ) : $output .= ‘‘; endif;
if ( $flickr ) : $output .= ‘‘; endif;
if ( $github ) : $output .= ‘‘; endif;
if ( $behance ) : $output .= ‘‘; endif;
if ( $tumblr ) : $output .= ‘‘; endif;
if ( $whatsapp ) : $output .= ‘‘; endif;
if ( $soundcloud ) : $output .= ‘‘; endif;
if ( $rss ) : $output .= ‘‘; endif;
if ( $houzz ) : $output .= ‘‘;

$output .= ‘</div>’;

echo $output;

}

August 3, 2016 at 5:19 pm #1116156

Jade
Moderator

Hi David,

The code Thai suggested in #1103646 should work fine as there is already a Houzz icon in font awesome which is included in the code.

But kindly provide us with your admin and FTP details so that we could check your current setup why the icon is loading displaying.

August 3, 2016 at 5:45 pm #1116189

David H
Participant

This reply has been marked as private.

August 3, 2016 at 7:49 pm #1116385

Jade
Moderator

Hi David,

Kindly go through the instructions in response #1103646 and make sure you follow them correctly.

The code provided in that response should not go to the Custom JS in the customizer. You will have to install and activate the child theme then login through FTP and access the file functions.php in wp-content/themes/x-child then add the code in the file.

Hope this makes sense.

August 4, 2016 at 10:04 am #1117362

David H
Participant

Thanks for the reply Jade, you all are always helpful.

August 4, 2016 at 1:08 pm #1117630

Jade
Moderator

You’re most welcome David. 🙂
Author

Posts

<script> jQuery(function($){ $("#no-reply-1102293 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>