1

I am trying to use the separate components of the_custom_logo() function to create my own display for the logo.

Please can someone inform me as to how I can access the url and the image reference separate to each other?

A lot of people have asked how to change the URL which is not the question I require an answer to. I wish to be able to manipulate the code like this (this is a basic example of my plans, so you are able to understand the two components I wish to be able to pull through):

<div class="site-branding">
    <a href="<?php get_custom_logo_url(); ?>" class="box-link">
        <img src="<?php get_custom_logo_src(); ?>" class="site-logo" alt="Logo">
    </a>
</div>

I am using a blank theme, with the logo and link already in place in the back-end of Wordpress.

Using this snippet in my header results in the logo and link to display as you would expect:

<?php the_custom_logo(); ?>

Thank you to all contributors, Jason.

1 Answer 1

5

Use wp_get_attachment_image_src to get the image properties and URL:

$logo = get_theme_mod( 'custom_logo' );
$image = wp_get_attachment_image_src( $logo , 'full' );
$image_url = $image[0];
$image_width = $image[1];
$image_height = $image[2];

Edit: Adding more information based on your comment.

The URL it points to is simply made with home_url:

esc_url( home_url( '/' ) );

Another thing often forgotten when using this method is honoring the content of the alt if it's set in the media:

$alt = get_post_meta( $logo, '_wp_attachment_image_alt', true );
if ( empty( $alt ) ) {
    // Use site title if no alt is provided.
    $alt = get_bloginfo( 'name', 'display' );
}

I'd encourage looking at the source of get_custom_logo as it would use most of this.

It's also worth mentioning if you're developing this theme for release on WordPress.org/themes - it's a requirement to use the_custom_logo or get_custom_logo over rolling out your own solution.

For this reason there is a filter for the HTML output in get_custom_logo, which might be best to use and replace the bits you need. The function get_custom_logo (used by the_custom_logo) also handle a bit more like multisite and ensuring the placeholder is there for the customizer preview. The usage would be something like this:

add_action( 'get_custom_logo', function( $html ) {
    $new_url = 'href="' . get_theme_mod( 'custom_logo_url', esc_url( home_url( '/' ) ) ) .'"';
    $new_link_class = 'class="box-link"';
    $html = str_replace( 'href="' . esc_url( home_url( '/' ) ) . '"', $new_url, $html );
    $html = str_replace( 'class="custom-logo-link"', $new_link_class, $html );
    return $html;
} );

That would read a value of the theme_mod custom_logo_url which could come from a customizer control, and changes the class from .custom-logo-link to .box-link in your example.

2
  • Thats a great method to handle the image, is there a way to gather the link associated with the themes logo (not the link to the logo, where it will point)? I require both. Add that to your answer so I can upvote and accept c: Jan 23, 2020 at 9:09
  • That is absolutely spot on buddy, appreciate the update and the extension into the alt text. Please upvote my question if you enjoyed answering! Jan 23, 2020 at 10:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.