function generate_gallery_tab_navigation($atts)
{
$args = array(
'taxonomy' => 'gallery_category',
'hide_empty' => -1,
'orderby' => 'name',
'order' => 'ASC'
);
$categories = get_categories($args);
ob_start(); ?>
<div class="project-tabs-wrapper">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<?php if (!empty ($categories)): ?>
<?php $nav_counter = 1; ?>
<?php foreach ($categories as $category): ?>
<li class="nav-item" role="presentation">
<button class="nav-link <?php echo ($nav_counter === 1) ? 'active' : ''; ?>"
id="pills-<?php echo $category->slug; ?>-tab" data-bs-toggle="pill"
data-bs-target="#pills-<?php echo $category->slug; ?>" type="button" role="tab"
aria-controls="pills-<?php echo $category->slug; ?>"
aria-selected="<?php echo ($nav_counter === 1) ? 'true' : 'false'; ?>">
<?php echo $category->name; ?>
</button>
</li>
<?php $nav_counter++; ?>
<?php endforeach; ?>
<?php endif; ?>
</ul>
</div>
<?php
return ob_get_clean();
}
add_shortcode('gallery_tab_navigation', 'generate_gallery_tab_navigation');
function generate_gallery_tab_content($atts)
{
$args = array(
'post_type' => 'gallery',
'posts_per_page' => -1,
'order' => 'ASC',
);
$gallery_posts = new WP_Query($args);
ob_start(); ?>
<div class="tab-content" id="pills-tabContent">
<?php if ($gallery_posts->have_posts()): ?>
<?php
$active_set = false;
while ($gallery_posts->have_posts()): $gallery_posts->the_post();
$categories = get_the_terms(get_the_ID(), 'gallery_category');
if ($categories): ?>
<?php foreach ($categories as $category): ?>
<div class="tab-pane fade <?php echo (!$active_set) ? 'show active' : ''; ?>"
id="pills-<?php echo $category->slug; ?>" role="tabpanel"
aria-labelledby="pills-<?php echo $category->slug; ?>-tab">
<div class="gallerys">
<div class="row">
<?php
$category_posts_args = array(
'post_type' => 'gallery',
'posts_per_page' => -1,
'tax_query' => array(
array(
'taxonomy' => 'gallery_category',
'field' => 'term_id',
'terms' => $category->term_id,
),
),
);
$category_posts = new WP_Query($category_posts_args);
if ($category_posts->have_posts()): ?>
<?php while ($category_posts->have_posts()): $category_posts->the_post(); ?>
<div class="col-md-4 gall-img">
<div class="gallery_inner">
<a class="fancybox" data-fancybox="gallery"
href="<?php echo wp_get_attachment_url(get_post_thumbnail_id()); ?>">
<?php the_post_thumbnail(); ?>
</a>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
</div>
<?php
$active_set = true;
?>
<?php endforeach; ?>
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
<?php
wp_reset_postdata();
return ob_get_clean();
}
add_shortcode('gallery_tab_content', 'generate_gallery_tab_content');
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter