[Resolved] Change Logo and URL on specific pages

[melanie]

I am doing a large site. It has the main section (main logo and url) and 9 sections each with its own community logo and url. The client would like each community to have its own logo and url in place of the main logo/url. The main navigation stays the same across the site.
Although I can build custom headers with Beaver Themer it will be a pain dealing with transparent headers, changing logos on scroll, and mobile headers/menus and all the css. I want to use GP menu for the main menu and NOT BB menu or UABB menu modules as they are not as accessible as the GP menu.
Before I go down that road I wanted to ask you if generate_logo_href is a better solution?
I am looking for the simplest solution which will automatically apply the correct logo / url to all child pages and the community home page.
If it is can you give some sample code?
It seems it would be much simpler to do this via a custom function or template than 10 custom headers.

[melanie]

Update:
I was able to figure it out partways on http://wesleywoods.staging.wpengine.com/branan-towers/
Here is the code

//Branan Towers Header Logo
add_filter( 'generate_mobile_header_logo','bt_category_mobile_header_logo' );
function bt_category_mobile_header_logo( $logo ) {
    
    // Return our category logo URL
    if ( is_page( 'branan-towers' ) ) {
        return 'http://wesleywoods.staging.wpengine.com/wp-content/uploads/2018/08/Wesley-Woods-Branan-Towers-logo.png';
    }

    // Otherwise, return our default logo
    return $logo;
}
add_filter( 'generate_logo_href','generate_add_custom_logo_href' );
function generate_add_custom_logo_href()
{
if  (  is_page( 'branan-towers' )) {
        return 'https://wesleywoods.staging.wpengine.com/branan-towers/';
    }
    
    return 'https://wesleywoods.staging.wpengine.com';
}

add_filter( 'generate_navigation_logo_output','mga_change_navigation_logo_output' );
function mga_change_navigation_logo_output( $output ) 
{
	if  (  is_page( 'branan-towers' ))  {
	return sprintf(
		'<div class="site-logo sticky-logo navigation-logo">
		<a href="https://wesleywoods.staging.wpengine.com/branan-towers/"><img class="header-image" src="http://wesleywoods.staging.wpengine.com/wp-content/uploads/2018/08/Wesley-Woods-Branan-Towers-logo.png" width="275" height="88"alt="Branan Towers" /></a>
		</div>',
		
		esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
	);}
}

I’d like to make the urls on the links relative. What is the proper way to call in the site url in these functions?
Also, the only thing I am missing the url change on mobile menu. Any help would be great.

[Tom]

That’s definitely the right way to do it 🙂

What do you mean by relative exactly? If I’m on the branan-towers page, where should the logo link to?

[melanie]

Thanks for the reply. This is so awesome!
1) I don’t like hardcoding the website url. (https://wesleywoods.wpengine.com) into functions.php. So perhaps calling the site url in place of https://wesleywoods.wpengine.com.? Not sure how to do that.

2) My last issue is adding the page ancestors (or child) to the above code. All the child pages of each section will have the blue version of the logo (not the white logo for the transparent header) for desktop and mobile so I would need code similar to the above for that would handle all child pages (and sub pages of child pages) and call the correct logo.

For example https://wesleywoods.wpengine.com/branan-towers -it has white logo with the transparent header but on scroll and mobile it has the regular logo.

All child pages (and sub pages) of Branan need blue logo (no transparent header) for regular, scroll, and mobile.
ex: http://wesleywoods.staging.wpengine.com/branan-towers/about/ will need the logo changed to Branan Towers logo, url changed.

Any sample code would be great.

[Tom]

1. You can use the site_url() function. For example:

