在 1 页中按不同类别显示帖子 - Wordpress 开发

Question

I have created custom post type, and I am dispalying posts in archive page, but I wanna display posts by different categories in 1 single page. Like this:

But my posts are currently like this

How can i achieve that? I have searched a lot but didn't find any solution to do this. So, that's why I am putting question here. Here is my code:

<section class="careerBlogs">
    <div class="container">
        <div class="row with-gutters">
                <?php


                    $args = array (
                        'post_type'    => array( 'career' ),
                        'post_status'  => array( 'publish' ),
                        'nopaging'     => true,
                        'order'        => 'ASC',
                        'orderby'      => 'menu_order',
                    );

                    $templates = new WP_Query( $args );

                    if ( $templates->have_posts() ) {
                        while ( $templates->have_posts() ) {
                                $templates->the_post(); global $post;

                        $customVars = get_post_meta($post->ID, 'custom_vars', true);
                        if(!empty($customVars)){
                            $isRemotely = $customVars['remotely'];
                        }

                        // Categories
                        $categories = get_the_terms( $post->ID, 'career_category' );
                        foreach( $categories as $category ) { ?>
                            <div class="col-xs-12">
                                <div class="careerBlogs--title">Open Positions in <?= $category->name; ?></div>
                            </div>
                        <?php } ?>

                        <div class="col-xl-12">
                            <div class="card mb-4">
                                <a href="<?= get_the_permalink(); ?>" class="card-link">
                                    <div class="card-info">
                                        <div class="card-title"><?= get_the_title(); ?></div>
                                        <div class="location">
                                            <span>Lahore</span>/<span><?= $isRemotely ? 'Remote' : '' ?></span>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>

                    <?php  } } else {
                        echo 'no posts to show';
                    }

                    wp_reset_postdata();

                ?>
        </div>
    </div>
</section>

It is in my archive-career.php page. Can you please help me to achieve that? I am stuck here

Answer 1

After struggling a lot, I have solved my problem with this:

<?php
        // I get my Categories
        $categories = get_terms('career_category' );
        $currentCatName = '';
        foreach( $categories as $category ) {  ?>

        <div class="row with-gutters">
            <div class="col-xs-12">
                <!-- Assiging category name -->
                <div class="careerBlogs--title">Open Positions in <?= $category->name; ?></div>
            </div>


    <?php

    $args = array (
        'post_type'    => array( 'career' ),
        'post_status'  => array( 'publish' ),

        // here with 'tax_query' i solved my problem to show posts 
        // by categories (not to show double category names)
        'tax_query' => array(
            array(
                'taxonomy' => 'career_category',
                'field'    => 'slug',
                'terms'    => $category->slug,
            ),
        ),
    );

    $templates = new WP_Query( $args );

    if ( $templates->have_posts() ) {
        while ( $templates->have_posts() ) {
            $templates->the_post(); global $post;

        ?>

        <div class="col-xl-12">
            <div class="card mb-4">
                <a href="<?= get_the_permalink(); ?>" class="card-link">
                    <div class="card-info">
                        <div class="card-title"><?= get_the_title(); ?></div>
                        <div class="location">
                            <span>Lahore</span>/<span>Remote</span>
                        </div>
                    </div>
                </a>
            </div>
        </div>

    <?php  } } else {
        echo 'no posts to show';
    } ?> 
    </div> 
    <?php }

    wp_reset_postdata();

?>

See: