[Resolved] Creating post header element

[William]

Hi there,

I am wanting to create a post header element that looks something similar to:

– This when there is a featured image and
– This when there is not a featured image

Both use the excerpt too. My sandbox for working is here.

The thing I struggle with is how to get the content looking the way it does, including the category with the look of a box letter from the first letter of the category, with a random color assigned to each individual category.

[Leo]

Hi there,

Sorry are you referring to this part here?
https://www.screencast.com/t/oAHuK4EDQmi3

I’d assume it would require a custom solution unfortunately.

[William]

Ah okay – let’s say I would like the category still appearing where it is in the post header, what would be the way to replicate the header except for that custom solution bit?

[Leo]

If you add the three items you want in the header element content first, I can give you the CSS to space them that way.

[William]

Okay, I’ve created something similar to what is needed here.

Is there a way so that when there is not a featured image, such as with this post, it will actually default to a post header element such as this?

[Leo]

Okay, I’ve created something similar to what is needed here.

So reduce the header padding to where you want the category to show, then add this CSS:

.page-hero .meta-category {
    padding-bottom: 300px;
}

Is there a way so that when there is not a featured image, such as with this post, it will actually default to a post header element such as this?

Take a look at the third snippet here:
https://docs.generatepress.com/article/generate_header_element_display/

Adding PHP: https://docs.generatepress.com/article/adding-php/

[William]

That’s absolutely brilliant, you’re a star, thank you!

[Leo]

No problem 🙂

[Author]

Posts