I explain the situation I'm having here:

On my home page, I have a list of post being display.

I've code to have like a modal box to share this post. Basically, on each post you have a button share. On click, a box display with the sharing link to FB, twitter,etc. Exactly like this: http://www.joe.ie/ ( including the Fadein background appearing).

The problem is, It doesn't display the good post sharing... but all of them. I mean by this, when I click on the share button from post A, it should display the title of post A.

Right now, that I click on the share button of Post A, B or C. It show the box related to all the posts "A" "B" "C",etc ,etc.

To solve that I've add a post_ID class. However it's not changing anything - I suppose i need to add it in my jquery - but how to ? below is my jquery

<script type="text/javascript">

   $(document).ready(function() {

      $('a.share2').click(function() {




and my Loop where I call the post_id as a class:

<div id="top-story-left">
                        <?php if(get_option('mvp_featured_left') == 'Select a category:') { ?>
                        <?php } else { ?>
                            <span class="top-header-contain"><h3><?php echo get_option('mvp_featured_left'); ?></h3></span>
                            <ul class="top-stories">
                                <?php if (!empty($do_not_duplicate)) { $current_category = get_option('mvp_featured_left');
                                 $category_id = get_cat_ID($current_category); $recent = new WP_Query(array( 'cat' => $category_id, 'post__not_in' => $do_not_duplicate,
                                  'posts_per_page' => '2'  )); while($recent->have_posts()) : $recent->the_post(); $do_not_duplicate[] = $post->ID; if (isset($do_not_duplicate)) {  ?>

                                <li class="post-<?php the_ID(); ?>">
                                    <a href="<?php the_permalink(); ?>" rel="bookmark">
                                    <?php if (  (function_exists('has_post_thumbnail')) && (has_post_thumbnail())  ) { ?>
                                        <div class="top-story-image">
                                            <?php the_post_thumbnail('small-thumb'); ?>
                                            <?php if(get_post_meta($post->ID, "mvp_video_embed", true)): ?>
                                                <div class="video-button">
                                                    <img src="<?php echo get_template_directory_uri(); ?>/images/video-but.png" alt="<?php the_title(); ?>" />
                                            <?php endif; ?>
                                    <?php } ?>                                          <span class="time2" style="  font-size: 12px;
  padding-bottom: 20px;
  position: relative;
  bottom: 6px;
  color: #2E5894;font-family: 'Open Sans Condensed', serif !important;display:block;width:50px;margin:0 auto;padding-bottom:0px
}"><?php echo time_ago(); ?></span>

                                    <h2><?php the_title(); ?></h2>
                                        <div class="sm-middle">
                        <span class="social-middle" style="top:-5px;position:relative">

                            <div class="share-trigger" style="margin-bottom:50px">
                            <a class="share2" href="javascript:void(0)"><img width="25" height="25" style="float:left" src="http://mysite.co.uk/wp-content/uploads/2015/06/share.png">
                                <p style="top:5px;position:relative"> SHARE</p></a></div>

                            <div class="bg2" style="display:none">

                            <div style="display:none" class="icons2">
<span class="header-share-box"><p style="padding:10px;text-transform:uppercase">share this article<a class="share-close" 
    style="color:white;text-decoration:none;position:relative;display:none;z-index:999;float:right;top:-8px"  href="javascript:void(0)"> 
            <img width="30" height="30"  src="http://mysite.co.uk/wp-content/uploads/2015/06/close.png" /> </a></p>

<p style="color:black;font-weight:bold">Share the following article: "<?php the_title(); ?>" </p>

                                <a style="width: 22px;
  left: 0px;
  position: relative;top:10px"  href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>&text=<?php the_title(); ?>">
    <img width="50" heigh="50" src="http://mysite.co.uk/wp-content/uploads/2015/06/fb1.png" alt="Facebook" /></a>

<a style="  width: 22px;
  left: 10px;
  position: relative;top:10px" href="#" onclick="window.open('http://twitter.com/share?text=<?php the_title(); ?> -&url=<?php the_permalink() ?>', 'twitterShare', 'width=626,height=436'); return false;" title="Tweet This Post">
    <img width="50" heigh="50" src="http://mysite.co.uk/wp-content/uploads/2015/06/twitter.png" alt="Twitter" /></a>

                            <a style="width: 22px;
  left: 20px;
  position: relative;top:10px"  href="mailto:mymail@mail.com?subject=I woud like to share with you this article from X: <?php the_title(); ?>&body=I saw this article on X, and thought it may interrest you from X: <?php the_permalink() ?> ">
    <img width="50" heigh="50" src="http://mysite.co.uk/wp-content/uploads/2015/06/mail.png" alt="Mail" /></a>

                                <?php } endwhile; } ?>
                        <?php } ?>

ANy highlite woulb be really awesome, at least to know if im on thte right path :) :) :)

Thank you guys :)

  • Please rephrase the problem. Hard to understand.. – Sisir Jun 19 '15 at 8:54
  • Thank you, I have edit my post. THe Problem that I'm having is when I click on the share button from Post A. I should show the "Post A" modal box. right now, that I click on the Share button of Post "A" "B" or "C", it always show the same modal box "A". I suppose it's somethign related to my loop or my jquery on click event . . . Is it more clear this way ? – tibewww Jun 19 '15 at 9:14

This question is more of a js/jQuery is then WordPress. I am not going to post a working answer as It is hard to read the html given. And I think how you are doing it is not a effective solution. My answer should guide you towards better solution.

First of all you do not need to fade in all element inside the popup. Only fade in the parent and hide the parent element.

If popup html parent is like this:

<div class="popup" style="display:none">
    <!-- all child element here-->

Js for this should be like


For me I would only output the popup html once in the footer. Then dynamically update the popup html when clicked on a particular post element.

For example

<div id="popup" style="display:none">
    <a class="facebook" href="#">Share in facebook</a>
    <a class="twitter" href="#">Share in Twitter</a>

The link I will put inside the loop to popup initiate when clicked

<a class="share_link" href="#" data-permalink="<?php the_permalink(); ?>" data-id="<?php the_ID(); ?>" data-title="<?php the_title(); ?>">Click to Share</a>

Example js code to update popup when clicked in the share_link anchor element

    var $this = $(this);

    // gather data
    var permalink = $this.data('permalink');
    var id = $this.data('id');
    var title = $this.data('title');

    // update popup
    $popup = $('#popup');
    $popup.find('.facebook').attr('href', facebook_share_link(permalink, title));
    $popup.find('.twitter').attr('href', twitter_share_link(permalink, title));

   // show the popup

var facebook_share_link = function(permalink, title){
    // generate the appropriate link to facebook

var twitter_share_link = function(permalink, title){
    // generate the appropriate link to twitter

Hope this helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.