I am building a WordPress site for a composer who has written over 200 pieces of music. Each is a custom post (work), organised by a hierarchical custom taxonomy/category (type
– being orchestral, vocal, etc).
I need to build a catalogue page in which all works are displayed in lists by type
:
Orchestral Works:
- Work
- Work
Vocal Works:
- Work
- Work
etc.
The user can add categories to the list, so I can't simply write a query for each category. The catalogue page needs to check the list dynamically.
So far so good. This can be achieved – and sorted the way I need – like this:
<?php
$cat_terms = get_terms(
array('type'),
array(
'hide_empty' => true,
'orderby' => 'name',
'order' => 'ASC',
'number' => 9999
)
);
if( $cat_terms ) :
foreach( $cat_terms as $term ) :
echo '<h5>'. $term->name .'</h5>';
?>
<?php $args = array(
'post_type' => 'work',
'posts_per_page' => 9999, // Assuming no-one is this prolific
'post_status' => 'publish',
'tax_query' => array(
array(
'taxonomy' => 'type',
'field' => 'slug',
'terms' => $term->slug,
),
),
'ignore_sticky_posts' => true,
'meta_key' => 'date',
'orderby' => 'meta_value',
'order' => 'DESC'
);
$_works = new WP_Query( $args );
if( $_works->have_posts() ) :
echo '<table>';
while( $_works->have_posts() ) : $_works->the_post(); ?>
<tr>
<td><?php the_field('date'); ?><td><?php the_title(); ?></td>
</tr>
<?php endwhile;
echo '</table>';
endif;
wp_reset_postdata();
endforeach;
endif;
?>
I then need to be able to display the content of the CPT (a small amount of data in a few custom fields) in another div
in the same page (and not link out to a single-work.php
template as would be more usual). This would be like a tabbed content effect – one posts' content displayed at a time, chosen from the category-based list on the page.
I could create this second part by loading everything and toggling visibility via jQuery but that would mean loading 200+ posts with the page and making them invisible, which strikes me as a terrible idea.
Is it possible to fetch/load the content of the selected post dynamically on click, so only the posts required are queried beyond the initial list? How would this be handled, and where would I begin with it?