[Support request] how do i get the header on the category pages?

[roy]

hi, i would like my main hero header to be on my category pages as well but i don’t have category pages to put them as a featured image.

please let me know, thanks!

[Leo]

Hi there,

You would need to create a separate page hero/header element and use the custom image option instead:
https://docs.generatepress.com/article/header-element-overview/#background-image

Let me know if this helps 🙂

[roy]

I am a little confused as it requires some coding, could I get some clarification? Sorry, not a coder 🙁

[Tom]

Hi there,

Just to confirm, are you wanting to add featured images to your category archives, and have those featured images display as the page hero background?

If so, this topic may help: https://generatepress.com/forums/topic/advance-custom-field-image-for-my-category-archive-header-element-background/

Let us know 🙂

[roy]

Hi Tom!

I just tried to follow everything Samantha did but with no success.

I wouldn’t mind if my category pages show the same header as my homepage, I am just confused on how to set this?

I made a custom page with the code, made it the same settings as the other heros, then I went to download ACF and attempted to get it working but still in the same place. When you click on the link I provided it’s just the grey box but I want them to have a picture as well to clarify.

Thanks!

[Elvin]

Hi Roy,

You can try copying these settings:

For ACF Field group rules:
https://share.getcloudapp.com/bLuRPY6D (you can add more rules if you want the field to appear on pages and tags taxonomy too.)

For ACF image field settings:
https://share.getcloudapp.com/jkuZNgrX

Adding Category Page Featured Image: (this image field will only appear after you add it on ACF)
https://share.getcloudapp.com/12uJZxBq

Page Hero/Header Element settings:
https://share.getcloudapp.com/NQurGREG – (Remove the inline style on h1 and add your own css class.)
https://share.getcloudapp.com/P8ubP0jd
https://share.getcloudapp.com/bLuRPYok – (you can change this to Post Category Archive if you only want it to display on Category Archive Pages)

PHP code to add on Code Snippet:

function get_acf_category_featured_image( $url ) {
		$term = get_queried_object();
		$background_image = get_field('category_featured_image', $term);
		if ( $background_image ) {
        $url = $background_image;
    	}
    	return $url;
}

add_action('wp', function(){
	if(is_archive()){
		add_filter( 'generate_page_hero_background_image_url', 'get_acf_category_featured_image'  );
	}
});

As previously mentioned, this code checks if the page is an archive page and uses the image from the custom field if it is an archive page. Else, it will let the page use the default featured image used by the page.

Note: If you have a different custom field name for your image field, replace the 'category_featured_image' text inside $background_image = get_field('category_featured_image', $term); to match your image’s custom field name.

Let us know if this helps. Hope this makes things easier to follow.:)

[roy]

“Page Hero/Header Element settings:
https://share.getcloudapp.com/NQurGREG – (Remove the inline style on h1 and add your own css class.)”

this is the only part I am confused about, what exactly should I be typing in the box? the same as you have written there?

[roy]

Sorry! I fixed it just now with the detailed guide you posted. Thank you so much!!!

[Elvin]

“Page Hero/Header Element settings:
https://share.getcloudapp.com/NQurGREG – (Remove the inline style on h1 and add your own css class.)”

this is the only part I am confused about, what exactly should I be typing in the box? the same as you have written there?

It really depends on what you want displayed there.

<h1 style="text-align: center; color: #222222; font-size: 50px;">
	{{post_title}}
</h1>

This code dynamically displays the Page Title or the taxonomy name(Category Name, Tag Name).

If you want a static text that displays on all pages specified on your Page Element’s Display Rule, you can simply replace {{post_title}} with whatever text you want displayed.

Example:

<h1>
	THIS IS MY SITE.
</h1>

This code will simply display “THIS IS MY SITE.” inside the page header.

Hope this sheds more light.

Let us know if you have further questions.:)

[Elvin]

Nice one.

No problem. I’m glad you figured it out. 🙂

[Carrie]

Hi Elvin,

I’m trying to view your links and am getting “This item has exceeded its view limit!” message.

[Ying]

Hi Carrie,

Could you open a new topic for your question and link us to the site?

Thanks!

[Author]

Posts