Duplicate Featured Image Remover

Origin Story

In a number of scenarios we’ve used plugins to use the first image in the post as the featured image. That’s nice in that if people forget or are unaware of the featured image it’ll happen automatically and that fits in nicely with how various themes use featured images in various layouts. Where it doesn’t work as nicely is when the featured image is shown in a way that feels duplicative in the single post view. Something like below. I was reminded of one way to solve this after reading Alan’s post yesterday. I’m also trying to do a better job of blogging more¹, commenting more, and linking back to posts.² Who knows maybe people will start believing in RSS readers again?

Function

For this example I just grabbed the HTML from the base Understrap template and set a featured image and put it in the post body as well. The exact nature of the javascript will change depending on how the theme is setup but this is fairly generic stuff and would likely work on a variety of themes. I commented up the few lines involved so you can see what each one does.

let featured = document.querySelectorAll('img')[0];//find all the images and then select the first image (you'd change this on a theme that has a detectable header image to 1 or whatever
let content = document.getElementsByClassName('entry-content')[0];//find the div with the class entry-content (you'd change this to the class or id of your content div if your theme is different)

let firstImg = content.querySelectorAll('img')[0]; //find the first image in the div with the class entry-content (you'd change this to the class or id of the content if your theme is different)

if (featured.src === firstImg.src){ //this says if the img src of the featured image and the first content image match do the following
  //firstImg.classList.add('hidden') //option for hiding it rather than removing it assuming you have a class hidden with display:none or something similar 
  firstImg.remove(); //remove the first image 
}

Here’s the codepen with the whole thing. I’m repeating my pattern of just copying code there to make life easier for sharing examples like this.

See the Pen
wordpress featured image duplicate remover by Tom (@twwoodward)
on CodePen.

Getting Javascript in Your Site

You have a few choices when it comes to adding javascript like this into your theme.

The easiest option is to add a plugin that lets you add javascript. Something like Header/Footer Scripts. Just make sure you save anything complex somewhere you can find it in case this gets deleted or whatever. Trust me on this one.

If you can’t or don’t want to use a plugin like that you still have some options. While you could append your code to your theme’s existing javascript, you’ll lose it on any upgrades and have to re-write it. That’s a pain. I’d suggest writing a tiny plugin. I promise it’s fairly pleasant for something like this and doing it will make you feel powerful and full of code-y goodness.

To make this work you need two things. The first is the PHP file that that says “Hi, I’m a plugin. Let me tell WP what to do.” and then loads your javascript. Secondly, you need your javascript. Here’s a link to super minimal template for a WordPress plugin that loads one javascript file.

The comments below tell you what the pieces do. The javscript will be whatever you put in the file but by default it will say “hello” in the console. I do that to make myself feel better that all is working as planned. Install it, activate it, and you’re 90% of the way there.

The PHP looks like this.

<?php 
/*
Plugin Name: SUPER UNIQUE JS PLUGIN
Plugin URI:  https://github.com/
Description: For stuff that's magical
Version:     1.0
Author:      YOU!!
Author URI:  http://YOURSITE.COM
License:     GPL2
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Domain Path: /languages
Text Domain: my-toolset

*/
defined( 'ABSPATH' ) or die( 'No script kiddies please!' );//helps keep out bad people


add_action('wp_enqueue_scripts', 'super_unique_load_scripts');//

function super_unique_load_scripts() {                           
    $deps = array('jquery');// you can use jquery with this just remember to use jQuery instead of $ (or alias it)
    $version= '1.0'; 
    $in_footer = true;//loads in footer    
    wp_enqueue_script('super-unique-main-js', plugin_dir_url( __FILE__) . 'js/super-unique-title-main.js', $deps, $version, $in_footer); 
}