WP_Query: Show 10 posts in date order, first three random

Try this:

// All the rendered HTML
$output="";

// The posts to exclude from the random query.
$exclude = [];

// The remaining non-random posts
$remaining = new WP_Query([ 
   'posts_per_page' => 7,
]);

// Run the remaining query first because we have to know what should be excluded in the random query.
if {$remaining->have_posts()) {
    while ($remaining->have_posts()) {
        $remaining->the_post();

        // Ensure that all remainig posts are excluded from the random query.
        $exclude[] = get_the_ID();

        ob_start();

        // Render the output, consider using a function for consistency.
        the_title();
        the_content();

        // Gather and append the ouput.
        $output .= ob_get_clean();
    }
    wp_reset_query();
}

// Setup the random query with the excluded posts array.
$random = new WP_Query([
    'posts_per_page' => 3,
    'exclude' => $exclude,
    'orderby' => 'rand',
]);

// Run the random query
if {$random->have_posts()) {
    while ($random->have_posts()) {
        $random->the_post();

        ob_start();

        // Again render the output, consider using a function for consistency.
        the_title();
        the_content();

        // Gather and prepend the ouput.
        $output = ob_get_clean() . $ouput;
    }
    wp_reset_query();
}

// Display the ouput
print $output;

You could also turn it around, first run the random query and store their ids to exclude in the remainig query what runs after the random query.

You need two loops because you can’t “include” 3 specific posts what are shown on top of the remaining posts. However you can try doing it with one loop what returns the posts in an incorrect order but than you use grid css to change the display order.

Related Posts: