[Resolved] Site Title

[Roger]

I need to customize the site title, with a different site title on each of the Homepage and 3 other pages of the site.

I can see in the forum that there has been advice on how to achieve something similar with a different logo, but I’d like to do this with a mix of the text and/or logo.

Grateful for your help with this!

[Tom]

Hi there,

You could try this:

add_filter( 'generate_site_title_output', function( $output ) {
    $title = get_bloginfo( 'name' );
    $url = esc_url( apply_filters( 'generate_site_title_href', home_url( '/' ) ) );

    if ( is_page( 10 ) ) {
        $title = 'A different title for a page with the ID: 10';
        $url = 'https://example-url.com';
    }

    if ( is_page( 22 ) ) {
        $title = 'Another different title for a page with the ID: 22';
        $url = 'https://example-url.com';
    }

    if ( is_page( 50 ) ) {
        $title = 'One more title for a page with the ID: 50';
        $url = 'https://example-url.com';
    }

    return sprintf(
        '<%1$s class="main-title" itemprop="headline">
            <a href="%2$s" rel="home">
                %3$s
            </a>
        </%1$s>',
        ( is_front_page() && is_home() ) ? 'h1' : 'p',
        $url,
        $title
    );
} );

Let me know 🙂

[Roger]

Thanks, Tom. That works like a charm!

A couple of connected changes that I could use your help with too if you don’t mind!

– how do I customize the URL below each site title?
– how can I apply the same change to the sticky navigation?
– what would I need to do to customize the site tagline for each site title?

Thanks so much 🙂

[Tom]

1. I just edited the code above to include custom URLs.

2. The navigation doesn’t currently have a site title option – it only uses the navigation logo.

The code to change the navigation logo is similar:

add_filter( 'generate_navigation_logo', function( $logo ) {
    if ( is_page( 10 ) ) {
        $logo = 'URL TO CUSTOM LOGO';
    }

    return $logo;
} );

3. The code for the site tagline is similar as well:

add_filter( 'generate_site_description_output', function( $output ) {
    $tagline = html_entity_decode( get_bloginfo( 'description', 'display' ) );

    if ( is_page( 10 ) ) {
        $tagline = 'A custom tagline';
    }

    return sprintf(
        '<p class="site-description" itemprop="description">
            %1$s
         </p>',
        $tagline
    );
} );

Hope this helps 🙂

[Roger]

Thanks again, Tom 🙂

1. Custom URLS all working perfectly.

2. I implemented the instructions in post #224948 to put a site title in the sticky navigation for the homepage, but wonder if there’s a way I can customize that simply so that it’s in line with the custom site titles that I now have in the main navigation?

3. I’ve implemented this code (and corrected $taglie to $tagline in the second line), but it doesn’t seem to be working.

[Roger]

I’ve sorted the tagline – just needed to activate the tagline in the WordPress customizer. Thanks for that.

Only the second point re. the sticky nav still to figure out!

[Tom]

What’s the exact code you’re using for the navigation site title?

[Roger]

HTML (inside_navigation hook):

<div class="menu-site-title">
        <a href="SITE URL">site title</a>
    </div>

CSS:

.menu-site-title {
	display: none;
}

.menu-site-title a,
.menu-site-title a:visited {
	color: #42CBC0;
	float: left;
	font-size: 45px;
	font-family: montserrat;
	font-weight: 600;
	letter-spacing: -5px;
	text-transform: lowercase;
	padding-top: 1%;
	padding-bottom: 1%;
}

.navigation-stick .menu-site-title {
	display: block;
}

[Tom]

So your hook would end up looking like this:

<div class="menu-site-title">
    <?php if ( is_page( 10 ) ) : ?>
        <a href="https://edge.fusst.com">edge</a>
    <?php endif; ?>

    <?php if ( is_page( 20 ) ) : ?>
        <a href="https://edge.fusst.com">Another title</a>
    <?php endif; ?>
</div>

Then you’d just need to check the “Execute PHP” checkbox 🙂

[Roger]

Thanks Tom. That works perfectly for the custom titles and URLs. Just need to figure out how to add the custom taglines in there too.

And how can I do the same (add the custom titles, URLs and taglines) for the mobile header?

Thanks a million for your help with this – it’s going to be super valuable for a bunch of sites!

[Tom]

You want a tagline in your navigation/mobile header? Would it fit?

The idea would be identical to the above. I assume you’re adding the site title to the mobile header using the same Hook method?

[Roger]

Yes, I’ve got the custom site titles and URLS working now via a hook in the mobile header (based on your code above) as follows:

<div class="mobile-header-content">
    <?php if ( is_page( 16 ) ) : ?>
        <a href="URL A">SITE TITLE A</a>
    <?php endif; ?>

    <?php if ( is_page( 18 ) ) : ?>
        <a href="URL B">SITE TITLE B</a>
    <?php endif; ?>

On the tagline, I’m using a very small font size so (unusually for this site) I do want it in the sticky nav.

[Tom]

In that case, you would just an the element under the site title element:

<a href="URL A">SITE TITLE A</a>
<span class="small-tagline">Your tagline</span>

[Roger]

All sorted. Thanks for all your help – much appreciated, Tom! 🙂

[Tom]

You’re welcome 🙂

[Author]

Posts