[Resolved] Custom tagline below logo in functions.php doesn’t work

[Tony]

Hi.
We are manually migrating a WP website from one server to another.
The following code adds a custom tagline below the logo. It’s working fine in the old website but it doesn’t work in the new one. We have tried to replicate everything: child theme, plugins, CSS etc but still no result.

There is one difference between the two installations. The old one has a ‘Navigation Logo’ option under ‘Navigation Search’ in Customising > Layout > Primary Navigation. The ‘Navigation Logo’ option is missing from the new installation and this article suggests a recent change in GP Premium.

It’s a bit tricky to provide a URL for the new website because it involves a change in local ‘hosts’ file as DNS is not updated yet.

The tagline code:

/* Tagline below logo*/

add_filter( 'generate_navigation_logo_output', 'tu_nav_logo_tagline' );
function tu_nav_logo_tagline( $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()
    );

    return sprintf(
        '<div class="site-logo sticky-logo navigation-logo">
<a href="%1$s" title="%2$s" rel="home">
            <img src="%3$s" alt="%4$s" />
<div class="nav-tagline">
                &nbsp;&nbsp;Business Vehicle Tracking
            </div>
</a>
        </div>',
       esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
        esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
        esc_url( apply_filters( 'generate_navigation_logo', $settings['sticky_menu_logo'] ) ),
        esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
    );
}

add_filter( 'generate_mobile_header_logo_output', 'tu_mobile_header_logo_tagline' );
function tu_mobile_header_logo_tagline( $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()
    );

    return sprintf(
        '<div class="site-logo mobile-header-logo">
            <a href="%1$s" title="%2$s" rel="home">
                <img src="%3$s" alt="%4$s" />
                <span class="nav-tagline">
                    &nbsp;&nbsp;Business Vehicle Tracking
                </span>
            </a>
        </div>',
        esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
        esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
        esc_url( apply_filters( 'generate_mobile_header_logo', $settings['mobile_header_logo'] ) ),
        esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
    );
}

[Leo]

Hi there,

Super tough to tell without seeing the issue live.

However, is the only goal here to position the tagline in the customizer below logo?

If so we should only need to use a little bit of CSS instead of all that functions.

Let me know 🙂

[Tony]

Hi Leo.
Thanks for responding. The above solution was provided by GeneratePress support a couple of years ago. The only way to see this live is to give you the IP to put into your local hosts file. Should I provide it here, in the forum?
The next best thing is this screenshot.

Cheers.

Chris.

[Tom]

Hi there,

Instead of generate_navigation_logo_output, use this filter: https://docs.generatepress.com/article/generate_logo_output/

The new navigation as header option uses the regular site logo instead of introducing a new one like the old navigation logo option did.

Let me know 🙂

[Tony]

Hi Tom.

I had partial success with the following code:

/* Tagline below logo*/

add_filter( 'generate_logo_output', 'tu_logo_class', 10, 3 );
function tu_logo_class( $output, $logo_url, $html_attr ) {
	printf(
		'<div class="site-logo MY-CUSTOM-CLASS">
			<a href="%1$s" title="%2$s" rel="home">
                <img %3$s />
				<div class="nav-tagline">
                &nbsp;Business Vehicle Tracking
            </div>
			</a>
		</div>',
		esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
		esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
		$html_attr
	);
}

The problem is that the logo looks separate from the top menu. Have a look at the screenshot below. What I’m trying is to match the ‘Old Site’ functionality.

NewSite_NoSiteIdentityLogo: This is what happens when I apply the new code in the new site without selecting a logo in ‘Site Identity’.

NewSite_SiteIdentityLogo: New site and logo selected. Looks OK but…

NewSite_SiteIdentityLogo02 …when we scroll down, logo and tagline disappear.

Furthermore, menu goes below logo on window resize:
NewSite_SiteIdentityLogo03

The screenshots below are from the old site, with the functionality I’m trying to match:

OldSite_NoSiteIdentityLogo

OldSite_NoSiteIdentityLogo02

Note this one. In the old website, the Site Identity Logo from the settings is something separate from the dynamic one:
OldSite_SiteIdentityLogo

Would it be helpfull if I give you direct access? You will need to temporarily change your hosts file.
Thanks.

Chris.

[Tom]

Temporary access would be great, feel free to include the line for hosts file in the private information textarea when replying.

If you can set it up so it looks good on desktop without sticky, I can see why the other issues are happening.

[Tony]

Hi.

Please see on private section.

Thanks.

[Tom]

What if you turn on the Navigation as Header option?: https://docs.generatepress.com/article/navigation-as-a-header/

That should make the display consistent between sticky and non-sticky.

[Tony]

I followed all the steps from the above article.
In general it looks good but I still cannot add the tagline below logo. It only goes next to the logo.
Also, the tagline only shows when I un-hide Site Title as shown on the screenshot so I’m forced to delete site title text.

[Tom]

Hmm, what if you do this?:

add_action( 'generate_after_logo', function() {
    echo '<div class="site-tagline">' . get_bloginfo( 'description', 'display' ) . '</div>';
} );

Any improvement?

[Tony]

Hi Tom.
I followed your last suggestion which places the tagline next to the logo. We decided to keep it like this.

Thanks.

Chris.

[Tom]

No problem! 🙂

[Author]

Posts