How to show posts of the same category on a page?

Question

I have created a custom page template to show all the categories in timeline fashion using this piece of code:

                <?php
                    $categories = get_categories();
                    foreach($categories as $category) {
                       echo '<div class="col-md-4 post-category"><a href="' . get_category_link($category->term_id) . '">' . $category->name . '</a></div>';
                    }
                ?>

To show all the posts from same category I edited archive.php and added this code in functions.php file:

function example_cats_related_post() {

$post_id = get_the_ID();
$cat_ids = array();
$categories = get_the_category( $post_id );

if(!empty($categories) && is_wp_error($categories)):
    foreach ($categories as $category):
        array_push($cat_ids, $category->term_id);
    endforeach;
endif;

$current_post_type = get_post_type($post_id);
$query_args = array( 

    'category__in'   => $cat_ids,
    'post_type'      => $current_post_type,
    'post__not_in'    => array($post_id),
    'posts_per_page'  => '3'


 );

$related_cats_post = new WP_Query( $query_args );

if($related_cats_post->have_posts()):
     while($related_cats_post->have_posts()): $related_cats_post->the_post(); ?>
        <ul>
            <li>
                <a href="<?php the_permalink(); ?>">
                    <?php the_title(); ?>
                </a>
                <?php the_content(); ?>
            </li>
        </ul>
    <?php endwhile;

    // Restore original Post Data
    wp_reset_postdata();
 endif;
}

and added this in to the archive.php file:

<?php example_cats_related_post() ?>

But the problem I am facing is it is displaying only one post whereas I need to show all the posts of the same category. Do I need to add functionexample_cats_related_post() in some other file?

I would really appreciate if anybody could help me with this.

Answer 1

This is the code I use to do what you request on the category page.

Enter this code in the archive.php file if you want to do the same job for the tags as well.

Otherwise enter this code on the file category.php:

<section class="section s1">

    <!-- Check if there is a posts to show -->
    <?php if ( have_posts() ) : ?>

        <!-- Set hero-->
        <div style="padding: 0px; background-position: 0% 20%;
        background-repeat: no-repeat;
        -webkit-background-size: cover,contain!important;
        height: 400px !important;
        width: 100%!important;
        max-width: 100%!important;
        margin: 0 auto!important;
        background-size: cover,contain!important; background-image: url(https://example.com/wp-content/uploads/Immagine-per-le-categorie.png)!important;" class="container archive_container">
        <div class="overlay" style="background-color: #000000; opacity: 0.6; height: 400px !important;width: 100%;top: 80px;left: 0;position: absolute; "></div>
        <div class="thumbnail-no-overlay" style="position: relative; padding: 80px 50px;">

        <!-- Mostra numero articoli, nome categoria e descrizione categoria -->
        <header class="header-categoria">

        <!-- Mostra numero articoli -->
        <h3 class="num-articoli" style="text-align: center; color:#FFF;">
        <?php 
        $category = get_queried_object();
        echo $category->count." ARTICOLI";
        ?>
        </h3>

        <!-- Mostra nome categoria -->
        <h1 style="text-align: center; color:#FFF; margin-top: 15px; margin-bottom: 20px;" class="archive-title"><?php single_cat_title(); ?></h1>


        <!-- Mostra descrizione della categoria -->
        <?php if ( category_description() ) : ?>
        <div style="text-align: center; color:#FFF; width: 50%; margin: 0 auto;" class="archive-meta"><?php echo category_description(); ?></div>
        <?php endif; ?>

        </header>

        </div>
        </div>

        <div class="contenuto" style="max-width: 590px; margin: 0 auto;">
            <!-- Inserisce barra di ricerca -->
            <div class="cerca" style="margin: 40px 0;"><?php get_search_form() ?></div>

            <div class="contenuto-articoli">
                <!-- Loop degli articoli -->
                <?php while ( have_posts() ) : the_post(); ?>
                <div class="cat_wrapper" style="margin-bottom: 25px; display: flex;">

                <!-- Thumbnail -->
                <div class="thumbnail" style="float: left; width: 61px; min-height: 61px; margin-right: 15px;">
                <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                <?php echo the_post_thumbnail(array(60,60)); ?>
                </a>
                </div>

                <!-- Titolo e Meta -->
                <div class="titolo-meta" style="max-width: 515px; border-bottom: 1px solid #b4becc; padding-bottom: 5px;">

                <!-- Titolo -->
                <h2 style="font-size: 20px; line-height: 1.35; margin:0 0 10px 0;"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

                <!-- Meta -->
                <div class="entry-content-meta">

                    <!-- Data -->
                    <time class="Data" style="margin-right: 25px; color: #a0a0a0; font-size: 12px; text-transform: uppercase;">
                    <?php the_time('j F, Y') ?>
                    </time>

                    <!-- Numero commenti -->
                    <span class="numero-commenti" style="margin-right: 25px; color: #a0a0a0; font-size: 12px; text-transform: uppercase;">
                    <?php comments_popup_link( '0 Commenti', '1 comment', '% comments', 'comments-link', 'Comments closed'); ?>
                    </span>

                    <!-- Autore articolo -->
                    <span class="autore" style="color: #a0a0a0; font-size: 12px; text-transform: uppercase;"> Scritto da <?php the_author_posts_link() ?>
                    </span>

                </div>
                </div>

                </div>

                <?php endwhile; ?>

                <!-- Impaginazione numerata -->
                <?php
                the_posts_pagination (array (
                    'mid_size' => 2,
                    'prev_text' => __ ('Indietro', 'textdomain'),
                    'next_text' => __ ('Avanti', 'dominio del testo'),
                ));?>

            </div>
        </div>

    <?php else: ?>
        <div style="padding: 0px; background-position: 0% 20%;
        background-repeat: no-repeat;
        -webkit-background-size: cover,contain!important;
        height: 400px !important;
        width: 100%!important;
        max-width: 100%!important;
        margin: 0 auto!important;
        background-size: cover,contain!important; background-image: url(https://example.com/wp-content/uploads/Immagine-per-le-categorie.png)!important;" class="container archive_container">
        <div class="overlay" style="background-color: #000000; opacity: 0.6; height: 400px !important;width: 100%;top: 0;left: 0;position: absolute; "></div>
        <div class="thumbnail-no-overlay" style="position: relative; padding: 80px 50px;">
        <h2 style="color:#FFF; text-align:center; font-size: 40px; font-weight: 700; margin-bottom: 40px;">Nessun post trovato</h2>
        <!-- Inserisce barra di ricerca -->
            <div class="cerca" style="margin-bottom: 40px; margin-top: 20px;"><?php get_search_form() ?></div>
        </div>
        </div>
    <?php endif; ?>

</section>

Obviously this is an example code that works for my personalization.

Please change it as you please.