[Resolved] Wrap .site-branding-container contents in a href?

[Randy]

Hey guys!

First off, you’ve outdone yourselves with 3.0. The theme feels snappier then ever! Nice work!

Anyways, I have a scenario where I’m displaying the site logo, title, and description and I’d like to have all three elements wrapped in an href linking home. I think this might be achievable using the generate_site_title_output filter, but my PHP skills are lacking. Essentially, I wanted everything inside the .site-branding-container to be wrapped like so…

<div class="site-branding-container">
	<a href="#" title="" rel="home">
		<div class="site-logo">
			<img class="header-image is-logo-image" alt="" src="" title="" width="60" height="60">
		</div>
		<div class="site-branding">
			<p class="main-title" itemprop="headline">SITE TITLE</p>
			<p class="site-description" itemprop="description">TAGLINE</p>
		</div>
	</a>
</div>

If you could point me in the right direction I would greatly appreciate it. Thanks!

[David]

Hi there,

can you provide a link to your site – may be able to do this with some CSS – if not ill look at the PHP required.

[Randy]

https://arcaderentals.com/

[Tom]

Hi there,

Tricky one.. You could try this:

add_action( 'generate_before_logo', function() {
    echo '<a href="#">';
} );

add_filter( 'generate_site_branding_output', function( $output ) {
    return $output . '</a>';
} );

add_filter( 'generate_site_title_output', function() {
    return sprintf(
        '<%1$s class="main-title"%4$s>
            %3$s
        </%1$s>',
        ( is_front_page() && is_home() ) ? 'h1' : 'p',
        get_bloginfo( 'name' ),
        'microdata' === generate_get_schema_type() ? ' itemprop="headline"' : ''
    );
} );

Let me know 🙂

[Randy]

David & Tom,

Here’s the result…

<div class="site-branding-container">
	<a href="#"></a> <!-- Closes too early -->
	<div class="site-logo">
		<a href="#"></a> <!-- Don't really need this -->
		<a href="https://arcaderentals.com/" title="Chicago" rel="home"> <!-- or this -->
			<img class="header-image is-logo-image" alt="Chicago" src="https://arcaderentals.com/wp-content/uploads/2020/10/logo-icon.svg" title="Chicago" width="60" height="60">
		</a>
	</div>
	<div class="site-branding">
		<!-- Site title isn't loaded -->
		<p class="site-description" itemprop="description">
			Arcade + Gaming Rentals
		</p>
	</div>
	<!-- Closing a tag should go here -->
</div>

The site title no longer displays and the hrefs are a little off. I’ll leave the code as-is until you get another chance to take a look. No rush. I appreciate you guys checking into this for me!

[David]

Instead of the PHP method to inject the you could try this CSS ( remove the snippet above first):

.site-branding-container {
    position: relative;
}
.site-branding-container .site-logo > a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

[Randy]

Brilliant solution David! I should’ve considered css as opposed to jumping to a filter.

Thank you so very much for your amazing support! I’ve said it once and I’ll say it again, GP is hands down the best WP theme out there and the support is unmatched.

[David]

Glad that worked for you ! And happy to hear the great feedback !

[Author]

Posts