Adding Icons to GK Social Icons

January 2013 WordPress Theme
GK User
Thu Jan 29, 2015 6:30 am
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
User avatar
Fresh Boarder

GK User
Thu Jan 29, 2015 9:35 am
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.
User avatar
Moderator

GK User
Thu Jan 29, 2015 6:22 pm
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
User avatar
Fresh Boarder

GK User
Fri Jan 30, 2015 10:18 am
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.
User avatar
Moderator

GK User
Mon Feb 02, 2015 4:08 pm
I figured out how to achieve what I was after by adding Youtube and Linked in icons to social_icons.png. Thanks.
User avatar
Fresh Boarder

GK User
Mon Apr 04, 2016 2:06 am
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
User avatar
Fresh Boarder

Joshua M
Mon Apr 04, 2016 7:29 am
Hi,

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


cron
Remember me
Register New Account
If you are old Gavick user, click HERE for steps to retrieve your account.