Adding Icons to GK Social Icons

I am trying to add icons for Youtube and LinkedIn from the FontAwesome set to the GK Social Icons widget.

I have added a link to the CSS in my head:

Code: Select all

<link type="text/css" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"></link>

I have added .fa-youtube-square and .fa-linkedin-square to the appropriated places in style1.css and extensions.css.

I have modified the code in widgets.social.php (see below). The fields for the links to Youtube and LinkedIn are working in the backend of the widget. On the front end the icon for Pinterest is replacing both the Youtube and LinkedIn icons -- the links are working.

I've read that the FontAwesome icons need "<i></i>" tags for the class, for example:
<a href="http://facebook.com/"><i class="fa fa-facebook"></i>

I don't know enough PHP to get this to render via widgets.social.php. Also, I'm uncertain about where to add "i" in the additions to style1.css and extensions.css.

Here is what I've got for widgets.social.php:

Code: Select all

<?php

/**
 *
 * GK Social Widget class
 *
 **/

class GK_Social_Widget extends WP_Widget {
   /**
    *
    * Constructor
    *
    * @return void
    *
    **/
   function GK_Social_Widget() {
      $this->WP_Widget(
         'widget_gk_social_icons',
         __( 'GK Social Icons', GKTPLNAME ),
         array(
            'classname' => 'widget_gk_social_icons',
            'description' => __( 'Use this widget to show social links', GKTPLNAME)
         )
      );
      
      $this->alt_option_name = 'widget_gk_social_icons';
   }

   /**
    *
    * Outputs the HTML code of this widget.
    *
    * @param array An array of standard parameters for widgets in this theme
    * @param array An array of settings for this widget instance
    * @return void
    *
    **/
   function widget($args, $instance) {
      $cache = wp_cache_get('widget_gk_social_icons', 'widget');
      
      if(!is_array($cache)) {
         $cache = array();
      }

      if(!isset($args['widget_id'])) {
         $args['widget_id'] = null;
      }

      if(isset($cache[$args['widget_id']])) {
         echo $cache[$args['widget_id']];
         return;
      }

      ob_start();
      //
      extract($args, EXTR_SKIP);
      //
      $title = apply_filters('widget_title', empty($instance['title']) ? '' : $instance['title'], $instance, $this->id_base);
      $fb_link = empty($instance['fb_link']) ? '' : $instance['fb_link'];
      $twitter_link = empty($instance['twitter_link']) ? '' : $instance['twitter_link'];
      $gplus_link = empty($instance['gplus_link']) ? '' : $instance['gplus_link'];
      $pinterest_link = empty($instance['pinterest_link']) ? '' : $instance['pinterest_link'];
      $youtube_link = empty($instance['youtube_link']) ? '' : $instance['youtube_link'];
      $linkedin_link = empty($instance['linkedin_link']) ? '' : $instance['linkedin_link'];
      //
      if ($fb_link !== '' || $twitter_link !== '' || $gplus_link !== '' || $rss_link !== '') {
         echo $before_widget;
         echo $before_title;
         echo $title;
         echo $after_title;
         //
         if($twitter_link !== '') echo apply_filters('gk_social_twitter_link', '<a href="'.str_replace('&', '&amp;', $twitter_link).'" class="gk-twitter-icon">Twitter</a>');
         if($fb_link !== '') echo apply_filters('gk_social_fb_link', '<a href="'.str_replace('&', '&amp;', $fb_link).'" class="gk-facebook-icon">Facebook</a>');
         if($pinterest_link !== '') echo apply_filters('gk_social_pinterest_link', '<a href="'.str_replace('&', '&amp;', $pinterest_link).'" class="gk-pinterest-icon">Pinterest</a>');
         if($gplus_link !== '') echo apply_filters('gk_social_gplus_link', '<a href="'.str_replace('&', '&amp;', $gplus_link).'" class="gk-gplus-icon">Google+</a>');
         if($youtube_link !== '') echo apply_filters('gk_social_youtube', '<a href="'.str_replace('&', '&amp;', $youtube_link).'" class="fa fa-youtube-square">Youtube</a>');
         if($linkedin_link !== '') echo apply_filters('gk_social_linkedin_link', '<a href="'.str_replace('&', '&amp;', $linkedin_link).'" class="fa fa-linkedin-square">LinkedIn</a>');
         //
         echo $after_widget;
      }
      // save the cache results
      $cache[$args['widget_id']] = ob_get_flush();
      wp_cache_set('widget_gk_social_icons', $cache, 'widget');
   }

