[Resolved] Making grid with child pages

Okay, I found the issue, but I’m not quite sure how to fix it. Previously I had set my blog to a grid, with the featured image occupying the entire top space on desktop. The trouble was that it looked bad because by default, with 12 grids, because there was an empty space in the bottom right hand of the page. So to fix it, you helped me with a code that changed it to 13 grids when there is a featured image, filling that space:

add_action( 'pre_get_posts', 'tu_change_posts_per_page', 1 );
function tu_change_posts_per_page( &$query ) {
    if ( ! is_main_query() ) {
        return;
    }

    if ( ! $query->is_paged ) {
        $query->set( 'posts_per_page', 13 );
    }
}

With this code on my website, I can’t use the “Include post” parameter with “Pages” when this PHP is in my website. It also creates another issue where no matter what I set the “Posts per page” as, whether pages or posts, it always shows 13. So I understand why the second issue is happening, but not the first.

Do you know of a way to solve this issue while still allowing 13 posts on the first page of the press/blog? Thanks a lot.

That worked Fernando. Thank you very much to both of you.

Fernando, there is a bug with your code that I didn’t realize. Your code fills up the space that is missing, but when I go to the next page (it has the same effect whether the blog is paged or whether I use infinite scroll with the “More” button), it repeats the post. So for example, since my blog is set up on infinite scroll, it forces two identical posts next to each other and looks bad. It only does this the first time. (For example, page 3 or 4, or clicking “More” later on the page, doesn’t repeat a post.) I have the same issue with categories, with the search function, etc. Is there a way to fix this?

The old code does it too. The reason I don’t want to do it through Settings is because my featured image fills the entire top row—when the reader clicks on “More”, it would load 13 new slides (instead of 12) and there would be a gap on the bottom row.

Worst case, I could get rid of the “More” button, and set the posts per page to an odd number that fills the entire space. But if I can have the first page show 13 posts, and have the “More” button load the default 12 without repeating, it would let reader access old posts, and it fills up the entire space whether desktop (3 rows) or tablet (2 rows).

Correct. I just use CSS:

.generate-columns-container .featured-column {
    float: left;
    width: 100% !important;
}

@media(min-width: 769px) {
    .featured-column h2.entry-title {
        font-size: 40px;
        font-weight: 900;
		padding-top: 30px;
    }
	.featured-column .entry-summary {
        font-size: 20px;	
    }
}

@media(min-width: 769px) {
    .separate-containers .featured-column .post-image img {
        max-width: 66%;
        float: left;
        margin-right: 2em;
    }
    .separate-containers .featured-column .inside-article {
        padding-bottom: 0;
    }
}

Featured post shows up on Categories and Search too, which is fine, but the only place the featured post needs to be is on the first page of the blog. The blog is not my front page, by the way.

I’m a little confused. Are you saying to place the featured post as a Query Loop Block at the top of the page, the size and format I want, and have the blog populate afterwards? How would I exclude the first post? If I used a Query Loop Block, would I even need a dedicated blog page? I’m putting a link to the blog page in the information below.