[Resolved] Using specific pages instead of "latest posts" at homepage

[ch1800]

Hi folks,

I’m trying to find a site in the library for a new corporate site that won’t be using posts at all and would like to replace the “latest posts” at homepage with specific pages and by keeping current layout of the theme’s site. Is this possible?

Let’s take as example the site MELLOW which has 2 latest posts at homepage.
Would it be possible to somehow replace them with, let’s say, 4 specific pages and keep the layout the same?
(I’m not sure whether we can reproduce same layouts with WP Show Posts, hence my question)

Thanks!

[David]

Hi there,

it would take some extra CSS but for sure WP Show Post could be use to display Pages. If you want to set it up we can take a look at the CSS requirements.

[ch1800]

Many thanks for this.
Will maybe try first to use posts instead of pages and see how it works.

[David]

OK let us know if you need help with the CSS 🙂

[ch1800]

David, after checking further the MELLOW site I see in Elements 3 header items:
Posts Hero, Site Hero, Home Hero.

Is it possible to know exactly what they are doing as I’m a bit confused.
I see what happens with Home Hero as it ads a dark overlay on the main image and that the Site Hero is for the page titles but how is the dark overlay applied on pages’ featured images for instance?

Furthermore, I tested the idea to keep posts at homepage but doesn’t seem to work that way because there is no control on which posts to display.

If I want to try the initial idea and get some 4-5 similar boxes with PAGES contents instead of POSTS and use Show Posts for them, should I create a homepage with sections in order to reproduce the current one?

[David]

The Header Elements are doing the same thing just in different places:

Posts Hero – applies to Single Posts
Home Hero – applies to the current home page
Site Hero – applies to everywhere else other then Posts and Home.

Each of them are set to display an image background, with a color overlay. That is set in the Header Element.
The Posts Hero and Site Hero uses the Featured image that is applied to the individual post / page. Whereas the Home hero has a Custom Image selected inside the Header Element itself.

It will take some CSS to make it look the same using WP Show Posts. To start you need to create a new Page for your Home and set this as your homepage in Settings > Reading.

In the normal editor add your WP Show Posts shortcode. Then let us know and we can help with the CSS to make it looks similar.

[ch1800]

Great, many thanks and well noted.
Will wait the client’s feedback about that later on and I’ll get here again.

[David]

You’re welcome – let us know 🙂

[ch1800]

Hi David,

I’ve added the link to the temp dev site for this one at initial message.
For the time being will try to keep it that way with posts.

At this point, would like to know how I would be able to add sections below the posts blocs.
Is this possible?
For instance let’s say a full width hero section with large image.

[David]

Ok gonna take a bit of work as we need to consider replacing the post loop with WP Show Posts and allowing full width containers on that page.

If you’re up for it we need to begin with:

1. Create a new static page
2. Apply the same header as you have on the home page.
3. Use the WP Show Posts plugin to create your 2 column list of 4 posts, with Title, Image and Excerpt displayed in that order.
4. Edit the static page, and set the Page Builder Container to Full Width
https://docs.generatepress.com/article/page-builder-container/
5. Add a Group Block and with that add your WP Show Posts shortcode.

Once you got the above done – link me to that page so and ill look at the CSS required.

Note on 5 – our new Block Plugin is currently in Alpha testing – we’re hoping to release it to the WP repo by the beginning of April. It provides a Container Block which has far greater control then the Group Block provides. If you have the time you may want to test it out:

https://generateblocks.com

[ch1800]

Thanks for this, the site is already linked at original post.
I see you mention things about blocks but I’m not using them at all and not planning to use them any time soon… Only Classic Editor.

Are they really needed for 4 & 5?

For similar cases, including using WP Show Posts, I always used Sections previously for other sites and everything worked fine. Isn’t the same possible here? Header, Show Posts, Hero, Footer.

[David]

You can use Sections instead if you wish. If you set up as so i can look at the CSS either way.

[ch1800]

OK, I’ve done that with Sections.
Created a new Homepage and News Page.

Homepage – I have set the Page Builder Container to Full Width and used 3 Sections:
4 blocks with Show Posts, 1 welcome text and 1 Hero image.