   /**
    *
    * Used in the back-end to update the module options
    *
    * @param array new instance of the widget settings
    * @param array old instance of the widget settings
    * @return updated instance of the widget settings
    *
    **/
   function update( $new_instance, $old_instance ) {
      $instance = $old_instance;
      $instance['title'] = strip_tags($new_instance['title']);
      $instance['fb_link'] = strip_tags($new_instance['fb_link']);
      $instance['twitter_link'] = strip_tags($new_instance['twitter_link']);
      $instance['gplus_link'] = strip_tags($new_instance['gplus_link']);
      $instance['pinterest_link'] = strip_tags($new_instance['pinterest_link']);
      $instance['youtube_link'] = strip_tags($new_instance['youtube_link']);
      $instance['linkedin_link'] = strip_tags($new_instance['linkedin_link']);

      $this->refresh_cache();

      $alloptions = wp_cache_get('alloptions', 'options');
      if(isset($alloptions['widget_gk_social_icons'])) {
         delete_option( 'widget_gk_social_icons' );
      }

      return $instance;
   }

   /**
    *
    * Refreshes the widget cache data
    *
    * @return void
    *
    **/

   function refresh_cache() {
      wp_cache_delete( 'widget_gk_social_icons', 'widget' );
   }

   /**
    *
    * Outputs the HTML code of the widget in the back-end
    *
    * @param array instance of the widget settings
    * @return void - HTML output
    *
    **/
   function form($instance) {
      $title = isset($instance['title']) ? esc_attr($instance['title']) : '';
      $fb_link = isset($instance['fb_link']) ? esc_attr($instance['fb_link']) : '';
      $twitter_link = isset($instance['twitter_link']) ? esc_attr($instance['twitter_link']) : '';
      $gplus_link = isset($instance['gplus_link']) ? esc_attr($instance['gplus_link']) : '';
      $pinterest_link = isset($instance['pinterest_link']) ? esc_attr($instance['pinterest_link']) : '';
      $youtube_link = isset($instance['youtube_link']) ? esc_attr($instance['youtube_link']) : '';
      $youtube_link = isset($instance['linkedin_link']) ? esc_attr($instance['linkedin_link']) : '';
   
   ?>
      <p>
         <label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php _e( 'Title:', GKTPLNAME ); ?></label>
         <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
      </p>
      
      <p>
         <label for="<?php echo esc_attr( $this->get_field_id( 'fb_link' ) ); ?>"><?php _e( 'Facebook link:', GKTPLNAME ); ?></label>
         <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'fb_link' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'fb_link' ) ); ?>" type="text" value="<?php echo esc_attr( $fb_link ); ?>" />
      </p>
      
      <p>
         <label for="<?php echo esc_attr( $this->get_field_id( 'twitter_link' ) ); ?>"><?php _e( 'Twitter link:', GKTPLNAME ); ?></label>
         <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'twitter_link' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'twitter_link' ) ); ?>" type="text" value="<?php echo esc_attr( $twitter_link ); ?>" />
      </p>
      
      <p>
         <label for="<?php echo esc_attr( $this->get_field_id( 'gplus_link' ) ); ?>"><?php _e( 'Google+ link:', GKTPLNAME ); ?></label>
         <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'gplus_link' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'gplus_link' ) ); ?>" type="text" value="<?php echo esc_attr( $gplus_link ); ?>" />
      </p>
      
      <p>
         <label for="<?php echo esc_attr( $this->get_field_id( 'pinterest_link' ) ); ?>"><?php _e( 'Pinterest link:', GKTPLNAME ); ?></label>
         <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'pinterest_link' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'pinterest_link' ) ); ?>" type="text" value="<?php echo esc_attr( $pinterest_link ); ?>" />
      </p>
      <p>
         <label for="<?php echo esc_attr( $this->get_field_id( 'youtube_link' ) ); ?>"><?php _e( 'YouTube link:', GKTPLNAME ); ?></label>
         <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'youtube_link' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'youtube_link' ) ); ?>" type="text" value="<?php echo esc_attr( $youtube_link ); ?>" />
      </p>
      <p>
         <label for="<?php echo esc_attr( $this->get_field_id( 'linkedin_link' ) ); ?>"><?php _e( 'LinkedIn link:', GKTPLNAME ); ?></label>
         <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'linkedin_link' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'linkedin_link' ) ); ?>" type="text" value="<?php echo esc_attr( $linkedin_link ); ?>" />
      </p>
   <?php
   }
}

