Change WordPress logo click redirection

2 Views

I would like to change the logo redirection when clicked. Right now when you click on the logo, the user is redirected to the homepage but I want it to redirect to another site. How do I do this?

Post Views: 2

Related posts

5 comments

  1. I agree with Stu Mileham. Another way to implement what you are asking for would be to use JavaScript / jQuery.

    Save the following code to a .js file (eg. pageRedirect.js, let’s say placed in a js folder inside your theme’s root folder):

    (function($) {

    $(document).ready(function() {


        $('#pageLogo').on( "click", function(event) {
            event.preventDefault();
            window.location.assign("http://www.google.com/");
        });


    });  

})(jQuery);

    To make the previous code work, you would have to select somehow the page logo via jQuery.
    On the previous code this is achived via $(‘#pageLogo’) since I have made the assumption that your logo has an id with the value pageLogo.

    Of course, to enable your theme to use this pageRedirect.js file, you have to enqueue it by placing the following code to your theme’s functions.php file:

    /**
 * Enqueue pageRedirect script.
 */
function pageRedirect_scripts() {

        wp_enqueue_script( 'page-redirect-js', get_template_directory_uri()  . '/js/pageRedirect.js', array('jquery'), '20150528', true );
}
add_action( 'wp_enqueue_scripts', 'pageRedirect_scripts' );

    Code Explanation:

    //-jQuery selects html element with id='pageLogo'
//-when it is clicked, it calls a function in which it passes the event
$('#pageLogo').on( "click", function(event) {

    //prevents page from redirecting to homepage        
    event.preventDefault();
    //redirects to your desired webpage
    window.location.assign("http://www.google.com/");
});

  2. If you don’t have the option to change the link from admin then you will have to edit your theme’s header.php file (most likely, depends on how the theme is built though).

    Many themes have a tag similar to the following:

    <a href="<?php echo home_url();?>"><img src="logo.jpg"></a>

    You would need to change this to:

    <a href="http://siteyouwanttoredirectto.com" target="_blank"><img src="logo.jpg"></a>

    I’ve added the target tag to open the site in a new window, this is my personal preference when re-directing to a different site but it’s optional.

    Your theme files might look very different to this, it’s impossible to know for sure without seeing some code, but this should give you an idea.

    Also be aware that your changes could be overwritten by a theme update. This can be avoided by creating a child theme.

    https://codex.wordpress.org/Child_Themes

  3. Depends on your theme

    Some theme creators gives you the possibility to change the link from admin

    Some theme creators just believe that clicking the logo you need to go on homepage – so you need to edit the theme

  4. Depending upon the theme you are using, you can try one of the following options.

    1. Explore the admin options and see if the theme provides a direct way to change the link on the logo.
    2. If not found in admin options, try looking for the code in header.php. Do an inspect element on your logo and see the html code surrounding the logo file, If the code is directly present in header.php, your task is simple. Just change the code to update the URL, instead of reading it from home_url(). Something like <a href="<?php echo home_url();?>"> will need to be replaced with <a href="https://www.example.com">

    3. The other option to look for is get_custom_logo. Some themes get the logo code from this function. You can apply a filter to change the home_url just before this method is called in your theme and then remove filter afterwards. Or else you can copy the code from wordpress and update it with a differently named function say get_custom_link_logo in functions.php then where’ver your theme is using get_custom_logo you can use get_custom_link_logo instead of that.

      function get_custom_link_logo ( $blog_id = 0 ) {

      $html = "";
$switched_blog = false;

if ( is_multisite() && ! empty( $blog_id ) && (int) $blog_id !== get_current_blog_id() ) {
    switch_to_blog( $blog_id );
    $switched_blog = true;
}

$custom_logo_id = get_theme_mod( 'custom_logo' );
// We have a logo. Logo is go.
if ( $custom_logo_id ) {
    $custom_logo_attr = array(
        'class'    => 'custom-logo',
        'itemprop' => 'logo',
    );

    /*
     * If the logo alt attribute is empty, get the site title and explicitly
     * pass it to the attributes used by wp_get_attachment_image().
     */
    $image_alt = get_post_meta( $custom_logo_id, '_wp_attachment_image_alt', true );
    if ( empty( $image_alt ) ) {
        $custom_logo_attr['alt'] = get_bloginfo( 'name', 'display' );
    }

    /*
     * If the alt attribute is not empty, there's no need to explicitly pass
     * it because wp_get_attachment_image() already adds the alt attribute.
     */
    $html = sprintf( '<a href="%1$s" class="custom-logo-link" rel="home" itemprop="url">%2$s</a>',
        esc_url( "https://www.example.com" ),
        wp_get_attachment_image( $custom_logo_id, 'full', false, $custom_logo_attr )
    );
}

// If no logo is set but we're in the Customizer, leave a placeholder (needed for the live preview).
elseif ( is_customize_preview() ) {
    $html = sprintf( '<a href="%1$s" class="custom-logo-link" style="display:none;"><img class="custom-logo"/></a>',
        esc_url( "https://www.example.com" )
    );
}

if ( $switched_blog ) {
    restore_current_blog();
}

/**
 * Filters the custom logo output.
 *
 * @since 4.5.0
 * @since 4.6.0 Added the `$blog_id` parameter.
 *
 * @param string $html    Custom logo HTML output.
 * @param int    $blog_id ID of the blog to get the custom logo for.
 */
return apply_filters( 'get_custom_logo', $html, $blog_id );    }

    This might not cover all the use cases, but you get the idea. Depending upon the theme you’ll have a similar solution for your case. The important thing to figure out which case you fall under will be to identify the code where html for your logo is getting added. header.php is a good starting point.

  5. Use this javascript in the header or footer of your theme:

    <script>
document.getElementsByClassName("site-logo")[0].getElementsByTagName('a')[0].href="https://www.test.com";
</script>

    i am assuming that site-logo is the class name of your LOGO.

Comments are closed.