Display first post of each category type (WordPress)

Question

I'm new to WordPress and trying to work in a bit of custom code into a portion of the home page that is meant to display the #1 trending post of each of three categories (white papers, article, and post). The code as is is just displaying (from what I can tell) the 3 most recent posts regardless of the category type:

$args = array('posts_per_page' => 3);
$loop2 = new WP_Query($args);
while ($loop2->have_posts()) : $loop2->the_post();
    $thumbnail = get_post_thumbnail_id(); $imageurl = wp_get_attachment_image_src($thumbnail,'theme-360x240');
    $class="";  $categories = get_the_category();
    if($categories[0]->slug == 'articles'){
        $class="article-icon";
    } else if($categories[0]->slug == 'videos' || $categories[0]->slug == 'webinars'){
        $class="video-icon";
    } else if($categories[0]->slug == 'white-papers' || $catgories[0]->slug == 'case-studies' || $categories[0]->slug == 'industry-information' || $categories[0]->slug == 'posts') {
        $class="whitepapers-icon";
    } else {
        $class="event-icon";
    }
    $posttype = get_post_type(get_the_ID()); ?>
    <div class="card radius shadowDepth1">
        <div class="card__image border-tlr-radius">

            <img src="<?php if(!empty($imageurl[0])) { echo $imageurl[0]; } else { echo 'http://placehold.it/360x205'; } ?>" alt="image" class="border-tlr-radius">
        </div>

        <div class="card__content card__padding">
            <div class="card__share"> <?php $iconurl = z_taxonomy_image_url($categories[0]->term_id); ?>
                <a <?php if($iconurl) { ?>style="background:url(<?php echo $iconurl; ?>);"<?php } ?> id="share" class="share-toggle share-icon <?php echo $class; ?>" href="<?php echo get_category_link($category[0]->term_id); ?>"></a>
            </div>

            <div class="card__meta">
                <?php if($posttype == 'tribe_events') { ?>
                    <a href="<?php echo home_url(); ?>/events">Events</a>
                <?php } else { ?>
                    <a href="<?php echo get_category_link($categories[0]->term_id); ?>"><?php echo $categories[0]->name; ?></a>
                <?php } ?>
            </div>

            <article class="card__article">
                <h2><a class="show_pop" href="<?php echo get_permalink(); ?>"><?php echo get_the_title(); ?></a></h2>

                <p><?php $content = get_the_content(); echo wp_trim_words($content,'15','...'); ?></p>
                <a class="show_pop read-more" href="<?php echo get_permalink(); ?>">Read More</a>
            </article>
        </div>
    </div>

None of this code was created by me, so I can't say how well-done it is or how reliable it is...but that is what's there.

I apologize if this is a dumb question--I've just never done much in WordPress! Any help would be appreciated.

Answer 1

First you have to get all the categories list then you have to loop it within wp_query and pass the term_id

<?php
//https://developer.wordpress.org/reference/functions/get_categories/
$categories = get_categories( array(
    'orderby' => 'name',
    'order'   => 'ASC',
    'slug'    => array('papers','article','post') //or you can use 'include' => array(1,2,3)
) );
foreach( $categories as $category ) {
    $args=array(
        'posts_per_page' => 1, 
        'cat' => $category->term_id,
    );
    //https://codex.wordpress.org/Class_Reference/WP_Query#Category_Parameters
    $loop2 = new WP_Query( $args );
    while ( $loop2->have_posts() ) : $loop2->the_post() ?>

            <div class="post">
                <?php the_title() ?>
                <!-- do whatever you else you want that you can do in a normal loop -->
            </div>  

    <?php endwhile 
}

Answer 2

