Custom Banner Images on Category Archive Pages

[lydonassoc]

I am attempting to replace the standard x-header-landmark section on my Category Archive pages with a banner image.

I found this thread which seemed to provide exactly what I was looking for:

How to add images into each category?

Unfortunately, this doesn’t seem to be having any effect on my Category Archive page.

Attaching images of my code and the page I’m trying to change.

Can you see anything that I’m doing wrong?

Thanks for your help!

[ruenel]

Hello Ricky,

Thanks for writing in!

To resolve your issue, please update your code:

add_action('x_after_view_integrity__landmark-header', 'category_image_banner', 30);

Please let us know if this works out for you.

[lydonassoc]

This is fantastic! It works perfectly now.

One more thing… I need to do exactly the same thing on individual Post pages. I need a different banner image at the top of the page based on it’s Category.

I assume I can use the same code with some modifications. Do you have any guidance for that?

Thanks Much!

[rad]

Hi Rick,

Yes, you could do that and modify it for post, example (this is just part of it)

function category_image_banner() {

$category_id = 0;

if ( is_singular('post') ) {
$categories = get_the_category();
$category_id = $categories[0]->cat_ID;
}

// If it's category 2, or the post has category 2
if ( is_category(2) || $category_id == 2) {

//category banner here

}

// If it's category 3, or the post has category 3
if ( is_category(3) || $category_id == 3) {

//category banner here

}

}

Please enhance it to your preference but we can’t cover further customization related to this

Cheers!

[lydonassoc]

That should get me started. Thanks for your help!

[thai]

Let us know how it goes!

[lydonassoc]

OK. This is really the last thing…

I’ve implemented the original code to add a banner to the Category Archive pages. It works great. Then I implemented the new code you suggested to add different banners to the post pages.

That works as well, but now I get both the Archive and Post banners on the Category Archive pages.

I know this may be out of your scope for support, but I figured I would see if you had any guidance—Can I target the banners ONLY to the post pages without effecting the Archive pages?

Thanks Much!

[ruenel]

Hello Ricky,

To better resolve your issue, please provide us the complete code that you have added so that we can check your code and the conditions that you are using.

Thank you in advance.

[lydonassoc]

Thanks for looking at this.

    /**
    Adding a custom banner to category archive pages
    */

function category_image_banner() { 

$category_id = 0;

if ( is_archive() ) {
$categories = get_the_category();
$category_id = $categories[0]->cat_ID;
}

 if ( is_category( 2) ) { ?>

<img src="http://mausernowstg.wpengine.com/wp-content/uploads/2019/03/mausernews_L1_header.jpg" class="l1-header">

<?php }

 if ( is_category( 3) ) { ?>

<img src="http://mausernowstg.wpengine.com/wp-content/uploads/2019/03/ourstories_L1_header.jpg" class="l1-header">

<?php } 
	
}
add_action('x_after_view_integrity__landmark-header', 'category_image_banner', 30);


/**
Adding a custom banner to post pages by category
*/

function post_image_banner() {

$category_id = 0;

if ( is_singular('post') ) {
$categories = get_the_category();
$category_id = $categories[0]->cat_ID;
}

if ( is_category(2) || $category_id == 2) { ?>

<img src="http://mausernowstg.wpengine.com/wp-content/uploads/2019/03/mausernews_L2_header.jpg" class="l2-header">

<?php }

if ( is_category(3) || $category_id == 3) { ?>

<img src="http://mausernowstg.wpengine.com/wp-content/uploads/2019/03/ourstories_L2_header.jpg" class="l2-header">

<?php }
	
}

add_action('x_after_view_integrity__landmark-header', 'post_image_banner', 30);

[lydonassoc]

Here is an image showing how the two banners stack up on the Category Archive page.

[ruenel]

Hello Ricky,

Please have your code updated and use this instead:

/**
Adding a custom banner to category archive pages
*/

function category_image_banner() { 

	$category_id = 0;

	if ( is_archive() ) {
		$categories = get_the_category();
		$category_id = $categories[0]->cat_ID;

	 	if ( is_category( 2) ) { ?>

			<img src="http://mausernowstg.wpengine.com/wp-content/uploads/2019/03/mausernews_L1_header.jpg" class="l1-header">

		<?php } 

		if ( is_category( 3) ) { ?>

			<img src="http://mausernowstg.wpengine.com/wp-content/uploads/2019/03/ourstories_L1_header.jpg" class="l1-header">

		<?php }	

	} 
	
}
add_action('x_after_view_integrity__landmark-header', 'category_image_banner', 30);


/**
Adding a custom banner to post pages by category
*/

function post_image_banner() {

	$category_id = 0;

	if ( is_singular('post') ) {
		$categories = get_the_category();
		$category_id = $categories[0]->cat_ID;

		if ( is_category(2) || $category_id == 2) { ?>

			<img src="http://mausernowstg.wpengine.com/wp-content/uploads/2019/03/mausernews_L2_header.jpg" class="l2-header">

		<?php }

		if ( is_category(3) || $category_id == 3) { ?>

			<img src="http://mausernowstg.wpengine.com/wp-content/uploads/2019/03/ourstories_L2_header.jpg" class="l2-header">

		<?php }

	}
	
}

add_action('x_after_view_integrity__landmark-header', 'post_image_banner', 30);

We would loved to know if this has work for you. Thank you.

[lydonassoc]

Perfection! Thank you so much! You guys are amazing!

[Prasant]

You are most welcome.