Changing logo and url doesn't work on sticky navigation

Hi there,

can you share a link to a page where we can see the issue?

Hello David

sure, you can see the problem here:
https://psyfiers.ch/en/mission-future/

At first all looks great. Changing to a page like this one changes the main logo and it's link.
But if you scroll down, as soon as the sticky navigation sticks, the logo url changes.

This is because there is a filter "generate_sticky_navigation_logo_output" set in functions.php that has the url hard coded.

https://www.screencast.com/t/8hfQVUDGyQzt

Hi there,

This is how I would do it:

add_filter( 'generate_sticky_navigation_logo_output', function() {
    return sprintf(
        '<div class="sticky-navigation-logo">
            <a href="%1$s" title="%2$s" rel="home">
                <img src="%3$s" class="is-logo-image" alt="%2$s" />
            </a>
        </div>',
        esc_url( apply_filters( 'generate_logo_href', home_url( '/' ) ) ),
        esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
        wps_missionfuture_homeurl() // or wherever your logo URL is coming from.
    );
} );

Thank you so much Tom.

Sadly it doesn't work.

I think, I didn't change any relevant code but now the link seems to work but the logo is wrong.

So again (in the hope anybody can see where the error and problem lies)

I feel like I'm blind.

// Mission Future Home URL
add_filter( 'generate_logo_href', 'wps_missionfuture_homeurl' );
function wps_missionfuture_homeurl( $url ) {
// Return different link on logo for Mission Future page(s)
  if ( ! function_exists('pll_current_language') || ! is_page( array( 'mission-future', 'mission-future-family', 'mission-future-school') ) ) {
      return $url;
  }
  $mission_future = 1463; // post ID of mission future "home" page (german)
  return get_permalink(pll_get_post($mission_future));
}

// Mission Future Logo (default)
add_filter( 'generate_logo', function( $logo ) {
	// Return different logo for Mission Future page(s)
	  if (is_page( array( 'mission-future', 'mission-future-family', 'mission-future-school' ) )) {
	  return '/wp-content/uploads/2020/12/201218_Logo_MF_byPSYfiers.svg';
  }
  // Otherwise, return our default logo
  return $logo; 
} );

// Mission Future Logo (mobile)
add_filter( 'generate_mobile_header_logo', function( $logo ) {
	// Return different logo for Mission Future page(s)
	  if (is_page( array( 'mission-future', 'mission-future-family', 'mission-future-school' ) )) {
	  return '/wp-content/uploads/2020/12/201218_Logo_MF_byPSYfiers.svg';
  }

  // Otherwise, return our default logo
  return $logo; 
} );

This is the code I'm using (local only)

As the video shows:
the logo changes for the mission future page(s) as well as the link.
On scrolling down the logo switches back to the default logo while the link is staying as expected.

So sorry, to coming back again with this issue.

https://www.screencast.com/t/hYetKqIk

So in your other functions, you're using this as the URL to the logo: /wp-content/uploads/2020/12/201218_Logo_MF_byPSYfiers.svg

Have you tried using the same value in the sticky logo filter?

Yes, we're close now!
Thank you very much. I really do appreciate your help.

add_filter( 'generate_sticky_navigation_logo_output', function() {
  if (is_page( array( 'mission-future', 'mission-future-family', 'mission-future-school' ) )) {
    return sprintf(
        '<div class="sticky-navigation-logo">
            <a href="%1$s" title="%2$s" rel="home">
                <img src="%3$s" class="is-logo-image" alt="%2$s" />
            </a>
        </div>',
        esc_url( apply_filters( 'generate_logo_href', home_url( '/' ) ) ),
        esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
        '/wp-content/uploads/2020/12/201218_Logo_MF_byPSYfiers.svg' // or wherever your logo URL is coming from.
    );
  }
} );

It works with one little problem left:
There are to areas that need the same function with a different logo.

If I just duplicate the filter like this:

