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 am a little lost so I apologize if this question is vague and not organized well. I currently have a grid of thumbnails populated via Wordpress. I retrieve them by getting all the posts in a category and getting their thumbnails. I now want it so when you click on the thumbnails it pulls up the body of the post in a text box I have on the same page as the grid. I am looking for someone to point me in a direction as to how I get the post id when I click the post and then how I load the text box with the body text from that id.

GRID OF THUMBNAILS:

foreach  ( $categories as $category ) {
  $i = -1;
  echo '<div class="grid-row"><h2>' . $category->name . '</h2></div>';
  $args = array( 'posts_per_page' => -1, 'cat' => $category->term_id );
  $cat_posts = new WP_Query($args);
  if ( $cat_posts->have_posts() ) : while ( $cat_posts->have_posts() ) :
    $i++;
    $cat_posts->the_post();
    $face = get_field( 'face' );
    $name = get_field( 'fullname' );
    if ( $i % 6 == 0 ) echo '<div class="grid-row">';
    echo '<div class="obj">';
    echo '<div class="faceThumb">';
    echo wp_get_attachment_image($face);
    echo '</div><div class="name">' . $name . '</div></div>';
    if ( ($i % 6 == 5) || $i == ($cat_posts->post_count - 1) ) echo '</div>';
  endwhile; endif;
}
wp_reset_postdata();
?>

UPDATED FOR POST BELOW //index

        <div id="PersonBio">this is my bio</div>
          <div id="mainTextTitle">
                                      <?php the_title(); ?>

          </div>
              <div id="mainText">

                <ul class="faces">



<?php
$categories = get_categories( 'child_of=2' ); 

foreach  ( $categories as $category ) {
  $i = -1;
  echo '<div class="grid-row"><h2>' . $category->name . '</h2></div>';
  $args = array( 'posts_per_page' => -1, 'cat' => $category->term_id );
  $cat_posts = new WP_Query($args);
  if ( $cat_posts->have_posts() ) : while ( $cat_posts->have_posts() ) :
    $i++;
    $cat_posts->the_post();
    $face = get_field( 'face' );
    $name = get_field( 'fullname' );
    if ( $i % 6 == 0 ) echo '<div class="grid-row">';
    echo '<div class="obj" data-id="<?php the_ID(); ?>">';
    echo '<div class="faceThumb">';
    echo wp_get_attachment_image($face);
    echo '</div><div class="name">' . $name . '</div></div>';
    if ( ($i % 6 == 5) || $i == ($cat_posts->post_count - 1) ) echo '</div>';
  endwhile; endif;
}
wp_reset_postdata();
?>    </ul>




  </div>
    </div>
  </div>
</div>

//functions

add_action('wp_ajax_select_face_post', 'select_face_post');
add_action('wp_ajax_nopriv_select_face_post', 'select_face_post');
add_action('wp_enqueue_scripts', 'faces_posts_scripts');

function select_face_post () {
  error_reporting(0);
  if ( ! isset($_POST['postid']) || ! intval($_POST['postid']) ) die();
  if ( ! isset($_POST['nonce']) || ! wp_verify_nonce($_POST['nonce'],'postface') ) die();
  $post = get_post($_POST['postid']);
  if ( empty($post) || ! is_object($post) ) die();   
  header('Cache-Control: no-cache, must-revalidate');
  header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
  header('Content-type: application/json');
  echo json_encode( $post );
  die();
}

function faces_posts_scripts() {
  // replace 'all_faces' with the slug of page in which resides the code you posted
  if ( is_page('team') ) { 
    wp_register_script( 'postface', get_template_directory_uri . 'Team/postface.js', array('jquery'), NULL, true );     
    $url = admin_url('admin-ajax.php');
    $nonce = wp_create_nonce('postface');
    wp_localize_script( 'postface', 'postface_vars', array('ajaxurl' => $url, 'nonce' => $nonce) );
    wp_enqueue_script( 'postface' );
  }
}

//js

// postface.js
jQuery(document).ready(function($) {
  $(document).on('click', 'div.obj', function() {
    var selectedpost = $(this).data('id');
    if ( selectedpost > 0) {
       $.ajax({
        type: "POST",
        url: postface_vars.ajaxurl,
        dataType: 'json',
        data: { action: 'select_face_post', nonce: postface_vars.nonce, postid: selectedpost }
       }).done( function(data) {
        if (data.post_content) {
          // var id =  data.ID;
          // var title = data.post_title;
          $('#PersonBio').html(data.post_content);
        }
      });
    }
  });
});