– As you said, the 4 blocs will need some CSS makeup.
– If we later decide to put the text section on top of page, instead of the 4 blocks, will it be possible to have it also override inside the bottom of the featured image, the same way Show Posts blocs are doing?
– Is there a way to have to hero image at bottom is total full width, same as the featured one on top?

News Page – I don’t well understand why it is still titled “Blog” although my title is “News” and why it doesn’t display the Featured Image I’ve added in that page. Is there an Element blocking (I deleted the original images already)?

Page Titles – They don’t seem to work well with responsivenesss as in demo. When resizing the screen, the hamburger drops below the title and, in small screens, disappears behind the top of page content. In demo, the hamburger lifts above the page’s title.

Thanks!

[David]

1.1 Home Page WP Show Posts: add this CSS:

.wp-show-posts-inner {
    background-color: #ffffff;
    padding: 70px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.04);
    transition: box-shadow 500ms ease;
    border-radius: 3px;
}

.wp-show-posts-entry-header,
.wp-show-posts-image.wpsp-image-center {
    margin-bottom: 2em !important;
}

.wp-show-posts-entry-header a {
    color: #000;
}

.wp-show-posts-image.wpsp-image-center {
    margin-left: -70px;
    margin-right: -70px;
}

@media (max-width: 768px) {
    .wp-show-posts-inner {
        padding: 30px;
    }

    .wp-show-posts-image.wpsp-image-center {
        margin-left: -30px;
        margin-right: -30px;
    }
}

1.2 Yes – the overlay effect is achieved by CSS that is ‘pulling’ the #page content up over the header element. If you keep the Section contained, and give it a white background the only thing different would be the missing rounded corners, which could be added with some CSS.

1.3 Home Page Full width section – add this CSS:

.section-no-padding .generate-sections-inside-container {
    padding-left: 0;
    padding-right: 0;
}

Then for that section and any others you wish to remove the left / right padding, edit the Section and add section-no-padding in the Custom Classes field.

The alternative is to add the image as a background. Calculate the % ratio of the original image ie. Height / Width * 100
For your image eg. 760 / 1920 * 100 = 39.%

Now add this as the Top Padding to the container.

2. News aka Blog
In Appearance > Elements you will find a dedicated Header Element for the Blog where you can change the title and background image. The blog doesn’t have the_title function and WP ignores meta boxes such as featured image – hence they have to be done manually in the header element.

3. So your logo is larger which is creating a ‘taller’ header wrap – so you will need to go into each of your Header Elements > Site Header Tab and increase the Offset from 170px to probably 270px will do it.

[ch1800]

Excellent, many thanks!

1.1 Works great
1.2 I tested but not very clear how this would work; will get back here if later really needed
1.3 Used the 1st option and works fine
3 That’s fine also, that seems to work fine at 270 and now I know where to adjust if needed.

2. I’m lost with those Elements and cannot find which one is doing this job.
As I deleted the original images I worry they were also deleted from there in settings and cannot see any of the 3 elements you previously described that has those settings for the Blog.
Those are the 3 elements: https://cloudup.com/cseOuWPsA8o

Posts Hero has this and I can’t see where to change the title:

<h1>
	{{post_title}}
</h1>

<div class="hero-meta">
	{{post_date}} • {{post_author}}
</div>

and Site Hero has this:

<h1>
	{{post_title}}
</h1>

and Home Hero is for the homepage.

UPDATE: I installed this site at a new fresh WP installation and the problem is exactly the same: when changing the Home and Blog pages to new ones and setting them up respectively as Homepage and Posts page the Posts Page gets an empty featured image with the title “Blog”, whatever the real title of this page is.

UODATE2: Solved by doing this:
Existing Element Site Hero: added exclusion for “Blog”
Duplicated Element Site Hero to new element “Site Hero for Bolg” and replaced this:

<h1>
	{{post_title}}
</h1>

by this:

<h1>
	News
</h1>

and then added a custom image as background + added “Blog” in display rules location.

I don’t really know whether this is the correct way but it works fine.
Any other solution?

[Author]

Posts