You know why WordPress is great. You know the benefits of adding custom code to a single page or group of pages without injecting the code into all of your site's headers or footers. You either don't want to or are not comfortable hard coding any of your custom code into your functions.php, header.php or footer.php files.
I'm not going to cover any of that. Well maybe a little.
If you want to globally add custom code to all of the pages in your WordPress site, go install the Headers and Footers WordPress plugin. Full stop. Read no further.
However, if you want to add a custom piece of JavaScript to a specific page(s) and not site-wide, there's a fairly simple solution that at first may not seem obvious, but once you see it, you'll be hooked.
View Custom Fields
The first step is to show the Custom Fields section of the WordPress editor. To do this, go to the page you want to add your custom code to and in the top right corner of your screen, click on View Options.
Then, find the checkbox for Custom Fields and make sure it has a check in the box. If it's empty, click your mouse or tap on the screen to place a mark. You can now close this part of the editor by clicking on View Options again.
Add Your Custom Field
Next, create your custom field. Depending on the theme you have and any plugins you've installed, you may or may not see some existing custom fields. Don't worry about them, just leave them be.
To create your own custom field, just click the Add Field button. Give your custom field a name that you'll remember.
When creating custom fields, I prefer to name them using camel-case, whereby the first letter of the name is lowercase and the second word starts off with a capital letter - and there's no space between them.
For example: customCode
Next, paste your code into the contents of your custom field. You'll most likely want to resize the box in the editor to make sure everything is in there. Be sure to click the Add Custom Field button when you're done to save your changes.
Add the Code Snippets Plugin
Now, we need a way to add this custom code to this page and only this page. For that, we'll start by installing and activating the Code Snippets plugin for Wordpress. Once you've activated it, create a new snippet and enter the following.
function load_customCode(){
global $post;
$postid = $post->ID;
if ($postid == '6') {
$myVariable = get_post_meta( 6, 'customCode', true );
echo $myVariable;
}
}
add_action( 'wp_enqueue_scripts', 'load_customCode' );Keep in mind that you'll need to replace the value for postid with the value of the page you're targeting with this code.
The easiest way to find the Page (or Post) ID is when you're editing the page. Simply take a look at the address bar of your browser and you'll see it in there like this.
Other elements you may need to edit include the variable name (I called it "myVariable") and the function (I called it "customCode").
Next, save and activate the script and then reload your page and view the source code to see your custom code. If you did it right, it will only appear on this page.
I find that this is a clean way to add custom code to a single page in WordPress because you can easily keep track of the custom code in the WordPress Admin by viewing the custom fields. You could create a separate directory and store and then call any custom scripts from there, but I like being able to associate the code to the page and this is an easy way to do it.
Also, the Code Snippets plugin makes it easy to see all of the custom functions you've added as well as being able to activate and deactivate them at any time. This is great for troubleshooting to see if any custom code is causing unintended errors elsewhere.
This isn't the only way to add custom code to a single WordPress page, but it's one that I like. If you have another way that you prefer, please share it in the comments below. Thanks!