Query Loop – Inline items

In WordPress, when using the Query Loop block in the Block Editor, the default behavior is that each item (post) appears on a new line. However, if you want the items to appear inline (following the flow of the previous item instead of starting on a new line), you can achieve this by customizing the layout using CSS.

---

Solution: Use Custom CSS

1. Select the Query Loop block in the WordPress editor.
2. Inside the Query Loop, choose the inner container (e.g., Post Template).
3. Add a custom class to the “Additional CSS Class” field under the “Advanced” settings.
   • Example: Add a class like inline-query-loop
4. Apply custom CSS to make the posts flow inline.

CSS to Add

You can add this CSS in the Customizer → Additional CSS or in your theme’s CSS file:

.inline-query-loop {
    display: flex;
    flex-wrap: wrap;
    gap: 5px; /* Adjust the space between posts */
    list-style: none; /* Remove default list styling */
    padding: 0;
    margin: 0;
}

.inline-query-loop .wp-block-post {
    display: inline-block;
    white-space: nowrap; /* Ensures text does not wrap inside */
}

---

Alternative: Use a Grid Layout

If you want a structured layout rather than pure inline elements:

.inline-query-loop .wp-block-post-template {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Adjust width */
    gap: 20px;
}

This will make the posts appear in a grid format.

---

Customizing the Query Loop in PHP (If Using a Custom Theme)

If you’re coding a custom Query Loop in a theme, you can modify the WordPress Loop like this:

<?php
$args = array(
    'post_type' => 'post',
    'posts_per_page' => 6
);
$query = new WP_Query($args);
if ($query->have_posts()) :
    echo '<div class="custom-query-loop">';
    while ($query->have_posts()) : $query->the_post();
        echo '<div class="post-item">';
        the_title('<h2>', '</h2>'); 
        the_excerpt();
        echo '</div>';
    endwhile;
    echo '</div>';
    wp_reset_postdata();
endif;
?>

Then, in your CSS:

.custom-query-loop {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.post-item {
    display: inline-block;
    width: auto;
}

---

Summary

• For Block Editor: Use the “Additional CSS Class” and apply CSS with display: flex or grid.
• For Custom Themes: Modify the WordPress Loop and style with CSS.

Would you like me to help with a specific theme or plugin? 😊