// EOF

Hi,

Try to add this fragment into widgets.social.php file:

Code: Select all

if($youtube_link !== '') echo apply_filters('gk_social_youtube', '<a href="'.str_replace('&', '&amp;', $youtube_link).'" class="gk-social-icon"><i class="fa fa-youtube-square"></i></a>');


use this fragment for all icons/links, change only icon,filter names, but leave gk-social-icon class.

Now you can add this css:

Code: Select all

.gk-social-icon {
   font-size: 26px;
   margin:0 5px 0 0;
}


and should be ok.

I made the suggested changes but the Pinterest icon is still showing up instead of the Youtube and LinkedIn icons. I even went so far as to remove everything having to do with Pinterest in the PHP and CSSs. I don't think it's a browser issue since it's happening in all my browsers. I haven't been running a cache plugin. Does WP have a cache with it's standard install? If so, how do I clear it?

Here is what I have:

style1.css:

Code: Select all

.gk-facebook-icon,
.gk-twitter-icon,
.gk-gplus-icon,
.fa-youtube-square,
.fa-linkedin-square,
.gk-facebook-icon:active,
.gk-facebook-icon:focus,
.gk-facebook-icon:hover,
.gk-twitter-icon:active,
.gk-twitter-icon:focus,
.gk-twitter-icon:hover,
.gk-gplus-icon:active,
.gk-gplus-icon:focus,
.gk-gplus-icon:hover,
.fa-youtube-square:active,
.fa-youtube-square:focus,
.fa-youtube-square:hover,
.fa-linkedin-square:active,
.fa-linkedin-square:focus,
.fa-linkedin-square:hover
{
   background-image: url('../images/style1/social_icons.png');
}


extensions.css:

Code: Select all

/* 9.2. GK Social
==================================== */

#gk-social-icons {
   float: right;
   margin-left: 24px;
}

.gk-social-icon {
   font-size: 26px;
   margin:0 5px 0 0;
    }


.gk-facebook-icon,
.gk-twitter-icon,
.gk-gplus-icon,
.fa-youtube-square,
.fa-linkedin-square {
   display: block;
   float: left;
   height: 22px;
   line-height: 22px;
   padding: 0;
   text-indent: -9999px;
   -webkit-transition: background 0.3s cubic-bezier(.17, .67, .88, 1.25), color 0.2s linear;
      -moz-transition: background 0.3s cubic-bezier(.17, .67, .88, 1.25), color 0.2s linear;
         -o-transition: background 0.3s cubic-bezier(.17, .67, .88, 1.25), color 0.2s linear;
           transition: background 0.3s cubic-bezier(.17, .67, .88, 1.25), color 0.2s linear;
   width: 28px;
}

.gk-facebook-icon {
   background: transparent url('../images/style1/social_icons.png') no-repeat -28px 0;
}

.gk-twitter-icon {
   background: transparent url('../images/style1/social_icons.png') no-repeat 0 0;
}

.gk-gplus-icon {
   background: transparent url('../images/style1/social_icons.png') no-repeat -84px 0;
}

.fa-youtube-square {
   background: transparent url('../images/style1/social_icons.png') no-repeat -56px 0;
}

.fa-linkedin-square {
   background: transparent url('../images/style1/social_icons.png') no-repeat -56px 0;
}

.gk-facebook-icon:active,
.gk-facebook-icon:focus,
.gk-facebook-icon:hover {
   background: transparent url('../images/style1/social_icons.png') no-repeat -28px -22px;
}

.gk-twitter-icon:active,
.gk-twitter-icon:focus,
.gk-twitter-icon:hover {
   background: transparent url('../images/style1/social_icons.png') no-repeat 0 -22px;
}

.gk-gplus-icon:active,
.gk-gplus-icon:focus,
.gk-gplus-icon:hover {
   background: transparent url('../images/style1/social_icons.png') no-repeat -84px -22px;
}

.fa-youtube-square:active,
.fa-youtube-square:focus,
.fa-youtube-square:hover {
   background: transparent url('../images/style1/social_icons.png') no-repeat -56px -22px;
}