enter image description here

share|improve this question

1 Answer 1

up vote 0 down vote accepted

You need ajax.

The html:

<div id="PersonBio"></div>
<div id="mainTextTitle"></div>

<div id="mainText">
  <ul class="faces">
  <?php
  $categories = get_categories();
  foreach  ( $categories as $category ) {
    $i = -1;
    echo '<div class="grid-row"><h2>' . $category->name . '</h2></div>';
    $args = array( 'posts_per_page' => -1, 'cat' => $category->term_id );
    $cat_posts = new WP_Query($args);
    if ( $cat_posts->have_posts() ) : while ( $cat_posts->have_posts() ) :
      $i++;
      $cat_posts->the_post();
      $face = get_field( 'face' );
      $name = get_field( 'fullname' );
      if ( $i % 6 == 0 ) echo '<div class="grid-row">';
      echo '<div class="obj" data-id="' . get_the_ID() . '">';
      echo '<div class="faceThumb">';
      echo wp_get_attachment_image($face);
      echo '</div><div class="name">' . $name . '</div></div>';
      if ( ($i % 6 == 5) || $i == ($cat_posts->post_count - 1) ) echo '</div>';
    endwhile; endif;
  }
  wp_reset_postdata();
  ?>
  </ul>
</div>

In functions.php

add_action('wp_ajax_select_face_post', 'select_face_post');
add_action('wp_ajax_nopriv_select_face_post', 'select_face_post');
add_action('wp_enqueue_scripts', 'faces_posts_scripts');

function select_face_post () {
  error_reporting(0);
  if ( ! isset($_POST['postid']) || ! intval($_POST['postid']) ) die();
  if ( ! isset($_POST['nonce']) || ! wp_verify_nonce($_POST['nonce'],'postface') ) die();
  $post = get_post($_POST['postid']);
  $face = get_field( 'face',  $post->ID );
  $name = get_field( 'fullname',  $post->ID );
  $post->face_field = $face;
  $post->name_field = $name;
  if ( empty($post) || ! is_object($post) ) die();   
  header('Cache-Control: no-cache, must-revalidate');
  header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
  header('Content-type: application/json');
  echo json_encode( $post );
  die();
}

function faces_posts_scripts() {
  if ( is_page('team') ) { 
    wp_register_script( 'postface', get_template_directory_uri() . '/Team/postface.js', array('jquery'), NULL, true );     
    $url = admin_url('admin-ajax.php');
    $nonce = wp_create_nonce('postface');
    wp_localize_script( 'postface', 'postface_vars', array('ajaxurl' => $url, 'nonce' => $nonce) );
    wp_enqueue_script( 'postface' );
  }
}

Then create a file called 'postface.js' and put there the following code.

jQuery(document).ready(function($) {
  $(document).on('click', 'div.obj', function() {
    var selectedpost = $(this).data('id');
    if ( selectedpost > 0) {
       $.ajax({
        type: "POST",
        url: postface_vars.ajaxurl,
        dataType: 'json',
        data: { action: 'select_face_post', nonce: postface_vars.nonce, postid: selectedpost }
       }).done( function(data) {
        if (data) {
          // var id =  data.ID;
          $('#mainTextTitle').html(data.name_field);
          $('#PersonBio').html(data.face_field + data.post_content);
        }
      });
    }
  });
});

For info see:

share|improve this answer
    
I've tried to get this to work for a while now but can't get it. Would you mind looking above at the code. –  BDGapps Aug 3 '13 at 21:50
    
@BDGapps not it works, there were 2 typo. –  G. M. Aug 3 '13 at 23:17
    
I still can't get it to work :( –  BDGapps Aug 4 '13 at 3:09
    
I've tried this exactly code and works perfectly. Only things that I change are the two get_field() calls, because this function not exists in WP, so I think is your custom function. Is possible that you are not calling wp_head() in your html <head> and/or wp_footer() before the end of html <body>? Look at it, and if they are, copy the entire html output (what you see doing 'view source' in the browser) and paste it in a pastebin and give me the link. –  G. M. Aug 4 '13 at 7:18
    
pastebin.com/tNbfEHYC –  BDGapps Aug 4 '13 at 14:15

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.