Changing the Logo Link in WordPress is surprisingly difficult so I wrote my first WordPress plugin

When setting up this blog, I wanted the TaskBill logo to take the visitor to our primary site when they clicked on it. I couldn’t find a way to change this anywhere in WordPress, and it turns out the only way to change this is to add some PHP code!

I write PHP code all the time, it isn’t a big deal for me, however, it seems like a lot of work to do something simple and I would have to create a child theme just for this small change. Here is the code you need to add to your themes function.php

add_filter( 'get_custom_logo', 'change_logo_url' );
function change_logo_url() {
    $logo_id = get_theme_mod( 'custom_logo' );
    $html = sprintf( '<a href="%1$s" class="custom-logo-link" rel="home" itemprop="url">%2$s</a>',
            esc_url( "https://taskbill.io" ),
            wp_get_attachment_image( $custom_logo_id, 'full', false, array(
                'class'    => 'custom-logo',
            ) )
        );
    return $html;   
} 

I searched to see if there was a plugin to manage this simple task instead, there was only one available and it was generating errors when I ran it. I also inspected the code and it changes the link using JavaScript so if Google crawls your page for example, it wouldn’t see this link.

At this point I decided this was a fantastic opportunity to learn how to create a WordPress plugin that simply adds an option in Settings called Set Logo Link and changes the logo link.

Download it here if you need to easily set your logo link and enjoy how easy it was!

Here is the code for anyone that wants to take a peak:

<?php
/**
 * @package Easy Logo Link Change
 * @version 1.0
 */
/*
Plugin Name: Easy Logo Link Change
Plugin URI: https://blog.taskbill.io/easylogolinkchange
Description: This is a simple plugin to change the URL of your logo in the top left hand corner.
Author: TaskBill.io
Version: 1.0
Author URI: http://taskbill.io
*/

// Change the Logo Link using the get_custom_logo function.
add_filter( 'get_custom_logo', 'change_logo_url' );
function change_logo_url() {
    $logo_id = get_theme_mod( 'custom_logo' );
    $html = sprintf( '<a href="%1$s" class="custom-logo-link" rel="home" itemprop="url">%2$s</a>',
            esc_url( get_option("easylogolinkchange_url") ),
            wp_get_attachment_image( $logo_id, 'full', false, array(
                'class'    => 'custom-logo',
            ) )
        );
    return $html;   
} 

// Add an option to save the custom url
function easylogolinkchange_register_settings() {
   add_option( 'easylogolinkchange_url', 'https://awesomesite.com');
   register_setting( 'easylogolinkchangeurl_options_group', 'easylogolinkchange_url', 'easylogolinkchangeurl_callback' );
}
add_action( 'admin_init', 'easylogolinkchange_register_settings' );

// Add the option to the setting in WordPress
function easylogolinkchange_register_options_page() {
  add_options_page('Easy Logo URL Set', 'Set Logo Link', 'manage_options', 'easylogolinkchange', 'easylogolinkchangeurl_options_page');
}
add_action('admin_menu', 'easylogolinkchange_register_options_page');

function easylogolinkchangeurl_options_page(){
?>
  <div>
  <?php screen_icon(); ?>
  <h2>Easy Logo Link Change</h2>
  <form method="post" action="options.php">
  <?php settings_fields( 'easylogolinkchangeurl_options_group' ); ?>
  <h3>Set the url below you would like linked to your logo.</h3>
  <table>
  <tr valign="top">
  <th scope="row"><label for="easylogolinkchange_url">Logo URL</label></th>
  <td><input type="text" id="easylogolinkchange_url" name="easylogolinkchange_url" value="<?php echo get_option("easylogolinkchange_url"); ?>" /></td>
  </tr>
  </table>
  <?php  submit_button(); ?>
  </form>
  </div>
<?php
    }

Comments

[Joseph Clarke]

Great idea on using the default site url, I’ll make that change, thanks!