.fa-linkedin-square:active,
.fa-linkedin-square:focus,
.fa-linkedin-square:hover {
   background: transparent url('../images/style1/social_icons.png') no-repeat -56px -22px;
}


widgets.social.php:

Code: Select all

<?php

/**
 *
 * GK Social Widget class
 *
 **/

class GK_Social_Widget extends WP_Widget {
   /**
    *
    * Constructor
    *
    * @return void
    *
    **/
   function GK_Social_Widget() {
      $this->WP_Widget(
         'widget_gk_social_icons',
         __( 'GK Social Icons', GKTPLNAME ),
         array(
            'classname' => 'widget_gk_social_icons',
            'description' => __( 'Use this widget to show social links', GKTPLNAME)
         )
      );
      
      $this->alt_option_name = 'widget_gk_social_icons';
   }

   /**
    *
    * Outputs the HTML code of this widget.
    *
    * @param array An array of standard parameters for widgets in this theme
    * @param array An array of settings for this widget instance
    * @return void
    *
    **/
   function widget($args, $instance) {
      $cache = wp_cache_get('widget_gk_social_icons', 'widget');
      
      if(!is_array($cache)) {
         $cache = array();
      }

      if(!isset($args['widget_id'])) {
         $args['widget_id'] = null;
      }

      if(isset($cache[$args['widget_id']])) {
         echo $cache[$args['widget_id']];
         return;
      }

      ob_start();
      //
      extract($args, EXTR_SKIP);
      //
      $title = apply_filters('widget_title', empty($instance['title']) ? '' : $instance['title'], $instance, $this->id_base);
      $fb_link = empty($instance['fb_link']) ? '' : $instance['fb_link'];
      $twitter_link = empty($instance['twitter_link']) ? '' : $instance['twitter_link'];
      $gplus_link = empty($instance['gplus_link']) ? '' : $instance['gplus_link'];
      $youtube_link = empty($instance['youtube_link']) ? '' : $instance['youtube_link'];
      $linkedin_link = empty($instance['linkedin_link']) ? '' : $instance['linkedin_link'];
      //
      if ($fb_link !== '' || $twitter_link !== '' || $gplus_link !== '' || $rss_link !== '') {
         echo $before_widget;
         echo $before_title;
         echo $title;
         echo $after_title;
         //
         if($twitter_link !== '') echo apply_filters('gk_social_twitter', '<a href="'.str_replace('&', '&amp;', $twitter_link).'" class="gk-social-icon"><i class="gk-twitter-icon">Twitter</i></a>');
         if($fb_link !== '') echo apply_filters('gk_social_fb', '<a href="'.str_replace('&', '&amp;', $fb_link).'" class="gk-social-icon"><i class="gk-facebook-icon">Facebook</i></a>');
         if($gplus_link !== '') echo apply_filters('gk_social_gplus', '<a href="'.str_replace('&', '&amp;', $gplus_link).'" class="gk-social-icon"><i class="gk-gplus-icon">Google+</i></a>');
         if($youtube_link !== '') echo apply_filters('gk_social_youtube', '<a href="'.str_replace('&', '&amp;', $youtube_link).'" class="gk-social-icon"><i class="fa fa-youtube-square">YouTube</i></a>');
         if($linkedin_link !== '') echo apply_filters('gk_social_linkedin', '<a href="'.str_replace('&', '&amp;', $linkedin_link).'" class="gk-social-icon"><i class="fa fa-linkedin-square">LinkedIn</i></a>');
         //
         echo $after_widget;
      }
      // save the cache results
      $cache[$args['widget_id']] = ob_get_flush();
      wp_cache_set('widget_gk_social_icons', $cache, 'widget');
   }

   /**
    *
    * Used in the back-end to update the module options
    *
    * @param array new instance of the widget settings
    * @param array old instance of the widget settings
    * @return updated instance of the widget settings
    *
    **/
   function update( $new_instance, $old_instance ) {
      $instance = $old_instance;
      $instance['title'] = strip_tags($new_instance['title']);
      $instance['fb_link'] = strip_tags($new_instance['fb_link']);
      $instance['twitter_link'] = strip_tags($new_instance['twitter_link']);
      $instance['gplus_link'] = strip_tags($new_instance['gplus_link']);
      $instance['youtube_link'] = strip_tags($new_instance['youtube_link']);
      $instance['linkedin_link'] = strip_tags($new_instance['linkedin_link']);

      $this->refresh_cache();

      $alloptions = wp_cache_get('alloptions', 'options');
      if(isset($alloptions['widget_gk_social_icons'])) {
         delete_option( 'widget_gk_social_icons' );
      }

      return $instance;
   }

