Listing all categories on a single page and all pages that belong to a category within a jquery slider in wordpress

1 comment

1. WordPress fetches posts / pages using the WP_Query object (and the nice thing is that it’s well documented and you have access to use it and customize it). I would recommend that you create a dedicated loop (using WP_Query) for each section. Let me show you how…

   Using “TORTE I KOLAČI” as the first example, just before you begin that section you can create a new loop like so:

   // WP_Query arguments allow you to filter out / sort which posts you want
   // In this example, I'm just telling WordPress to give me ONLY posts under the 
   // TORTE I KOLAČI category and NOT to use paging (so you get ALL posts in that 
   // category without limits)
   $args = array (
       'post_status' => 'publish',
       'category_name' => 'torte_i_kolaci',
       'nopaging' => true,
   );
   
   // The Query
   $custom_query = new WP_Query( $args );
   

   Note: The category_name is actually the slug of the category (and you can find that in the admin section under each category you’ve defined).

   Now it’s time to use the $custom_query.

   Each section will still have the wrapper code like so:

   <section id="teroteikolaci" data-stellar-background-ratio="0.5">
       <article class="torteikolaci" data-stellar-ratio="1.5">
           <h1>TORTE I KOLAČI</h1>
           <div class="wrapper">
               <ul class="slider">
   

   Except now you’ll switch into PHP and utilize functions such as the_post_thumbnail, get_the_title and get_permalink like so:

   <?php
   if ( $custom_query->have_posts() ) {
       while ( $custom_query->have_posts() ) {
           $custom_query->the_post();
   
               // begin your slider loops in here
               ?>
   
               <li class="slide">
                   <a href="<?php echo get_permalink(); ?>">
                       <?php the_post_thumbnail(); ?>
                       <div class="bubble">
                           <h5><?php echo get_the_title(); ?></h5>
                       </div>
                   </a>
               </li>
       }
   } else {
       // no posts found
   }
   
   /* Restore original Post Data */
   wp_reset_postdata();
   ?>
   

   And now that you’ve looped all your posts, it’s time to close out the wrapper…

               </ul>
           </div>
       </article>
   </section>
   

   Now you can repeat this pattern for each category you plan to list (SITNI KOLAČI, NAPICI, etc).

   Some Notes

   I’ve assumed that your posts are actually posts and not pages (for each item in the loop). If you need pages, you can alter your $args array like so:

   $args = array (
       'post_type' => 'page',
       'post_status' => 'publish',
       'category_name' => 'torte_i_kolaci',
       'nopaging' => true,
   );
   

   Dig into the WP_Query page on the codex to see how flexible these queries can be.

   You might want to make your code even more dynamic and easy to maintain by first fetching your categories and then looping those to output the “outer wrapper”. WordPress has a function called get_categories that I use all the time. get_categories also has it’s own $args array, so take a look at the docs to see what you can do with it. You would structure your code like so:

   $args = array(
       'orderby' => 'name',
       'order' => 'ASC'
   );
   $categories = get_categories($args);
   foreach($categories as $category) {
       ?>
   
   <section id="<?php echo $category->slug; ?>" data-stellar-background-ratio="0.5">
       <article class="<?php echo $category->slug; ?>" data-stellar-ratio="1.5">
           <h1><?php echo $category->name; ?></h1>
           <div class="wrapper">
               <ul class="slider">
   
       <?php
   }
   

   And now the cool part! You can drive all your inner loops (using WP_Query) from the $category->slug value like so…

   $args = array (
       'post_status' => 'publish',
       'category_name' => $category->slug,
       'nopaging' => true,
   );
   

   Putting It All Together

   So this is what the entire code snippet would look like (I added some comments for some of the braces that help you see where certain loops begin and end).

   <?php
   $args = array(
       'orderby' => 'name',
       'order' => 'ASC'
   );
   $categories = get_categories($args);
   foreach($categories as $category) {
       ?>
   
       <section id="<?php echo $category->slug; ?>" data-stellar-background-ratio="0.5">
           <article class="<?php echo $category->slug; ?>" data-stellar-ratio="1.5">
               <h1><?php echo $category->name; ?></h1>
               <div class="wrapper">
                   <ul class="slider">
   
                   <?php
                       $args = array (
                           'post_status' => 'publish',
                           'category_name' => $category->slug,
                           'nopaging' => true,
                       );
                       $custom_query = new WP_Query( $args );
   
                       if ( $custom_query->have_posts() ) {
                           while ( $custom_query->have_posts() ) {
                               $custom_query->the_post();
   
                                   // begin your slider loops in here
                                   ?>
   
                                       <li class="slide">
                                           <a href="<?php echo get_permalink(); ?>">
                                               <?php the_post_thumbnail(); ?>
                                               <div class="bubble">
                                                   <h5><?php echo get_the_title(); ?></h5>
                                               </div>
                                           </a>
                                       </li>
   
                       <?php } // end $custom_query loop
   
                       } else {
                           // no posts found
                       }
   
                       // reset the postdata
                       wp_reset_postdata();
                   ?>
   
                   </ul>
               </div>
           </article>
       </section>
   <?php
   } // end $categories loop
   ?>
   

   Hope this helps get you unstuck, have fun!

   Log in to Reply