add_filter( 'generate_sticky_navigation_logo_output', function() {
  if (is_page( array( 1620, 1620, 'wozu-mission-team', 'was-ist-mission-team', 'wie-funktioniert-mission-team', 'mission-team', 'what-is-mission-team', 'why-mission-team', 'how-does-mission-team-work', 'comment-fonctionne-mission-team', 'en-quoi-consiste-mission-team', 'pourquoi-mission-team', 'come-funziona-il-mission-team', 'cose-il-mission-team', 'perche-il-mission-team' ) )) {
    return sprintf(
        '<div class="sticky-navigation-logo">
            <a href="%1$s" title="%2$s" rel="home">
                <img src="%3$s" class="is-logo-image" alt="%2$s" />
            </a>
        </div>',
        esc_url( apply_filters( 'generate_logo_href', home_url( '/' ) ) ),
        esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
        '/wp-content/uploads/2021/01/4MT-_Logo-by-PSYfiers_Color.svg' // or wherever your logo URL is coming from.
    );
  }
  } );

  add_filter( 'generate_sticky_navigation_logo_output', function() {
    if (is_page( array( 'mission-future', 'mission-future-family', 'mission-future-school' ) )) {
      return sprintf(
          '<div class="sticky-navigation-logo">
              <a href="%1$s" title="%2$s" rel="home">
                  <img src="%3$s" class="is-logo-image" alt="%2$s" />
              </a>
          </div>',
          esc_url( apply_filters( 'generate_logo_href', home_url( '/' ) ) ),
          esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
          '/wp-content/uploads/2020/12/201218_Logo_MF_byPSYfiers.svg' // or wherever your logo URL is coming from.
      );
    }
  } );

I'll try to figure it out.

Ok, that seems to work now:

add_filter( 'generate_sticky_navigation_logo_output', function() {
  $logourl='';
  if (is_page( array( 'mission-future', 'mission-future-family', 'mission-future-school' ) )) {
    $logourl='/wp-content/uploads/2020/12/201218_Logo_MF_byPSYfiers.svg';
  }
  if (is_page( array( 1620, 1620, 'wozu-mission-team', 'was-ist-mission-team', 'wie-funktioniert-mission-team', 'mission-team', 'what-is-mission-team', 'why-mission-team', 'how-does-mission-team-work', 'comment-fonctionne-mission-team', 'en-quoi-consiste-mission-team', 'pourquoi-mission-team', 'come-funziona-il-mission-team', 'cose-il-mission-team', 'perche-il-mission-team' ) )) {
    $logourl='/wp-content/uploads/2021/01/4MT-_Logo-by-PSYfiers_Color.svg';
  };
return sprintf(
      '<div class="sticky-navigation-logo">
          <a href="%1$s" title="%2$s" rel="home">
              <img src="%3$s" class="is-logo-image" alt="%2$s" />
          </a>
      </div>',
      esc_url( apply_filters( 'generate_logo_href', home_url( '/' ) ) ),
      esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
      $logourl
  );
} );

That's the one - glad you got it working :)

Yes, made me happy for a while too until I figured on mobile navigation the default logo was linking to the default language home page and not to the correct language.

Got this one working too (similar to above).

What unsettles me is that it needed that much code (pasted here again for review) to solve the in itself simple problem to have a different logo and url for certain pages.

I'm not convinced that this has to be constructed with code for 3 different cases default navigation, mobile navigation and sticky navigation.

I'm happy it works now but I'm eager to learn a better, simpler way.

/* Change logo and it's "home"-link for Mission Team and Mission Future pages, language dependent */
// Mission Team Home URL
add_filter( 'generate_logo_href', 'wps_missionteam_homeurl' );
function wps_missionteam_homeurl( $url ) {
// Return different link on logo for Mission Team page(s)
  if ( ! function_exists('pll_current_language') || ! is_page( array( 1620, 'wozu-mission-team', 'was-ist-mission-team', 'wie-funktioniert-mission-team', 'mission-team', 'what-is-mission-team', 'why-mission-team', 'how-does-mission-team-work', 'comment-fonctionne-mission-team', 'en-quoi-consiste-mission-team', 'pourquoi-mission-team', 'come-funziona-il-mission-team', 'cose-il-mission-team', 'perche-il-mission-team') ) ) {
      return $url;
  }
  $mission_team = 1620; // post ID of mission team "home" page (german)
  return get_permalink(pll_get_post($mission_team));
}

// Mission Team Logo (default)
add_filter( 'generate_logo', function( $logo ) {
	// Return different logo for Mission Team page(s)
	  if (is_page( array( 1620, 'wozu-mission-team', 'was-ist-mission-team', 'wie-funktioniert-mission-team', 'mission-team', 'what-is-mission-team', 'why-mission-team', 'how-does-mission-team-work', 'comment-fonctionne-mission-team', 'en-quoi-consiste-mission-team', 'pourquoi-mission-team', 'come-funziona-il-mission-team', 'cose-il-mission-team', 'perche-il-mission-team' ) )) {
	  return '/wp-content/uploads/2021/01/4MT-_Logo-by-PSYfiers_Color.svg';
  }
  // Otherwise, return our default logo
  return 
  $logo; 
} );

