Display Featured Posts From Multiple Categories Inline Using One Widget

In this tutorial, i’ll give you the CSS code which enables you to use multiple featured posts widgets in the one widget area so they display inline.

By default, many themes only enable you to display multiple posts from the same category in the one widget area however this solution lets to drag in multiple widgets which can be configured differently so they display posts from different categories.

Several members of the StudioPress community asked this question:

I’m trying to change the home middle widget to show TWO categories instead of one. This would be fantastic… I hope someone has an answer, as it’s exactly what I’m trying to do!

.grid-container .widget-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15ch, 1fr));
    grid-template-rows: auto;
    grid-gap: 1%;
    margin-top: 80px;
}

@media only screen and (max-width: 1023px) {

    .grid-container .widget-wrap {
        grid-template-columns: 1fr;
    }
    
}

Here’s the result of what the code enables you to do showing 2 widgets displaying posts from 2 different categories inline.

And here’s the 2 widgets in the backend.

Here’s the CSS code you’ll need to add at the end of your child themes style.css file before the Media Queries.

Example: For 3 widgets, you would use 33.3333333%

Another option would be to code a second widget in the front-page.php template file and add CSS to display each widget 50% width.

More Ways To Use Multiple Widgets In One Widget Area

• Add Featured Widgets Inline Anywhere In Genesis
• Creating Multiple Widgets Inline With Different Widths
• Horizontally Display Genesis Featured Posts Inline In One Widget Area