Archived topic
Site Title
14 replies · Started by Roger on January 15, 2019
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!
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 :)
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 :)
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 :)
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.
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!
What's the exact code you're using for the navigation site title?
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;
}
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 :)
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!
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?
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.
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>
All sorted. Thanks for all your help - much appreciated, Tom! :)
You're welcome :)