• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2552

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Register
  • Videos
  • Log in

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!

Update : You can now use CSS Grid to display any number and any type of widget inline. Here’s the CSS which assumes your PHP code which generates the widget includes the class, grid-container.

.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.

widgets inline

And here’s the 2 widgets in the backend.

Widgets

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

Register for full access


Note: The code only works when using 2 Genesis featured posts widgets however you could use 3, 4 or 5 simply by changing the width from 50% to match the number of widgets you want to display inline.

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

Primary Sidebar

How it works :

I write tutorials for you which include the custom code you need for a flat $49.99 fee. You get 1 tutorial request as well as access to all 2500+ existing tutorials for 1 month.

  • Premium Members Only
  • Sign Up
  • Support