Get categories as dinamic. This code work for me.

            <?php

            $do_not_duplicate = array();

            $categories = get_categories(
                array(
                    'orderby' => 'name',
                    'parent'  => 0
                )
            );
            $do_not_duplicate = array();

            foreach ( $categories as $category ) {
                $args = array(
                    'cat' => $category->term_id,
                    'orderby' =>'post_date',
                    'order' => 'DESC',
                    'post_type' => 'post',
                    'posts_per_page' => '1',

                );$query = new WP_Query( $args );

                if ( $query->have_posts() ) {
                    $posttype = get_post_type(get_the_ID());?>

                        <?php while ( $query->have_posts() ) {

                            $query->the_post();
                            $do_not_duplicate[] = $post->ID;
                            ?>                               

                        <div class="swiper-slide boxNews">
                            <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
                                <?php 
                                    if ( has_post_thumbnail() ) { 
                                        the_post_thumbnail( 'homepage-thumb', array( 'class' => '' ) );

                                        echo '<img class="topLink" src="';
                                        echo get_bloginfo('template_url').'/inc/assets/images/toplink.png';
                                        echo '" />';
                                    } 
                                ?>                                    
                                <h1><?php the_title(); ?></h1>                                    

                            </a>
                        </div> 


                        <?php } // end while ?>


                <?php } // end if

                // Use reset to restore original query.
                wp_reset_postdata();
            }

            ?>

Answer 3

After putting together bits and pieces from the WP API and various tutorials, this setup seems to work the way I need it to:

<?php
$do_not_duplicate = array();

$categories = get_categories(
    array(
        'include'=> '7,8,1'
    )
);
$do_not_duplicate = array();

foreach ( $categories as $category ) {
    $args = array(
        'cat' => $category->term_id,
        'orderby' =>'post_date',
        'order' => 'DESC',
        'post_type' => 'post',
        'posts_per_page' => '1',

    );$query = new WP_Query( $args );

    if ( $query->have_posts() ) {
        $posttype = get_post_type(get_the_ID());?>

            <?php while ( $query->have_posts() ) {

                $query->the_post();
                $do_not_duplicate[] = $post->ID;
                ?>
                <div class="card radius shadowDepth 1">
                    <article id="post-<?php the_ID(); ?>" <?php post_class( 'category-listing' ); ?>>
                        <!--This is supposed to get the thumbnail-->
                        <div class="card__image border-tlr-radius">
                            <?php

                                $thumbnail = get_post_thumbnail_id(); $imageurl = wp_get_attachment_image_src($thumbnail,'theme-360x240');
                                $class="";  $categories = get_the_category();
                                if($category->slug == 'articles'){
                                    $class="article-icon";
                                } else if($category->slug == 'white-papers' || $category->slug == 'posts') {
                                    $class="whitepapers-icon";
                                } else {
                                    $class="event-icon";
                                }
                            ?>

                            <?php if ( has_post_thumbnail() ) { ?>
                                <img src="<?php if(!empty($imageurl[0])) { echo $imageurl[0]; } else { echo 'http://placehold.it/360x205'; } ?>" alt="image" class="border-tlr-radius">

                            <?php } ?>
                        </div>
                        <div class="card__content card__padding">
                            <div class="card__share">
                                <?php $iconurl = z_taxonomy_image_url($category->term_id); ?>
                                <a <?php if($iconurl) { ?>style="background:url(<?php echo $iconurl; ?>);"<?php } ?> id="share" class="share-toggle share-icon <?php echo $class; ?>" href="<?php echo get_category_link($category->term_id); ?>"></a>
                            </div>
                            <div class="card__meta">

                                <a href="<?php echo get_category_link($category->term_id); ?>"><?php echo $category->name; ?></a>

                            </div>
                            <article class="card__article">
                                <h2>
                                    <a href="<?php echo get_permalink(); ?>"><?php echo get_the_title(); ?></a>
                                </h2>
                                <!--this is the exerpt of the post-->
                                <p><?php $content = get_the_content(); echo wp_trim_words($content,'15','...'); ?></p>
                                <a class="read-more" href="<?php echo get_permalink(); ?>">Read More</a>

                            </article>
                        </div>
                    </article>
                </div>
            <?php } // end while ?>


    <?php } // end if

    // Use reset to restore original query.
    wp_reset_postdata();
}

Answer 4

Just create three query/loop for each of the category:

$articles = new WP_Query(array('category_name' => 'articles', 'posts_per_page' => 3));
while ($articles->have_posts()) {
  ...
}
$articles = new WP_Query(array('posts_per_page' => 3));
while ($articles->have_posts()) {
  ...
}
$white_papers = new WP_Query(array('category_name' => 'white-papers', 'posts_per_page' => 3));
while ($white_papers->have_posts()) {
  ...
}