Fudge

  1. Home
  2. Docs
  3. Fudge
  4. Frequently Asked Questions
  5. How to Add Social Media Icons in the Session Lightbox Popup.

How to Add Social Media Icons in the Session Lightbox Popup.

The Lightbox is the popup window that shows when a particular session is clicked in the schedule widget.

If you want to add social media links for this particular session, follow this step by step tutorial:

 

1. Please don´t forget to take a backup of the files you are about to edit before any updates.

2. Login to your admin dashboard.

3. Navigate to Appearance->Editor. On the right side panel select Functions (functions.php).

4. Within this file (functions.php) you will find a function called fudge_ajax_get_session()

5. Replace this function with the new function code below:

function fudge_ajax_get_session() {
$ret = array();

if (isset($_POST[‘data-id’]) && ctype_digit($_POST[‘data-id’])) {
$session_id = intval($_POST[‘data-id’]);
$session = get_post($session_id);
$tracks = wp_get_post_terms($session_id, ‘session-track’, array(‘fields’ => ‘all’));
foreach ($tracks as &$track)
$track->color = fudge_get_term_meta(‘session-track-metas’, $track->term_id, ‘session_track_color’);
$locations = wp_get_post_terms($session_id, ‘session-location’, array(‘fields’ => ‘all’));
$date = get_post_meta($session_id, ‘date’, true);
$time = get_post_meta($session_id, ‘time’, true);
$end_time = get_post_meta($session_id, ‘end_time’, true);

if (!empty($time)) {
$time_parts = explode(‘:’, $time);
if (count($time_parts) == 2)
$time = date(get_option(“time_format”), mktime($time_parts[0], $time_parts[1], 0));
}
if (!empty($end_time)) {
$time_parts = explode(‘:’, $end_time);
if (count($time_parts) == 2)
$end_time = date(get_option(“time_format”), mktime($time_parts[0], $time_parts[1], 0));
}

$speakers = array();
$speakers_list = get_post_meta($session_id, ‘speakers_list’, true);
if (!empty($speakers_list)) {
foreach ($speakers_list as $speaker_id)
$speakers[] = array(
‘post_id’ => $speaker_id,
‘post_title’ => apply_filters(‘the_title’, get_the_title($speaker_id)),
‘post_image’ => get_the_post_thumbnail($speaker_id, array(60, 60)),
);
}
$options = get_option(‘fudge_theme_options’);
$socialMedia=”;
$socialMedia.='<div id=”lightBox_socialMedia”>’;
if ($options[‘fudge_email’] != ”)
$socialMedia.= ‘<a target=”_blank” class=”icon-email” title=”Email ‘ . get_bloginfo(‘title’) . ‘” href=”mailto:’ . $options[‘fudge_email’] . ‘”>Email</a>’;
$socialMedia.= ‘<a target=”_blank” class=”icon-rss” title=”Subscribe to ‘ . get_bloginfo(‘title’) . ‘ RSS Feed” href=”‘ . get_bloginfo(‘rss_url’) . ‘”>RSS</a>’;
if ($options[‘fudge_twitter’] != ”)
$socialMedia.= ‘<a target=”_blank” class=”icon-twitter” title=”Follow ‘ . get_bloginfo(‘title’) . ‘ on Twitter” href=”http://www.twitter.com/; . $options[‘fudge_twitter’] . ‘”>Twitter</a>’;
if ($options[‘fudge_facebook’] != ”)
$socialMedia.= ‘<a target=”_blank” class=”icon-facebook” title=”Like ‘ . get_bloginfo(‘title’) . ‘ on Facebook” href=”‘ . $options[‘fudge_facebook’] . ‘”>Facebook</a>’;
if ($options[‘fudge_flickr’] != ”)
$socialMedia.= ‘<a target=”_blank” class=”icon-flickr” title=”See photos from ‘ . get_bloginfo(‘title’) . ‘” href=”http://www.flickr.com/; . $options[‘fudge_flickr’] . ‘”>Flickr</a>’;
if ($options[‘fudge_linkedin’] != ”)
$socialMedia.= ‘<a target=”_blank” class=”icon-linkedin” title=”Connect with ‘ . get_bloginfo(‘title’) . ‘ on LinkedIn” href=”‘ . $options[‘fudge_linkedin’] . ‘”>LinkedIn</a>’;
if ($options[‘fudge_pinterest’] != ”)
$socialMedia.= ‘<a target=”_blank” class=”icon-pinterest” title=”View pins from ‘ . get_bloginfo(‘title’) . ‘” href=”http://www.pinterest.com/’; . $options[‘fudge_pinterest’] . ‘”>Pinterest</a>’;
$socialMedia.='</div”>’;
$ret = array(
‘post_title’ => apply_filters(‘the_title’, $session->post_title),
‘post_content’ => apply_filters(‘the_content’, $session->post_content),
‘tracks’ => $tracks,
‘location’ => !empty($locations) ? $locations[0]->name : ”,
‘date’ => !empty($date) ? date(get_option(‘date_format’), timestamp_fix($date)) : ”,
‘time’ => $time,
‘end_time’ => $end_time,
‘post_edit_link’ => is_user_logged_in() ? get_edit_post_link($session_id) : ”,
‘post_content’ => apply_filters(‘the_content’, $session->post_content),
‘social_media’=>$socialMedia,
‘speakers’ => $speakers
);
}

echo json_encode($ret);
die;
}

6. Update the file.

7. Open the file script.js (wp-content/theme/fudge/js/script.js)

8. Look for the first script function,

$(document).on(‘click’, ‘.btn-session’, function(e){

});

9. Replace this code

<div class=”session-details”>
<p><span>’ + fudge_script_vars.location + ‘</span>’ + data.location + ‘<p>
<p><span>’ + fudge_script_vars.date + ‘</span>’ + data.date + ‘<p>
<p><span>’ + fudge_script_vars.time + ‘</span>’ + data.time + end_time + ‘<p>
</div>
‘ + speakers

With the following

<div class=”session-details”>
<p><span>’ + fudge_script_vars.location + ‘</span>’ + data.location + ‘<p>
<p><span>’ + fudge_script_vars.date + ‘</span>’ + data.date + ‘<p>
<p><span>’ + fudge_script_vars.time + ‘</span>’ + data.time + end_time + ‘<p>
</div>
‘+data.social_media+ speakers

10. Update the file

11. Also add the following style in your style sheet before the Mobile style (/*****MEDIA QUERIES FOR MOBILE STYLES *****/)

#lightBox_socialMedia a{ background: url(‘../../images/schemes/default/icons-social-large.png’) no-repeat; display: inline-block; height: 78px; margin-right: 5px; text-indent: -999999px; width: 69px; }
#lightBox_socialMedia a.icon-rss{ background-position: -72px 0; }
#lightBox_socialMedia a.icon-twitter{ background-position: -144px 0; }
#lightBox_socialMedia a.icon-facebook { background-position: -216px 0; }
#lightBox_socialMedia a.icon-flickr{ background-position: -288px 0; }
#lightBox_socialMedia a.icon-linkedin{ background-position: -360px 0; }
#lightBox_socialMedia a.icon-pinterest{ background-position: -432px 0; }

That´s all, your social media icons will display in the session´s lightbox.

You can further customize the styling of the buttons with the help of your designer.

Was this article helpful to you? Yes No 1