Site logo

[Resolved] Site Title

Home Forums Support [Resolved] Site Title

Home Forums Support Site Title

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #782827
    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!

    #783119
    Tom
    Lead Developer
    Lead Developer

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

    #783127
    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 ๐Ÿ™‚

    #783128
    Tom
    Lead Developer
    Lead Developer

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

    #783132
    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.

    #783159
    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!

    #783197
    Tom
    Lead Developer
    Lead Developer

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

    #783204
    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;
    }
    #783825
    Tom
    Lead Developer
    Lead Developer

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

    #783835
    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!

    #784213
    Tom
    Lead Developer
    Lead Developer

    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?

    #784226
    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.

    #784791
    Tom
    Lead Developer
    Lead Developer

    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>
    #785104
    Roger

    All sorted. Thanks for all your help – much appreciated, Tom! ๐Ÿ™‚

    #785118
    Tom
    Lead Developer
    Lead Developer

    You’re welcome ๐Ÿ™‚

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.