How to Display News in a Timeline with Headline, Category, and Time?

Question

You can achieve this by creating Shortcodes for showing the the latest news and another to display all latest news of a given category.

Here is the shortcodes you can use:

[latest_news_timeline] => This is a shortcode to show the latest news.
[category_news] => This is a shortcode to display all latest news of a given category.

We need to add given code to functions.php file of the Theme.

<?php
/**
* This is to create shortcode to display the latest news.
*/
function show_latest_news_timeline() {
    $args = array(
        'post_type'      => 'post', // Here we can change post_type if you are using a custom post type.
        'posts_per_page' => 5,
        'orderby'        => 'date',
        'order'          => 'DESC'
    );

    $query  = new WP_Query($args);
    $output="<div class="news-timeline">";

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            $category      = get_the_category();
            $category_name = $category[0]->cat_name;
            $output       .= '<div class="news-item">';
            $output       .= '<h2>' . get_the_title() . '</h2>';
            $output       .= '<span class="news-meta">' . $category_name . ' &middot; ' . get_the_date() . '</span>';
            $output       .= '</div>';
        }
    } else {
        $output .= 'No news found.';
    }

    $output .= '</div>';
    wp_reset_postdata();
    return $output;
}

add_shortcode( 'latest_news_timeline', 'show_latest_news_timeline' );

/**
* This is to create shortcode to display all latest news of a given category.
*/
function show_category_news_data( $atts ) {
    $atts = shortcode_atts(
            array(
                'category' => ''
            ),
            $atts, 
            'category_news'
        );

    $args = array(
        'post_type'      => 'post', // Here we can change post_type if you are using a custom post type.
        'category_name'  => $atts['category'],
        'posts_per_page' => -1,
        'orderby'        => 'date',
        'order'          => 'DESC'
    );

    $query  = new WP_Query($args);
    $output="<div class="category-news">";

    if ( $query->have_posts() ) {
        while ( $query->have_posts() ) {
            $query->the_post();
            $category      = get_the_category();
            $category_name = $category[0]->cat_name;
            $output       .= '<div class="news-item">';
            $output       .= '<h2>' . get_the_title() . '</h2>';
            $output       .= '<span class="news-meta">' . $category_name . ' &middot; ' . get_the_date() . '</span>';
            $output       .= '</div>';
        }
    } else {
        $output .= 'No news found.';
    }

    $output .= '</div>';
    wp_reset_postdata();
    return $output;
}

add_shortcode( 'category_news', 'show_category_news_data' );

Also then you need to add given code to style.css file of your theme.

.category-news,.news-timeline{margin:20px 0}.news-item{margin-bottom:20px;padding:10px;border-bottom:1px solid #ccc}.news-item h2{margin:0 0 5px;font-size:20px}.news-meta{font-size:14px;color:#777}

Hope this should help you out.

Related Posts: