Homepage design

Hi there,

It's definitely possible with GenerateBlocks + WPSP.

The first grid would be a WPSP list displaying 5 posts.

We can do the same layout (2 on first row, 3 on second row) using grid layout property with custom CSS.

As for the category listings:

You need to place a WPSP shortcode 22 times with varying category term for each shortcode for the 22 category listings with 3 column post grids.

Example using multiple instance of WPSP list id 1234 but with different categories used:

[wp_show_posts id="1234" settings="taxonomy=category&tax_term=dogs"]

[wp_show_posts id="1234" settings="taxonomy=category&tax_term=cats"]

[wp_show_posts id="1234" settings="taxonomy=category&tax_term=birds"]

[wp_show_posts id="1234" settings="taxonomy=category&tax_term=insects"]

These 4 shortcodes will use the same WPSP list (ID = 1234) but will display different posts depending on the category tax term specified. (in this example, it's dogs, cats, birds, and insects)

You can apply this concept on the 22 category listings on similar to your reference site.

Thanks Elvin

Can you please let me know how to get that border for each of those 3 posts under each category so that those containers are having equal sizes for all those 3 posts?

Hi there,

do you have the page setup ? If so can you share a link so we can see what you have ?

Hi David,

It's currently in draft mode only. I have not yet published it. Please let me know how I can share it with you?

Are you wanting the exact same design ie. the Line runs through the Heading as per the image you shared?

Yes David. Looking to build a similar page but with lesser categories that I currently have right now.

Add this CSS to your site:

.section-heading {
    position: relative;
    display: flex;
    align-items: center;
}

.section-heading:before,
.section-heading:after {
    content: '';
    flex: 1;
    background-color: #000;
    /* set line color */
    height: 1px;
    /* Set line height */

}

.section-heading:before {
    margin-right: 30px;
}

.section-heading:after {
    margin-left: 30px;
}

Then for your Titles use a GenerateBlocks Headline Block, which you can style in the editor, with the block selected go to Advanced > Additional CSS Class(es) and add: section-heading

The view the page

Right now it is showing like this on the site (refer to the image in the private section).

Can you please let me know how I can show the posts like this Link

Change the CSS to this:

.section-heading:before,
.section-heading:after {
    content: '';
    flex: 1;
    background-color: #000; /* set line color */
    height: 3px; /* Set line height */
}

/* set link hover */
.section-heading a {
    box-shadow: 0px -8px 0px #f00 inset;
    transition: all 0.6s ease 0s;
    padding: 0px;
    margin: 0 30px;
}

/* link hover color */
.section-heading a:hover {
    box-shadow: 0px -1em 0px #f00 inset;
    color: #fff;
}

You need to add a Link to the Headline.
I have commented the CSS where you can change the line color and its height.
And in the link color and hover section you can change the #f00 to a color of your choosing.

Thanks David.

I am asking for a solution to have the posts under the section header in containers like the one in this Link

Those 3 posts that are shown in that category in boxes of equal sizes

Thanks David.

I am asking for a solution to have the posts under the section header in containers like the one in this Link

Those 3 posts that are shown in that category in boxes of equal sizes

To display post grid of a specific category, you'll need a plugin that does that for you.

That's where the WP Show Posts come in.

After you've made the header, you can insert a WPSP list under it w/ a specific category query. See my examples on my previous reply here - https://generatepress.com/forums/topic/homepage-design-2/#post-1967904

Here's WP Show Post's site - https://wpshowposts.com/

Here are some demo designs - https://demos.wpshowposts.com/cards/ - these are optional. We can style it completely different w/ custom CSS.

Hi Elvin,

I used the WPSP as you said and have the posts displayed but they are not getting displayed in equal-sized containers like the one on the reference site Link

Can you share a link to YOUR site.

Hi David,

Provided the details to my site in the private information section.