How To Add Custom Code To Your WordPress Website (3 Quick Methods)

Adding custom code is a fact of life for pretty much all WordPress users.

Lots of services don't work on WordPress out of the box, so they usually tell you to add a little code snippet on your site to get things up and running.

Sound familiar?

You're probably here right now because you read one of those tutorial articles and need help adding your Google Analytics global site tag or something similar.

Don't worry, we've all been there!

Let's look at three quick and easy methods for inserting code into your website.

This is my preferred method for adding JavaScript because it's an easy way to apply custom both scripts site-wide and on specific pages.

If you're trying to set up Google Analytics or any other tool that requires 3rd party code, a code snippets plugin is the easiest way.

The plugin you'll need is called Header and Footer Scripts.

Once you install it, navigate to Settings > Header And Footer Scripts, and you'll see this page:

  • Save

Place your code in the box under the title that says Scripts In Header. Any code you add will be applied site-wide, so it's best for things like Google Analytics or other services that need to work on all pages.

If you need to apply scripts to a specific page or article, you can do that too.

Just navigate to whatever page you want to add code to, click Edit, then scroll all the way to the bottom of the Gutenberg editor.

You'll see a section to add scripts:

  • Save

And that's it!

Make sure your code is wrapped between <script> tags and it should work just fine.

2. Code Snippets Plugin

If you're looking for a simple, easy-to-use plugin to add custom code to your site, you should check out Code Snippets.

It's similar to Header and Footer Scripts, and offers a nice interface to insert custom code snippets across your whole site:

  • Save

The only downside with this plugin is that it doesn't give you the option to selectively run code on certain posts or pages.

If you only need to run scripts site-wide and don't think you'll need to add page-specific scripts, this plugin is a good option.

Otherwise, I'd recommend using the Header And Footer Scripts plugin for more control and customization.

3. Directly Edit Your Theme Files

If you want a more granular approach to adding JavaScript (and don't want to install any plugins), you can do so by directly editing your theme's files.

Navigate to your theme's functions.php file, and add your code like so:

//Loads script site-wide
function wpb_adding_scripts() {
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/your-script-name.js', array(), '1.0.0', true ); 
add_action('wp_head', 'wpb_adding_scripts');

For this example, and the following examples, you'll need to replace the parameters in the wp_enqueue_script function with your own values.

To make this all work, you'll also need to upload your script to this path: wp-content/themes/your-theme-name/js/your-script-name.js.

This will be true for all the following examples because the enqueuing function is set up the same way each time.

You can also name your function whatever you want, just be sure to replace the name in both the function declaration and the add_action statement.

To add a script to a specific post, you only have to add a bit more code:

//Loads script to a specific post
function wpb_adding_scripts() {
 if (is_single('100')) { 
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/your-script-name.js', array(), '1.0.0', true ); 
add_action('wp_head', 'wpb_adding_scripts');

In the code, is_single('100') is the logic that determines where the script is loaded – just replace 100 with the post ID you want to target.

The same idea applies to pages, except that the code is slightly different:

//Loads script to a specific page
function wpb_adding_scripts() {
 if (is_page ('100')) { 
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/your-script-name.js', array(), '1.0.0', true ); 
add_action('wp_head', 'wpb_adding_scripts');

Instead of is_single we now use is_page to target a specific page – like before, the number 100 just needs to be replaced by the page ID you're targeting.

The Bottom Line

Adding custom code snippets is a fact of life when working with WordPress.

Too many services out there rely on it, so it's a good idea to know how to do it just in case.

My top recommendation is the Header And Footer Scripts plugin, which I use for most coding snippets on my blog.

It gives you the option to apply code to your whole website, or to specific pages or posts of your choosing.

If you want a more straightforward solution, check out Code Snippets instead.

Their simple interface makes it easy for any WordPress user (even non-techie ones!) to add code to their site.

Code Snippets won't allow you to apply scripts to specific pages, so it's a great option for beginners who don't need fine-grained control over their code.

If you're having any trouble adding code to your WordPress site and need a bit of help, just let me know! I respond to all comments within 24 hours 🙂

  • Save

Leave a Reply

Share via
Copy link