[Resolved] Featured post on every page of the blog

[Sjoerd]

Hi,

I am trying to have a first featured post on each page of the blog. The first page obviously it works great with the Customizer setting to “Make first post featured”, but when you navigate to page 2,3,4, etc, the first post is back to a normal sized post again.

I understand the reasoning behind this, but I want to have a first “featured post” on each page of the blog for design reasons.

Is there an add_filter() function that I can add as a snippet to get this to work?

Thanks so much in advance!

Cheers,
Sjoerd

[Leo]

Hi there,

So you are trying to make the first post of each page featured?

There is no filter for this unfortunately – this is the first time it’s been requested.

I can try some CSS solution if you can link me to the page in question?

[Sjoerd]

Hi Leo,

Thanks for the response!

I can’t point you to the actual site, but it’s basically the “Broadcast” Theme out of the box from Generatepress – https://gpsites.co/broadcast/

So, if you open up the Broadcast theme, you can see the first post is featured and enlarged. If you go to the second page when NOT using infinite scroll you would go to https://gpsites.co/broadcast/page/2/

That doesn’t work on this example, since it has infinite scroll turned ON, but if it’s paginated you would see that the first box on page 2 is now a smaller sized box.

For this reason I thought it would be possible to work with an add_filter() since it’s an actual new pageload?

Does that make sense? 🙂

Let me know your thoughts.

Cheers,
Sjoerd

[Sjoerd]

I’ve been messing around with some Javascript and came up with a pretty simple solution actually.

var el = document.getElementsByTagName('article');
el[0].className += ' grid-50';

It selects all the <article> elements and appends the grid-50 class to the first element.

That did the trick! 🙂

[Sjoerd]

Like this it might even be neater… first removing the grid-25 class from the first <article> element and then adding the grid-50 class.

var el = document.getElementsByTagName('article');
	
	el[0].classList.remove("grid-25");
	el[0].classList.add("grid-50");

Hope it helps someone else that has the same desire to make a certain element of the page featured.

By changing the el[0] to another number, you can actually decide which one you want to enlarge or even enlarge multiple posts to featured sizes.

[Leo]

Thanks for sharing your solution!

I believe this CSS would work as well:

body.paged .site .generate-columns-container article:first-child.generate-columns.grid-25 {
    width: 50%;
}

[Sjoerd]

Hi Leo,

Yes! That works too and pure css! 🙂

It needs to be adjusted though to make sure it only adjusts for desktop.

@media (min-width: 769px) {
		body.paged .site .generate-columns-container article:first-child.generate-columns.grid-25 			{
    		width: 50%;
			}
	}

This seems to do the trick! Thanks so much for the support 🙂

[Leo]

No problem 🙂

[Author]

Posts