Wordpress Loop and repeat with CTP - wordpress

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>
Go somewhere
</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>
Go somewhere
</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>
link Go somewhere
</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>
link Go somewhere
</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>
link Go somewhere
</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>
link Go somewhere
</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>
link Go somewhere
</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>
link Go somewhere
</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[] .= 'Go somewhere';
$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>%s</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');