Wordpress Loop and repeat with CTP

Question

https://codepen.io/SitePoint/pen/GQoVey

I am using Tabs and Masonry found here.

I have a total of 4 categories. 4 categories 20 contents

I'm printing this field with wordpress without any problems.

<main role="main" class="grid">

  <div class="row">
    <div class="col-md">
      <div class="starter-template">
        
            <ul class="nav nav-tabs" id="myTab" role="tablist">
    
                
        
                
                
            <?php 
    $args = array(
        'type'                     => 'hizmetler', 
        'parent'                   => '',
        'orderby'                  => 'id',
        'order'                    => 'ASC',
        'hide_empty'               => 1,
        'hierarchical'             => 1,   
        'taxonomy'                 => 'kategoriler'  /* custom post type texonomy name */
    ); 
    $cats = get_categories($args);
    foreach ($cats as $cat) {           
        $cat_id= $cat->term_id;
        $cat_name= $cat->name; ?>
        
                
                <li class="tag is-dark">
            <a class="nav-link" id="contact-tab" data-toggle="tab" href="#<?php echo ''.$cat->term_id.''; ?>" role="tab" aria-controls="<?php echo ''.$cat->term_id.''; ?>" aria-selected="false">
                <?php echo ''.$cat->name.''; ?>
                </a></li>
            <?php wp_reset_postdata(); ?>

    <?php  } ?> 
        
        </ul>

I can get category name, id and link as CPT. The problem starts here.

I don't know how to loop this field.

 <div class="tab-content" id="myTabContent">
         
    <div class="tab-pane masonry-container fade show active" id="home" role="tabpanel" aria-labelledby="1-tab">
         <div class="card" style="width: 18rem;">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card with stretched link</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
      </div>
    </div>
           </div>
   

loop area;

<div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
  </div>

but this field must have a category name related to the parent div.

ex: id="home" example: <?php echo ''.$cat->term_id.''; ?>

this is what should be

 <div class="tab-pane masonry-container fade show active" id="EXAMPLE-CAT-ID-1" role="tabpanel" aria-labelledby="EXAMPLE-CAT-ID-1-tab">
                   
                   
           <div class="card" style="width: 18rem;">
      <img src="..." class="card-img-top" alt="...">
      
      <div class="card-body">
        <h5 class="card-title">POST 1 TİTLE (cat-1)</h5>
        <p class="card-text">POST 1 CONTENT</p>
        <p class="card-text">CAT 1 NAME</p> 
        <a href="#" class="btn btn-primary stretched-link">link Go somewhere</a>
      </div>
     
      <div class="card-body">
        <h5 class="card-title">POST 2 TİTLE (cat-1)</h5>
        <p class="card-text">POST 2 CONTENT</p>
        <p class="card-text">CAT 1 NAME</p> 
        <a href="#" class="btn btn-primary stretched-link">link Go somewhere</a>
      </div>
     
       <div class="card-body">
        <h5 class="card-title">POST 3 TİTLE (cat-1)</h5>
        <p class="card-text">POST 3 CONTENT</p>
        <p class="card-text">CAT 1 NAME</p> 
        <a href="#" class="btn btn-primary stretched-link">link Go somewhere</a>
      </div>
       
         
         
              </div>
         
         
              </div>
     
     
     
    <div class="tab-pane masonry-container fade show active" id="EXAMPLE-CAT-ID-2" role="tabpanel" aria-labelledby="EXAMPLE-CAT-ID-2-tab">
                   
                   
           <div class="card" style="width: 18rem;">
      <img src="..." class="card-img-top" alt="...">
      
      <div class="card-body">
        <h5 class="card-title">POST 1 TİTLE (cat-2)</h5>
        <p class="card-text">POST 1 CONTENT</p>
        <p class="card-text">CAT 2 NAME</p> 
        <a href="#" class="btn btn-primary stretched-link">link Go somewhere</a>
      </div>
     
      <div class="card-body">
        <h5 class="card-title">POST 2 TİTLE (cat-2)</h5>
        <p class="card-text">POST 2 CONTENT</p>
        <p class="card-text">CAT 2 NAME</p> 
        <a href="#" class="btn btn-primary stretched-link">link Go somewhere</a>
      </div>
     
       <div class="card-body">
        <h5 class="card-title">POST 3 TİTLE (cat-2)</h5>
        <p class="card-text">POST 3 CONTENT</p>
        <p class="card-text">CAT 2 NAME</p> 
        <a href="#" class="btn btn-primary stretched-link">link Go somewhere</a>
      </div>
       
         
         
              </div>

Answer 1

Place the following code in your functions.php file. You can use it as any shortcode - [tab_posts] or echo do_shortcode('[tab_posts]'); . Just keep in mind to fix html as you need to work your tabs.

function posts_per_tab($atts) {
    
    $output = array();

    //Setup our custom post args
    $args = array(
        'post_type'=>'post',
        'posts_per_page' => 3,
        'tax_query' => array(
            'taxonomy' => 'cat', // Change it with your taxonomy
            'field'    => 'id',
            'terms'    => $atts, 
        )
    );

    $results = new WP_Query($args);
    while($results->have_posts()): $results->the_post();
        $output[] .= '<div class="card-body">';
            $output[] .= '<h5 class="card-title">'.get_the_title().'</h5>';
            $output[] .= '<p class="card-text">'.get_the_content().'</p>';
            $output[] .= '<a href="'.get_the_permalink().'" class="btn btn-primary stretched-link">Go somewhere</a>';
        $output[] .= '</div>';
    endwhile;
    wp_reset_query();

    return $output;
}

function posts_in_category_tabs() {

    $tab_links   = array();
    $tab_contents = array();
    $tab_posts = array();
    $cargs = array(
        'type'                     => 'post', 
        'parent'                   => '',
        'orderby'                  => 'id',
        'order'                    => 'ASC',
        'hide_empty'               => 1,
        'hierarchical'             => 1,   
        'taxonomy'                 => 'category'
        ); 
    
    $cats = get_categories($cargs);
    
    if($cats):
        foreach($cats as $cat):

            //For each category build your tab 
            $tab_links[] = sprintf('<li><a href="#" class="cat-link">%s</a></li>',$cat->name);

            //We are executing 2nd loop in posts_per_tab function passing category id as parameter
            $tab_posts = posts_per_tab($cat->term_id);

            //For each tab push the posts per category 
            $tab_contents[] = sprintf('<div class="tabs-panel">%s</div>',implode( '', $tab_posts ));

        endforeach;
        wp_reset_postdata();
    endif;
    
    //Our navigation
    $tab_links = sprintf(
        '<ul class="tabs-nav">%s</ul>',
        implode( '', $tab_links ),implode( '', $tab_contents )
    );

    //Change container if needed
    return sprintf('<div class="tabs-wrapper">%s %s</div>',$tab_links,implode( '', $tab_contents ));
}
add_shortcode('tab_posts','posts_in_category_tabs');