Preview:
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');

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