[Resolved] Changing logo and url doesn’t work on sticky navigation

Home Forums Support [Resolved] Changing logo and url doesn’t work on sticky navigation

Home Forums Support Changing logo and url doesn’t work on sticky navigation

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1648559
    Christian Zumbrunnen

    I managed to change the logo and it’s url on certain pages.
    It doesn’t work on sticky navigation.
    As far as I see I’d need to use “generate_sticky_navigation_logo_output” filter.

    Code in below example works but uses a hardcoded url.
    So I want to replace return with sprintf to have a dynamic url.
    It would be practical to use the output of function wps_missionfuture_homeurl()

    I don’t find a way to have it working.

    Any hints?

    // 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; 
    } );
    
    add_filter( 'generate_sticky_navigation_logo_output', function( $logo ) {
    	// Return different logo for Mission Future page(s)
    	  if (is_page( array( 'mission-future', 'mission-future-family', 'mission-future-school' ) )) {
    	  return '<div class="navigation-branding"><div class="sticky-navigation-logo">
    	  <a href="/mission-future/" title="PSYfiers AG" rel="psyfiers">
    		  <img src="/wp-content/uploads/2020/12/201218_Logo_MF_byPSYfiers.svg" class="is-logo-image" alt="PSYfiers AG">
    	  </a>
      </div>
    </div> 
    	  ';
      }
      // Otherwise, return our default logo
      return $logo; 
    } );
    
    // Mission Future Logo (sticky)
    // add_filter( 'generate_sticky_navigation_logo_output', function( $logo ) {
    // 	// Return different logo for Mission Future page(s)
    // 	  if (is_page( array( 'mission-future', 'mission-future-family', 'mission-future-school' ) )) {
    //     sprintf( '<div class="navigation-branding"><div class="sticky-navigation-logo">
    // 	  <a href="%1$s" title="Mission Future by PSYfiers" rel="psyfiers">
    // 		  <img src="/wp-content/uploads/2020/12/201218_Logo_MF_byPSYfiers.svg" class="is-logo-image" alt="PSYfiers AG">
    // 	  </a>
    //   </div>
    // </div> 
    // 	  ', wps_missionfuture_homeurl() ); }
    //   // Otherwise, return our default logo
    //   return $logo; 
    // } );
    #1648952
    David
    Staff
    Customer Support

    Hi there,

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

    #1649803
    Christian Zumbrunnen

    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.

    #1650708
    Tom
    Lead Developer
    Lead Developer

    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.
        );
    } );
    #1650882
    Christian Zumbrunnen

    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.

    #1650918
    Christian Zumbrunnen

    #1652035
    Tom
    Lead Developer
    Lead Developer

    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?

    #1652067
    Christian Zumbrunnen

    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.

    #1652083
    Christian Zumbrunnen

    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
      );
    } );
    #1653339
    Tom
    Lead Developer
    Lead Developer

    That’s the one – glad you got it working πŸ™‚

    #1653619
    Christian Zumbrunnen

    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.

    #1654835
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #1654902
    Christian Zumbrunnen

    Thanks Tom

    I do appreciate your feedback very much.

    #1656142
    Tom
    Lead Developer
    Lead Developer
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.