Add Custom JavaScript Snippets for the YouTube Feed Plugin

How to add custom JavaScript alongside a YouTube feed using WPCode, rather than editing theme files.

Would you like to add your own JavaScript to your YouTube feed?

In this guide, we’ll show you 2 ways to do it. The first uses the Custom JavaScript box that’s built into the YouTube Feed plugin. The second uses WPCode, a free plugin from the makers of WPForms and All in One SEO. Both examples add a short note to the end of your feed.

Before you get started, make sure the YouTube Feed plugin is installed and activated on your site.

• Using the Custom JavaScript Box
• Using WPCode
• Running Your Code When More Videos Load
• Frequently Asked Questions

Using the Custom JavaScript Box

To get started, we’ll open the Custom JavaScript box. It’s the quickest way to add JavaScript, because it’s part of the plugin.

In your WordPress dashboard, go to YouTube Feed » Settings. Then, click the Feeds tab.

On the Feeds tab, scroll down to the Custom JavaScript box. Next, paste your code into it. For this example, we’ll paste code that adds a short note to the end of your feed.

$( '.sb_youtube' ).not( ':has(.my-feed-note)' ).append( '<p class="my-feed-note">Thanks for stopping by!</p>' );

You don’t need to add any script tags. The plugin adds your code to the page for you. The $ sign works as a shortcut for jQuery.

At the bottom of the page, click Save Changes.

Now, open a page that shows your feed. The note appears at the end of the feed.

The plugin runs your code once the videos have loaded. It runs it again each time more videos are added, such as when a visitor clicks the Load More button. That’s why the example checks for the note first. Without that check, the note is added again each time.

How the Box Saves Your Code

The box is best for a short snippet that you save once. When you come back to the Feeds tab later, the box shows a backslash in front of every quote in your code. Each time you save the tab again, it adds more, so the code in the box no longer matches what you typed.

If you plan to edit your code later, WPCode is a better fit. It keeps your code exactly as you wrote it.

Using WPCode

You can also add your JavaScript with WPCode. It’s a free plugin that keeps all of your custom code snippets in one place.

To begin, install and activate the WPCode plugin. Then, go to Code Snippets » Add Snippet.

On the Add Snippet page, hover over the box named Add Your Custom Code (New Snippet). Then, click + Add Custom Snippet.

In the window that opens, choose JavaScript Snippet.

First, type a title for your snippet. Then, paste your code into the code box.

For this example, we’ll use code that adds the same short note to the end of your feed. Unlike the first example, it doesn’t use jQuery. This makes it safe on pages that don’t load it.

document.addEventListener( 'DOMContentLoaded', function() {
	document.querySelectorAll( '.sb_youtube' ).forEach( function( feed ) {
		var note = document.createElement( 'p' );
		note.className = 'my-feed-note';
		note.textContent = 'Thanks for stopping by!';
		feed.appendChild( note );
	} );
} );

You don’t need to add any script tags. WPCode adds them for you. The code box starts with a script line you can’t edit.

Next, find the Location field and click it. Then, choose Site Wide Footer. This adds your code at the bottom of your pages.

At the top of the page, click the toggle to switch the snippet from Inactive to Active.

Then, click Save Snippet.

Once the snippet is active, the note appears at the end of your feed on the pages that show it, just like in the first example.

If you only want the code on certain pages, WPCode can limit where a snippet runs. See the WPCode documentation for how.

Running Your Code When More Videos Load

A WPCode snippet runs once, when the page finishes loading. The Custom JavaScript box also runs again when more videos are added, such as after a click on Load More.

To get the same result with WPCode, define a function named window.sbyCustomJS in your snippet. The plugin calls it after the first videos load and again each time more are added. This is the same function the Custom JavaScript box creates, so use one or the other, not both.

window.sbyCustomJS = function() {
	document.querySelectorAll( '.sb_youtube' ).forEach( function( feed ) {
		if ( feed.querySelector( '.my-feed-note' ) ) {
			return;
		}
		var note = document.createElement( 'p' );
		note.className = 'my-feed-note';
		note.textContent = 'Thanks for stopping by!';
		feed.appendChild( note );
	} );
};

Use this code in place of the earlier WPCode example, and keep the same steps. If you’re changing the snippet you already saved, the Save Snippet button reads Update instead. The check at the top keeps the note from being added again each time the function runs.

That’s it! You can now add your own JavaScript to your YouTube feed with the Custom JavaScript box or a WPCode snippet. Next, you may want to see how to set up the YouTube Feed Pro plugin.

Frequently Asked Questions

Below, we’ve answered some of the most common questions about adding custom JavaScript to your feed.