Different layout for home and blog archive page

[Hasan]

Hi,

I want to show my posts on the home page on 3-4 column masonry layout as it is currently showing (on 2 column). Also I want to show a blog archive page with just single column and full post view.

I am currently using the default 1100px layout. My single post and blog archive content width needs to be exactly 700px, the rest could be assigned to the right sidebar.

For the home page, I want to use a wider layout, so I can show the posts on 3 or 4 column masonry layout.

How can I do that? Thanks!

Regards,
Hasan

[Leo]

Hi there,

Not quite sure if I understand.

The home page is the blog page which you can modify with the settings in the customizer:
https://docs.generatepress.com/article/using-columns-in-the-blog/

If you want to use different layouts on other pages, check out the filters/examples at the bottom of the linked above.

To set different widths, this should help:
https://docs.generatepress.com/article/layout-element-overview/#content-1

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Hasan]

Hi Leo,

First thing I need is showing the blog archive on a separate page in addition of the homepage with different layout. Can you please tell me how to do that? Seems like can’t find any option for that. Is there any short code to do that?

Best regards,
Hasan

[David]

Hi there,

the simplest way to add an ‘archive’ grid to a static page is to use a plugin like this:

https://wpshowposts.com

Its another of Tom’s plugins – the free version will do what you require.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Hasan]

Thanks David!

I tried the plug-in, but it is not producing the same layout as the one page archive page that GP will produce.

Since GP has the ability to output a single column archive, is there any other way to do this without using the plug-in?

Here is the page that I generated with the plug-in, which is not the same as the single column archive that GP produces: https://snapbangladesh.com/stories/

Any idea? Thanks!

[Leo]

You’d need a custom solution without a plugin unfortunately.

You can definitely create one column using Show Posts though.

Where can I see the show posts list currently?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Hasan]

Here is the list made with Show Posts: https://snapbangladesh.com/stories/

[David]

So how do you want the WP Show Posts list to display? Like the 4 column grid you have on your Home Page?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Hasan]

I want the archive layout to be the same as the single page here except the comment section, coming one after another in a separate card for each post: https://snapbangladesh.com/barisal-ferry-3/

I was able to twik the show posts setting further and make it almost similar, except the posts are joined together, while I want them to appear on separate cards.

How can I do that?

Thanks!

[David]

Tricky one – this CSS should work specifically for that page:

.page-id-33.separate-containers .inside-article {
    padding: 0;
    background-color: transparent;
}
.page-id-33 .wp-show-posts-inner {
    padding: 40px;
}
.page-id-33 .wp-show-posts-single {
    background-color: #fff;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Hasan]

That worked, thanks!

How can I reduce the gap between two posts about 20 px?

[David]

This CSS:

.wp-show-posts:not(.wp-show-posts-columns) .wp-show-posts-single:not(:last-child) {
    margin-bottom: 20px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Hasan]

Awesome! That makes the page as I wanted.

Thank you so much!

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts