← All posts

Replace a WordPress Plugin with Scoped Code in Scripts Organizer

performance

Many small WordPress plugins have no settings at all, so their CSS and JavaScript load on every page of your site, even pages that never use the feature. In this video we turn off one of these plugins, a click-to-copy tool for code blocks, and rebuild it as a Scripts Organizer script that loads only on one custom post type. You end up with one less active plugin, and the code only loads where it is needed.

The problem: a plugin that runs everywhere

A plugin with no options can't be limited to part of your site. Our example is Code Click-to-Copy by WPJohnny (version 0.1.2). It finds code blocks on the page and adds a click-to-copy feature: click inside a code block and the whole snippet is copied to your clipboard.

On our site, the code blocks are only used in a custom post type called Docs. The plugin doesn't know that, so it hooks into every page. Here is the test site setup:

  • Code Click-to-Copy by WPJohnny: the plugin we want to replace
  • Custom Post Type UI: creates the Docs post type
  • Scripts Organizer: will hold the replacement code
  • Syntax-highlighting Code Block (with Server-side Rendering): colors the code blocks

Step 1: Disable the plugin and open its source

The first step is to turn the plugin off so the old code and the new code don't run together and conflict.

  1. Go to Plugins and click Deactivate under Code Click-to-Copy by WPJohnny.
  2. Check a post with a code block. Click-to-copy should no longer work.
  3. Download and unzip the plugin, then open it in a code editor. This plugin is a single PHP file, wpj-code-click-to-copy.php.

The file hooks one function into the footer with add_action('wp_footer', 'codecopy_activate');. That function prints a tooltip div with inline styles, followed by a <script> block. The script positions the tooltip, copies the code block text on click, and attaches itself to every code element on the page. Only this HTML and JavaScript needs to move. The PHP wrapper can stay behind.

Step 2: Recreate it as a Scripts Organizer script

In Scripts Organizer, the same code goes into one script that you control, instead of a plugin you can't configure.

  1. Go to Scripts Organizer → Scripts and add a new script. We named ours Click to copy and published it.
  2. Under Script Location, enable both Header and Footer.
  3. Paste the tooltip div and the <script> block from the plugin file into the Footer Script editor.

The original tooltip div has all its styling inline. To make it easier to read, we moved those styles into a class in the Header Script, putting each property on its own line:

<style>
  .codecopy_tooltip{
    display: inline-block;
    background: #333;
    color: white;
    padding: 0 8px;
    font-size: 14px;
    border-radius: 2px;
    border: 1px solid #111;
    position:absolute; display: none;
  }
</style>

Next, remove the inline style attribute from the div in the footer so the styles aren't duplicated. The first line of the footer script becomes:

<div class="codecopy_tooltip" >Click to Copy</div>

The rest of the footer script is the plugin's JavaScript, unchanged (codecopy_get_element_position, codecopy_apply and the document.querySelectorAll("code") loop). Save the script and test it. Click-to-copy now works again, on both regular posts and the custom post type.

Step 3: Load it only on the post type that needs it

At this point the script still runs site-wide, just like the plugin did. What makes this approach worth it is limiting it to the place it's used.

  1. Under Trigger Location, select Conditions.
  2. Under Template, switch from All to Post Type.
  3. In Select Post Types, choose documentation (our Docs post type).
  4. Click Update.

Now reload a regular post. Click-to-copy no longer loads there. Open a Docs entry and it works as before. The code loads only on the post type that has code blocks.

Who is this for

  • Site builders who want fewer plugins: small single-purpose plugins can often become a single script you manage in one place.
  • Developers tuning page performance: stop loading CSS and JS on pages that never use it.
  • Sites with documentation or tutorial post types: load code-related features only where the code blocks are.
  • Anyone using a plugin with no settings: you get the loading control that the plugin doesn't give you.

FAQ

How do I stop a WordPress plugin from loading on every page?

If the plugin is small and has no settings, deactivate it and move its CSS and JavaScript into a Scripts Organizer script. Then set Trigger Location to Conditions and choose where it should load, such as a specific post type.

Can I load a script only on a custom post type?

Yes. In the script's settings, set Trigger Location to Conditions, choose Post Type under Template, and select your post type in Select Post Types. In the video we used the Docs (documentation) post type.

Why disable the plugin before adding the code to Scripts Organizer?

If both are active, the same code runs twice and can conflict. In the video we deactivate the plugin first, then confirm click-to-copy has stopped working before adding the script.

Do I need to keep the plugin's PHP?

Not for this plugin. Its PHP only prints HTML and JavaScript into the footer. Scripts Organizer's Footer Script does the same job, so we copied just the markup and script.

Get Scripts Organizer → dplugins.com

Related posts