add_filter( 'generate_logo_href', function( $url ) {
    $site_url = site_url();

    if  (  is_page( 'branan-towers' )) {
        return $site_url . '/branan-towers/';
    }
    
    return $url; // Return the default.
}

It doesn’t look like there’s a function like is_page() for child pages, but you can try this:

global $post;

if ( 123 == $post->post_parent ) {

}

[melanie]

Post_parent won’t work because it only handles child pages not subpages of child pages. As a feature request I would love love the Page Parent and Page Ancestor added to the location. (Beaver Themer has this but I needed to use GP menu thus no Beaver Themer for the custom headers) I believe it is the get_ancestor function. I’ll try it out until I can get it. Right now I have to add each new page into the array in the functions file until I figure it out. https://codex.wordpress.org/Function_Reference/get_ancestors.

The mobile menu is working, the nav menu is working on the custom logos but I couldn’t get the following to work so I had to manually choose the pages in Elements for the time being. You can see below an example of the page array and the need for the get_ancestors filter.

add_filter( ‘generate_logo’,’wwsite_main_logo’ );
function wwsite_main_logo( $logo ) {

// Return WWN Community logo URL
if ( is_page( array(44767,44780,45069,44793,44281,44278,44182,44789,44761,44275,44277,44778,44276,44762,44747,45032,45006,45014,45021,44028,44279) ) ) {
return ‘https://wesleywoods.wpengine.com/wp-content/uploads/2018/10/Wesley-Woods-Newnan-logo-blue.png’;
}

// Otherwise, return the default logo
return $logo;
}

[Tom]

Hmm, maybe try this:

$ancestors = get_ancestors( get_the_ID(), 'page', 'post_type' );

if ( is_array( $ancestors ) && in_array( 123, $ancestors ) ) {
    // If ID 123 is an ancestor
}

Let me know 🙂

[melanie]

Awesome! I am almost there. You have been a great help. The custom functions I wrote for mobile and nav logo are both working but I can’t seem to get this custom function to apply to desktop. Do you see an error? Here is my code:

//Change Main Logo on Branan Towers Sub Pages where 44304 is the page ID of the parent
add_filter( 'generate_logo','wwsite_main_logo' );
function wwsite_main_logo( $logo ) {
    $ancestors = get_ancestors( get_the_ID(), 'page', 'post_type' );
// Return Branan Towers logo 
 if ( is_array( $ancestors ) && in_array( 44304, $ancestors ) ) {
        return 'http://wesleywoods.staging.wpengine.com/wp-content/uploads/2018/11/Wesley-Woods-Lanier-Gardens-Retina-blue.png';
    }

// Otherwise, return the default logo
    return $logo;
}

Here is a sample of what is working:

//Customize Mobile Logos for Branan Towers
add_filter( 'generate_mobile_header_logo','ww_category_mobile_header_logo' );
function ww_category_mobile_header_logo( $logo ) {
$ancestors = get_ancestors( get_the_ID(), 'page', 'post_type' );
    
// Return our branan logo URL
     if ( is_page( 'branan-towers' ) ) {
        return 'https://wesleywoods.staging.wpengine.com/wp-content/uploads/2018/08/Wesley-Woods-Branan-Towers-logo.png';
    }
    if ( is_array( $ancestors ) && in_array( 44304, $ancestors ) ) {
        return 'https://wesleywoods.staging.wpengine.com/wp-content/uploads/2018/08/Wesley-Woods-Branan-Towers-logo.png';
    }
// Otherwise, return our default logo
    return $logo;
}

//Change Site Logo URL on Branan Community Pages
add_filter( 'generate_logo_href','generate_add_custom_logo_href' );
function generate_add_custom_logo_href() {
 //get ancestors
$ancestors = get_ancestors( get_the_ID(), 'page', 'post_type' );

if  (  is_page( 'branan-towers' )) {
        return 'https://wesleywoods.staging.wpengine.com/branan-towers/';
    }
    if ( is_array( $ancestors ) && in_array( 44304, $ancestors ) ) {
        return 'https://wesleywoods.staging.wpengine.com/branan-towers/';
    }
return 'https://wesleywoods.staging.wpengine.com';
}

//Custom Navigation Logo Branan Towers
add_filter( 'generate_navigation_logo_output','ww_change_navigation_logo_output' );
function ww_change_navigation_logo_output( $output ) {
$ancestors = get_ancestors( get_the_ID(), 'page', 'post_type' );
	if  (  is_page( 'branan-towers' ))  {
	return sprintf(
		'<div class="site-logo sticky-logo navigation-logo">
		<a href="https://wesleywoods.staging.wpengine.com/branan-towers/"><img class="header-image" src="http://wesleywoods.staging.wpengine.com/wp-content/uploads/2018/08/Wesley-Woods-Branan-Towers-logo.png" width="275" height="88"alt="Branan Towers" /></a>
		</div>',
		
		esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
	);}
//if page is an ancestor of branan towers change to BT logo and url
if ( is_array( $ancestors ) && in_array( 44304, $ancestors ) )  {
	return sprintf(
		'<div class="site-logo sticky-logo navigation-logo">
		<a href="https://wesleywoods.staging.wpengine.com/branan-towers/"><img class="header-image" src="http://wesleywoods.staging.wpengine.com/wp-content/uploads/2018/08/Wesley-Woods-Branan-Towers-logo.png" width="275" height="88"alt="Branan Towers" /></a>
		</div>',
		
		esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
	);}
}

[Tom]

You’re using a retina logo, so you have to do this as well:

add_filter( 'generate_retina_logo', function( $logo ) {
    if ( $something ) {
        return 'URL TO RETINA LOGO';
    }

    return $logo;
} );

[melanie]

That Did it! Combined with the site url posted above it all works like a charm!

I am totally impressed by the level of support you provide.

Melanie

[Tom]

Thank you! Glad I could help 🙂

[Author]

Posts