   /**
    *
    * Refreshes the widget cache data
    *
    * @return void
    *
    **/

   function refresh_cache() {
      wp_cache_delete( 'widget_gk_social_icons', 'widget' );
   }

   /**
    *
    * Outputs the HTML code of the widget in the back-end
    *
    * @param array instance of the widget settings
    * @return void - HTML output
    *
    **/
   function form($instance) {
      $title = isset($instance['title']) ? esc_attr($instance['title']) : '';
      $fb_link = isset($instance['fb_link']) ? esc_attr($instance['fb_link']) : '';
      $twitter_link = isset($instance['twitter_link']) ? esc_attr($instance['twitter_link']) : '';
      $gplus_link = isset($instance['gplus_link']) ? esc_attr($instance['gplus_link']) : '';
      $youtube_link = isset($instance['youtube_link']) ? esc_attr($instance['youtube_link']) : '';
      $linkedin_link = isset($instance['linkedin_link']) ? esc_attr($instance['linkedin_link']) : '';
   
   ?>
      <p>
         <label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php _e( 'Title:', GKTPLNAME ); ?></label>
         <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
      </p>
      
      <p>
         <label for="<?php echo esc_attr( $this->get_field_id( 'fb_link' ) ); ?>"><?php _e( 'Facebook link:', GKTPLNAME ); ?></label>
         <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'fb_link' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'fb_link' ) ); ?>" type="text" value="<?php echo esc_attr( $fb_link ); ?>" />
      </p>
      
      <p>
         <label for="<?php echo esc_attr( $this->get_field_id( 'twitter_link' ) ); ?>"><?php _e( 'Twitter link:', GKTPLNAME ); ?></label>
         <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'twitter_link' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'twitter_link' ) ); ?>" type="text" value="<?php echo esc_attr( $twitter_link ); ?>" />
      </p>
      
      <p>
         <label for="<?php echo esc_attr( $this->get_field_id( 'gplus_link' ) ); ?>"><?php _e( 'Google+ link:', GKTPLNAME ); ?></label>
         <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'gplus_link' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'gplus_link' ) ); ?>" type="text" value="<?php echo esc_attr( $gplus_link ); ?>" />
      </p>
      
      <p>
         <label for="<?php echo esc_attr( $this->get_field_id( 'youtube_link' ) ); ?>"><?php _e( 'YouTube link:', GKTPLNAME ); ?></label>
         <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'youtube_link' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'youtube_link' ) ); ?>" type="text" value="<?php echo esc_attr( $youtube_link ); ?>" />
      </p>
      <p>
         <label for="<?php echo esc_attr( $this->get_field_id( 'linkedin_link' ) ); ?>"><?php _e( 'LinkedIn link:', GKTPLNAME ); ?></label>
         <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'linkedin_link' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'linkedin_link' ) ); ?>" type="text" value="<?php echo esc_attr( $linkedin_link ); ?>" />
      </p>
   <?php
   }
}

// EOF

Please change ALL links and icons to Font Awesome:
This fragment i.e.:

Code: Select all

if($twitter_link !== '') echo apply_filters('gk_social_twitter', '<a href="'.str_replace('&', '&amp;', $twitter_link).'" class="gk-social-icon"><i class="gk-twitter-icon">Twitter</i></a>');


change to :

Code: Select all

if($twitter_link !== '') echo apply_filters('gk_social_twitter', '<a href="'.str_replace('&', '&amp;', $twitter_link).'" class="gk-social-icon"><i class="fa fa-don't remember.."></i></a>');


to display all icons from Font Awesome, then you can remove all css connected with the old icons and use only this one:

Code: Select all


.gk-social-icon {
   font-size: 26px;
   margin:0 5px 0 0;
}


If that won't help, please send me a PM with FTP and backend access to your website and i'll try to help.

I figured out how to achieve what I was after by adding Youtube and Linked in icons to social_icons.png. Thanks.

Hi

Do you have any social icons for instagram? I would like to add it on front page next to other top 4 social icons?

site: www.gazeteci.com.tr

Hi,

No, the instagram icon is not included, but you can add and use Font Awesome icons.
https://fortawesome.github.io/Font-Awesome/icons/