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

Home Forums Support how do i get the header on the category pages?

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1439584
    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!

    #1439643
    Leo
    Staff
    Customer Support

    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 🙂

    #1439769
    roy

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

    #1439894
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1440092
    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!

    #1440100
    Elvin
    Customer Support

    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.:)

    #1440107
    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?

    #1440125
    roy

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

    #1440127
    Elvin
    Customer Support

    “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.:)

    #1440128
    Elvin
    Customer Support

    Nice one.

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

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.