// Mission Future Home URL
add_filter( 'generate_logo_href', 'wps_missionfuture_homeurl' );
function wps_missionfuture_homeurl( $url ) {
// Return different link on logo for Mission Future page(s)
  if ( ! function_exists('pll_current_language') || ! is_page( array( 'mission-future', 'mission-future-family', 'mission-future-school') ) ) {
      return $url;
  }
  $mission_future = 1463; // post ID of mission future "home" page (german)
  return get_permalink(pll_get_post($mission_future));
}

// Mission Future Logo (default)
add_filter( 'generate_logo', function( $logo ) {
	// Return different logo for Mission Future page(s)
	  if (is_page( array( 'mission-future', 'mission-future-family', 'mission-future-school' ) )) {
	  return '/wp-content/uploads/2021/01/210104_Logo_mission_future_by-PSYfiers_Color_CMYK.svg';
  }
  // Otherwise, return our default logo
  return $logo; 
} );

// Mission Team and Mission Future Home URL sticky
add_filter( 'generate_sticky_navigation_logo_output', function() {
  $logourl='/wp-content/uploads/2020/12/psyfiers-logo.svg';
  if (is_page( array( 'mission-future', 'mission-future-family', 'mission-future-school' ) )) {
    $logourl='/wp-content/uploads/2021/01/210104_Logo_mission_future_by-PSYfiers_Color_CMYK.svg';
  }
  if (is_page( array( 1620, 1620, 'wozu-mission-team', 'was-ist-mission-team', 'wie-funktioniert-mission-team', 'mission-team', 'what-is-mission-team', 'why-mission-team', 'how-does-mission-team-work', 'comment-fonctionne-mission-team', 'en-quoi-consiste-mission-team', 'pourquoi-mission-team', 'come-funziona-il-mission-team', 'cose-il-mission-team', 'perche-il-mission-team' ) )) {
    $logourl='/wp-content/uploads/2021/01/4MT-_Logo-by-PSYfiers_Color.svg';
  };
return sprintf(
      '<div class="sticky-navigation-logo">
          <a href="%1$s" title="%2$s" rel="home">
              <img src="%3$s" class="is-logo-image" alt="%2$s" />
          </a>
      </div>',
      esc_url( apply_filters( 'generate_logo_href', home_url( '/' ) ) ),
      esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
      $logourl
  );
} );

// Mission Team and Mission Future Home URL mobile
add_filter( 'generate_mobile_header_logo_output', function( $output ) {
  if ( ! function_exists( 'generate_menu_plus_get_defaults' ) ) {
      return $output;
  }

  $settings = wp_parse_args(
      get_option( 'generate_menu_plus_settings', array() ),
      generate_menu_plus_get_defaults()
  );
  $logourl='/wp-content/uploads/2020/12/psyfiers-logo.svg';
  $logo_href=123;
  if (is_page( array( 'mission-future', 'mission-future-family', 'mission-future-school' ) )) {
    $logourl='/wp-content/uploads/2021/01/210104_Logo_mission_future_by-PSYfiers_Color_CMYK.svg';
    $logo_href = 1463;

  }
  if (is_page( array( 1620, 1620, 'wozu-mission-team', 'was-ist-mission-team', 'wie-funktioniert-mission-team', 'mission-team', 'what-is-mission-team', 'why-mission-team', 'how-does-mission-team-work', 'comment-fonctionne-mission-team', 'en-quoi-consiste-mission-team', 'pourquoi-mission-team', 'come-funziona-il-mission-team', 'cose-il-mission-team', 'perche-il-mission-team' ) )) {
    $logourl='/wp-content/uploads/2021/01/4MT-_Logo-by-PSYfiers_Color.svg';
    $logo_href = 1620;
  };
  return sprintf(
      '<div class="site-logo mobile-header-logo">
          <a href="%1$s" title="%2$s" rel="home">
              <img src="%3$s" data-no-lazy="1" alt="%4$s" />
          </a>
      </div>',
      esc_url( apply_filters( 'generate_logo_href' , get_permalink(pll_get_post(123))) ),
      esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
      esc_url( apply_filters( 'generate_mobile_header_logo', $logourl ) ),
      esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
  );
} );

If there are any hints for a better solution I welcome them.
Otherwise thanks again and this thread can be closed.

You can combine functions that use the same filter and add the different conditions inside the functions. That might shorten the overall code a bit.

Since you're using a few different logos throughout the site (regular, mobile, sticky), it's normal that it will take a few different filters to change them conditionally. Your code looks good :)

Thanks Tom

I do appreciate your feedback very much.

No problem! :)