WP SITES

2633

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

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

Reader Interactions

Comments

  1. This is a great feature.

    I would like to use the Featured-Page widget, instead of the Featured-Post, but when I do this they just stack one on top of each other, rather than side by side. Is there an easy fix or is this major coding? Thanks.

    • Use CSS to do this.

      This post provides the solution for featured posts NOT featured pages or anything else.

      Wrote about it many times already on this site.

Leave a Reply