Displaying the most recent WP post with special styling (PHP problem)

Question

I'm trying to display the title, image, exterp and category of the latest post on top of a blog page so it stands out. I alredy have css styles in place to make it look right I just need to show the right elements in the right blocks. The image will be the background of the second column.

I came up with this code but it gives me critical WP errors. Could you point me in the right direction / help me correct my mistake please.

Here is the code:

    function  test() {
    $args = array(
        'posts_per_page' => 1,
        'nopaging' => true
    );

    // set up new query
    $the_query = new WP_Query( $args );
    while ( $the_query->have_posts() ) : $the_query->the_post();
                        echo '<a href="' . get_permalink() . '">';
                        echo '<h5 class="uppercase regular">' . get_cat_name() . '</h5></a>';
                           echo '</div>';
                           echo '<div class="is-divider divider clearfix"></div>';
                           echo '<div class="text">';
                           echo '<a href="'. get_permalink() . '"><h2 class="m-font-size">' . get_the_title() . '</h2></a><p class="light">' . get_the_excerpt() . '</p>';
                           echo '</div>';
                           echo '</div>';
                           echo '</div>';
                           echo '</div>';
                           echo '</div>';
                           echo '</div>';
                           echo '</div>';
                           echo '</div>';
                           echo '</div>';

                           echo '<div class="col medium-6 large-6">';
                           echo '<div class="col-inner">';
                           echo '<div class="banner has-hover bnr-bl">';
                           echo '<div class="banner-inner fill">';
                           echo '<div class="banner-bg fill">';
           echo '<a href="' .  get_permalink() . '"><div class="bg fill bg-fill bg-loaded" style="background-image: url("' . get_the_post_thumbnail_url() . '");"></a>';
                           echo '</div>';
                           echo '</div>';
                           echo '</div>';
                           echo '</div>';
                           echo '</div>';
                           echo '</div>';
                           endwhile;
    // reset post data
    wp_reset_postdata();
}
add_shortcode( 'test', 'test' );

It slides in like this:

<div class="col medium-6 large-6">
<div class="col-inner">
<div class="banner has-hover">
<div class="banner-inner fill">
<div class="banner-bg fill">
<div class="bg fill bg-fill bg-loaded"></div>
</div>
<div class="banner-layers container">
<div class="fill banner-link"></div>
<div class="text-box banner-layer x50 md-x50 lg-x50 y50 md-y50 lg-y50 res-text">
<div class="text ">
<div class="text-inner text-center">
<div class="text">

[test]

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

Shortcode callback must return not echo
https://developer.wordpress.org/reference/functions/add_shortcode/

Note that the function called by the shortcode should never produce an output of any kind. Shortcode functions should return the text that is to be used to replace the shortcode.

So instead of echo you need to collect your post into some variable and return it

function  test() {
    $html = '';
    $args = array(
        'posts_per_page' => 1,
        'nopaging' => true
    );

    // set up new query
    $the_query = new WP_Query( $args );
    while ( $the_query->have_posts() ) : $the_query->the_post();
       $html .= '<a href="' . get_permalink() . '">';
       $html .= '<h5 class="uppercase regular">' . get_cat_name() . '</h5></a>';
       // ....and so on
       $html .= '</div>';
     endwhile;
    // reset post data
    wp_reset_postdata();
    
    return $html;
}
add_shortcode( 'test', 'test' );