Displaying all posts by category and showing content on click

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.

enter image description here

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?

Include page name in posts slug

I have created a custom page template with option to select a tag from posts Categories to query the respective posts with that tag when the page is opened.

Page with name Trips are created, custom template selected and also category tag Trips is selected.

Page is then added to the menu under About Us menu item.

When I open the page site.com/about-us/trips/ A custom template are loaded with all the posts with term Trips.

When I open the post, the URL of the post is site.com/trips/post-slug where "trips" are the category tag slug.

Is there any option for those posts to include their "parent" page slugs like in this example it would be site.com/about-us/trips/post-slug ?
I could set the category base as ‘about-us’, but that is not a solution because there could be multiple pages with that custom template and another category tag selected f.e. site.com/about-us/interviews/post-slug

I am sorry, I have no code example for what I have done so far as I dont even know where to start 🙂

how to display count of total posts and for every category and having possibility to filter between dates and user

Hello i use simple plugin that count numbers of posts for every category and total but i was stuck in how to display count of posts between to dates and with authors.

<div class="wrap posts-and-users-stats">      <nav class="nav-tab-wrapper">         <?php echo "<h2> Nombres des articles </h2>" ?>      </nav>      <section>         <?php     $  categories = get_categories( array(     'orderby' => 'name',     'order'   => 'ASC' ) );           <table id="table-<?php echo esc_attr($  taxonomy); ?>" class="wp-list-table widefat">                         <tbody>                 <?php foreach ($  categories as $  category) { ?>                     <tr>                         <td><?php echo esc_html($  category->name ); ?></td>                         <td class="number"><?php echo esc_html($  category->count); ?></td>                     <?php } ?>                     </tr>             </tbody>                  </table>     </section>   </div> 

this the code i used for filter

<form method="post">             From : <input type="date" name="from">             To : <input type="date" name="to">             User :<?php wp_dropdown_users($  args); ?>             Catégories :<?php wp_dropdown_categories($  args); ?>             <input type="submit" name="submitbtn">         </form>     <?php          $  from = $  _POST['from'];     $  to = $  _POST['to'];     $  user = $  _POST['user'];     $  category = $  _POST['categories'];     print "From" . $  from . "\n";     print "To" . $  to . "\n";     print "User" . $  user . "\n"; 

How do I add a div class to the posts in a filter and not the entire filter element?

I am having some troubles with the Isotope filter gallery, as discussed in my Stackoverflow question here.

As per the first point of the accepted answer, I need to add the class .isotope, to the parent (the .row element) to make it work with URL hashes. Otherwise, it only works when you click on the filter links, as you can try on the live webpage.

Here is the element to which the user told me to add the class:

<div class="isotope row masonry" data-masonry-id="d2546a5a8aed79adf8c0b3b78a16b29f" style="position: relative; height: 969.6px;">

Notice the <div class ="isotope before row masonry bit? That is what I need to add.

However, I can only apply a custom class to the entire Posts element in Elementor. If I do that, it causes the JS to think that it needs to sort the whole grid itself and makes it disappear.

How do I target this specific row element?

Custom embed shows on posts but not on category pages

I added a custom embed handler for brightcove since one doesn’t exist.

It works fine on the post itself and the video loads, but just shows a linked url on category and blog roll pages. I am setting the post type to Video because I’d like that to be the featured image. Here’s what I have:

add_action( 'init', function() { wp_embed_register_handler(     'brightcove',     '#https?://players\.brightcove\.net/([^/]+)/([^/]+)/index.html\?videoId=([\d]+)#',     'wp_embed_handler_brightcove'  ); } );  function wp_embed_handler_brightcove($  matches, $  attr, $  url, $  rawattr) {    $  account  = esc_attr($  matches[ 1 ]); $  player   = esc_attr($  matches[ 2 ]); $  video_id = esc_attr($  matches[ 3 ]);  $  embed = '<div style="position: relative; display: block; max-width: 100%;"><div style="padding-top: 56.25%;"><iframe src="' . sprintf('https://players.brightcove.net/%1$  s/%2$  s/index.html?videoId=%3$  s',           $  account,           $  player,           $  video_id ) . '" allowfullscreen="" allow="encrypted-media" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;"></iframe></div></div>';    return apply_filters('embed_brightcove', $  embed, $  matches, $  attr, $  url, $  rawattr); 

}

Any input is appreciated. https://players.brightcove.net/1160438696001/SJaEAUSpl_default/index.html?videoId=4592378961001

How to fetch posts with offset in WordPress?

I have more than 100,000 posts and i fetch 20,000 posts in every page refresh, but now if i refresh the page i want to display new 20,000 posts rather than same.

Here is my Query

         $  args = array(             'post_type' => 'ebay_product',             'posts_per_page' => 20000,             'post_status' => array('publish'),             'orderby' => 'ID',             'order' => 'DESC'         ); 

Please help me to solve this issue. Any solution appreciated!