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

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • 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

Reader Interactions

Comments

  1. Marie I. says

    July 31, 2014 at 11:09 am

    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.

    Log in to Reply
    • Brad Dalton says

      July 31, 2014 at 11:28 am

      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.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.