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

Joseph Clarke — Tue, 30 Jun 2020 18:26:18 +0000

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
    }

CableReady is Magic

Joseph Clarke — Sun, 28 Jun 2020 21:03:00 +0000

CableReady makes it possible to create a real-time updating dashboard with zero Javascript written by you. With CableReady you can have an ActiveJob render an updated partial and then tell CableReady to update the div with the new HTML.

For our example, let’s say we have an application that executes a task every minute that makes a call to a Twitter API to search for tweets that contain a keyword. If there are new results found, we want to update the user’s dashboard that created the search.

The first thing you need to do is add CableReady to your project using bundler and yarn:

bundle add cable_ready
yarn add cable_ready

We only want the updates to go to the user that created the search. You can do that by creating a UserChannel and setting the stream_for name with the signed in users id.

Create the channel with the following command:

bundle exec rails generate channel user

Edit the auto generated user_channel and rename the stream_for to include the id of the current logged in user.

app/channels/user_channel.rb
class UserChannel < ApplicationCable::Channel 
  def subscribed 
     stream_for "user_channel_#{current\_user.id}"
  end
end

Edit the user_channel.js JavaScript to include the CableReady magic.

app/javascript/channels/user_channel.js
import CableReady from 'cable_ready'
import consumer from './consumer'consumer.subscriptions.create('UserChannel', { received (data) { 
  if(data.cableReady) CableReady.perform(data.operations) 
}
})

In our dashboard view, simply render a partial and make sure you wrap it in a div tag.

app/views/dashboard.html.erb
<div id="dashboard_tweets"> 
  <%= render partial: "tweets", locals: {tweets: @tweets} %> </div>

In our ActiveJob code, make sure you include the CableReady broadcaster . We then make a call to fetch the new tweets from our Twitter API.

Then the magic comes into play, we render the updated partial in our job and send it over the WebSocket using Cable Ready.

We do this by giving cable ready our user channel name we created above and include the user id of the person who owns the search. We tell it to replace the inner_html of the given selector of our dashboard_tweets div with the HTML partial we rendered in tweets_html.

app/jobs/fetch_tweets\_job.rb
class FetchTweetsJob < ApplicationJob 
  include CableReady::Broadcaster queue_as :default 

   def perform(search_id) 
     search = Search.find(search_id) tweets = 
     search.fetch_new_tweets 

     # Render the HTML Partial with the new data from tweets 
     tweets_html = ApplicationController.renderer.render( 
       partial "dashboard/tweets", locals" { tweets: tweets}) 

     # Tell CableReady what to update   
 cable_ready["user:user_channel_{search.user_id}"].inner_html( 
    selector: "#dashboard_tweets", 
    html: tweets_html ) 

# Broadcast the changes. cable_ready.broadcastend

That’s it as soon as you sent the cable_ready.broadcast command the users dashboard will be updated automatically.

For more information on all of the awesome things you can do with CableReady, check out the documentation at https://cableready.stimulusreflex.com/.

If you need help using CableReady, feel free to comment below!

DEV Community: Joseph Clarke

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

CableReady is Magic