Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I have featured images shown for different posts of same category in a page in a specific div. I need to show the whole post related to this image in the same page in another div. I know i must use JavaScript in this. But i need some reference which i can use for this. Can anyone help me with this? I am using the following code to show the images

<?php
/*
Template Name: Meet The Team Template
*/
?>
<?php get_header(); ?>
<div id="meet_posts" class="narrowcolumn">
<?php 
    $recent = new WP_Query("cat=6&orderby=title&order=ASC"); 
    while($recent->have_posts()):$recent->the_post();
    $desc_values = get_post_custom_values("description");

?>
<div id="meetteam_featured_image">
    <a href="<?php the_permalink() ?>" rel="title">
        <?php
            if ( has_post_thumbnail() ) 
            { 
                the_post_thumbnail();
            }
        ?>
    </a>
</div>
<?php endwhile ?>
</div>

<?php get_footer(); ?>

Thanks in advance

share|improve this question
    
Do you want to show all posts of all images or any specific post of specific image? –  Vinod Dalvi Feb 28 '13 at 7:11
    
Specific post for specific image –  MidhuN Feb 28 '13 at 7:13
    
Do you want to show post on clicking on image on the fly or do you want to display it when page gets loaded? –  Vinod Dalvi Feb 28 '13 at 7:14
    
Clicking on the image –  MidhuN Feb 28 '13 at 7:15
    
coreretirementsolutions.com/Meettheteam.php. This is an example for what i need. –  MidhuN Feb 28 '13 at 7:16

1 Answer 1

up vote 2 down vote accepted

Replace your above code with this following code :

<?php /*
Template Name: Meet The Team Template
*/
?>
<?php get_header(); ?>
<div id="meet_posts" class="narrowcolumn">
<?php 
$recent = new WP_Query("cat=6&orderby=title&order=ASC"); 
while($recent->have_posts()):$recent->the_post();
$desc_values = get_post_custom_values("description");

?>
<div id="meetteam_featured_image" class="<?php the_ID(); ?> team_featured_image_<?php the_ID(); ?>">
<a href="<?php the_permalink() ?>" rel="title">
  <?php
    if ( has_post_thumbnail() )  { 
            the_post_thumbnail();
        }
    ?>
</a>
</div>
<?php endwhile ?>
<div id="image-post-info"></div>
</div>

<?php get_footer(); ?>

Add this following code in functions.php file :

add_action( 'wp_ajax_ajaxified_function', 'ajaxified_function' );
add_action( 'wp_ajax_nopriv_ajaxified_function', 'ajaxified_function' );
function ajaxified_function() {   
   $temp = get_post($_POST['post_id']);
   echo $temp->post_title.'<br/><br/>'.$temp->post_content;   
   die();
}   

Add this following code in your custom js file :

jQuery(document).ready(function (){       

 jQuery('#meetteam_featured_image a').on('click',function(event){         
 event.preventDefault();

 var post_id = jQuery(this).parent().attr('class');            
 post_id = post_id.split(" ");
 post_id = post_id[0];
 jQuery.ajax({  
   type: "POST",                  
   url:  'http://www.yoursitename.com/wp-admin/admin-ajax.php',  
   data: 'action=ajaxified_function&post_id='+post_id,    
   success: function (msg) {                                        
      jQuery('#image-post-info').html(msg);
   },
   error: function () {                  
      alert('Error');                    
   }  
  });           
  });       
});

Add custom js file by including following code in functions.php file :

function add_custom_scripts() {
wp_enqueue_script( 'custom-script',  get_stylesheet_directory_uri() .'/js/custom-scripts.js' );
}
add_action( 'wp_enqueue_scripts', 'add_custom_scripts' );
share|improve this answer
    
How will i add the custom js file to the code? –  MidhuN Feb 28 '13 at 8:04
    
Thank you very much Vinod. I got more than what I needed. I owe you one.!!!! I have been stuck with this from yesterday. Thanks a lot...!!!! –  MidhuN Feb 28 '13 at 9:13
    
Just more doubt. I want to change the class name which is named as <?php the_ID() ?> here. When i change it the content is not coming.What should i do to change it? –  MidhuN Feb 28 '13 at 11:08
    
You can change it but you will have to include post id in it and you will also have to change some code. Tell me why do you want to change class name? what class name you want to display? –  Vinod Dalvi Feb 28 '13 at 11:11
    
I just want to give some style to that. Thats why need to change it.name can be any random name ' –  MidhuN Feb 28 '13 at 11:47

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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