How to Change the Logo on Specific Pages?

This helpful guide will show you how to change the regular logo to your own custom logo on certain pages of your WordPress website. This personalization can make your site look better and help with your brand, giving your visitors a special experience.

Before you begin, make sure you have the following in place:

• A WordPress Website: Ensure that you have an active WordPress website.
• Basic PHP and WordPress Theme Development Knowledge: Familiarity with PHP and WordPress theme development basics will be helpful.

How to Change the Logo of a Specific Page

Before you make any customizations, it’s a best practice to create a child theme to avoid affecting your main theme. If you already have a child theme, you can skip this step. Now, follow these steps to change the logo on specific pages:

1. Login to your WordPress website.
2. Navigate to Appearance > Theme Editor.
3. Select the Child theme from the right-top corner dropdown.
4. Open the `functions.php` and Insert the following code snippet at the end of the file.
5. After adding the code, click on the “Update File” button.

function custom_astra_logo_output( $html ) {

    // Check if the current page has the slug "example-page".
    if ( is_page( 'example-page' ) ) {

        // Use a custom logo image URL for this specific page.
        // Replace the URL below with your own logo file.
        $custom_logo_url = 'URL_OF_YOUR_CUSTOM_LOGO_FOR_THIS_PAGE';

        // Build the HTML for the custom logo.
        // Note: Since this uses a raw URL, no `srcset` will be generated.
        $html = sprintf(
            '<a href="%1$s" class="custom-logo-link" rel="home" itemprop="url">
                <img src="%2$s" class="custom-logo-class" alt="%3$s">
            </a>',
            esc_url( home_url( '/' ) ),
            esc_url( $custom_logo_url ),
            esc_attr( get_bloginfo( 'name' ) )
        );

    } else {
        // Fallback: use the default site logo set in the WordPress Customizer.

        // Get the attachment ID of the logo set in Customizer.
        $custom_logo_id = get_theme_mod( 'custom_logo' );

        if ( $custom_logo_id ) {
            // Generate full <img> markup with srcset support.
            $logo_img = wp_get_attachment_image(
                $custom_logo_id,
                'full',
                false,
                array(
                    'class'    => 'custom-logo',
                    'itemprop' => 'logo',
                    'alt'      => get_bloginfo( 'name' ),
                )
            );

            // Wrap the logo image in a link to the homepage.
            $html = sprintf(
                '<a href="%1$s" class="custom-logo-link" rel="home" itemprop="url">%2$s</a>',
                esc_url( home_url( '/' ) ),
                $logo_img
            );
        }
    }

    return $html;
}
add_filter( 'get_custom_logo', 'custom_astra_logo_output' );

This code will enable you to display a custom logo on specific pages. Ensure that you replace `‘URL_OF_YOUR_CUSTOM_LOGO_FOR_THIS_PAGE’` with the actual URL of the custom logo you want to display on the specific page.

Finally, visit the specific page (e.g., “example-page”) on your website to see the custom logo displayed. Other pages should still display the default logo.

We hope this document has been helpful. Please feel free to leave a comment below if you have any queries.