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

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 1 No 2