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 a specific slug (e.g., "example-page").
    if (is_page('example-page')) {

        // Replace this URL with the URL of the custom logo for the specific page.
        $custom_logo_url = 'URL_OF_YOUR_CUSTOM_LOGO_FOR_THIS_PAGE';
    } else {


        // Get the default custom logo set in WordPress.
        $custom_logo_id = get_theme_mod('custom_logo');
        $custom_logo_url = wp_get_attachment_image_url($custom_logo_id, 'full');
    }

    // Customize the logo HTML output.
    $html = sprintf(
        '<a href="%1$s" class="custom-logo-link" rel="home" itemprop="url"><img src="%2$s" class="custom-logo" alt="%3$s"></a>',
        esc_url(home_url('/')),
        esc_url($custom_logo_url),
        esc_attr(get_bloginfo('name'))
    );

    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.