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.

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.

• php
• functions
• theme-development
• logo

Share Improve this question asked Jan 22, 2020 at 17:10 Jason Is My NameJason Is My Name 37822 gold badges77 silver badges2121 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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/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.