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);
}
});
}
});
});