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

I am working on a project where I need to display news articles in a timeline (Latest news). I want each news item to be structured as follows:

• The title of the news article • Category (e.g., “Asia,” “Europe”) & Posting time

I only want to show the 5 latest news articles in the timeline. Additionally, lower on the page, I want to display all the latest news of a given catergory (e.g. show all latest news for "Asia").

What would be the best way to achieve this layout? Are there any plugins or best practices for implementing a clean and efficient timeline with these elements?

Any tips would be be greatly appreciated! Thank you in advance!

I am working on a project where I need to display news articles in a timeline (Latest news). I want each news item to be structured as follows:

• The title of the news article • Category (e.g., “Asia,” “Europe”) & Posting time

I only want to show the 5 latest news articles in the timeline. Additionally, lower on the page, I want to display all the latest news of a given catergory (e.g. show all latest news for "Asia").

What would be the best way to achieve this layout? Are there any plugins or best practices for implementing a clean and efficient timeline with these elements?

Any tips would be be greatly appreciated! Thank you in advance!

• plugins
• custom-post-types
• plugin-development
• custom-taxonomy
• code

Share Improve this question asked Sep 26, 2024 at 0:22 code2goatcode2goat 1

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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:

1. [latest_news_timeline] => This is a shortcode to show the latest news.
2. [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.