How to Add Conditional Scripts to WordPress Using Advanced Custom Fields (ACF)

Hello everyone, I’m Pablo Ibanez, and today I’m going to share with you a step-by-step tutorial on how to add conditional scripts to your WordPress website using Advanced Custom Fields (ACF). This tutorial will cover how to insert scripts into the <head> tag and immediately after the opening <body> tag based on your site’s URL and the values stored in ACF fields.

Prerequisites:

  • A WordPress website
  • Advanced Custom Fields (ACF) plugin installed and activated

Let’s dive into the tutorial!

Step 1: Install and activate the Advanced Custom Fields plugin

First, make sure you have the Advanced Custom Fields plugin installed and activated on your WordPress website. If you haven’t installed it yet, you can download it from the WordPress plugin repository or directly from your WordPress dashboard by going to Plugins > Add New and searching for “Advanced Custom Fields”. Click “Install Now” and then “Activate” to enable the plugin.

Step 2: Create the ACF fields for storing the scripts

Now, let’s create two ACF fields where you’ll store the scripts you want to insert into your website’s head and body sections. To do this, follow these steps:

  1. In your WordPress dashboard, go to Custom Fields > Add New.
  2. Give your field group a name, like “Global Information”.
  3. Click on “Add Field” to create the first field. Name it “head_script” and set the field type to “Textarea”. This field will store the script you want to insert into the <head> tag.
  4. Click on “Add Field” again to create the second field. Name it “body_script” and set the field type to “Textarea”. This field will store the script you want to insert immediately after the opening <body> tag.
  5. In the “Location” section, set the rules to “Show this field group if Options Page is equal to Global Information”. This will make the fields available on a custom options page that we’ll create in the next step.
  6. Finally, click “Publish” to save your field group.

Step 3: Create a custom options page

Next, we’ll create a custom options page where you can easily edit the values of the “head_script” and “body_script” ACF fields. Add the following code to your theme’s functions.php file:

if (function_exists('acf_add_options_page')) {
    acf_add_options_page(array(
        'page_title' => 'Global Information',
        'menu_title' => 'Global Information',
        'menu_slug'  => 'global-information',
        'capability' => 'edit_posts',
        'redirect'   => false,
    ));
}

This code checks if the acf_add_options_page function is available (which means that the ACF plugin is active), and then creates a custom options page called “Global Information”. You’ll be able to access this page from the WordPress dashboard under the “Global Information” menu item.

Step 4: Add the custom functions to your theme’s functions.php file

Now it’s time to add the custom functions that will conditionally insert the scripts into your website based on the current site URL and the values stored in the ACF fields.

Add the following code to your theme’s functions.php file:

function add_gtm_script_to_head() {
    $current_site_url = get_site_url();
    if (strpos($current_site_url, 'ibanez.one') !== false) {
        $head_script = get_field('head_script', 'option');
        if ($head_script) {
            echo $head_script;
        }
    }
}
add_action('wp_head', 'add_gtm_script_to_head');

The add_gtm_script_to_head function retrieves the current site URL and checks if it contains ‘ibanez.one’. If it does, the function retrieves the value of the ‘head_script’ ACF field from the “Global Information” options page and outputs it within the <head> tag.

The add_gtm_noscript_after_body function follows a similar logic, but instead retrieves the value of the ‘body_script’ ACF field and outputs it immediately after the opening <body> tag.

Both functions use the appropriate WordPress hooks (wp_head and wp_body_open) to output the scripts at the desired locations in your website’s HTML structure.

Step 5: Add your scripts to the ACF fields

Now that your custom functions are in place, it’s time to add your scripts to the ‘head_script’ and ‘body_script’ ACF fields.

  1. In your WordPress dashboard, go to “Global Information”.
  2. In the “head_script” field, enter the script you want to insert into the <head> tag. For example, you might add a Google Tag Manager script like the one mentioned in the initial question.
  3. In the “body_script” field, enter the script you want to insert immediately after the opening <body> tag. This might be a Google Tag Manager noscript code or any other script you need.
  4. Click “Update” to save your changes.

Step 6: Test your website

Finally, visit your website and check the source code to verify that the scripts are being inserted correctly. If your site’s URL contains ‘ibanez.one’, you should see the scripts from the ACF fields in the <head> and <body> sections of your HTML.

If your theme doesn’t use the wp_body_open action, the add_gtm_noscript_after_body function won’t work as expected. In that case, you might need to manually add the <?php do_action('wp_body_open'); ?> code right after the opening <body> tag in your theme’s header.php file.

That’s it! You’ve now learned how to conditionally insert scripts into your WordPress website using Advanced Custom Fields. This method gives you the flexibility to easily manage and update your scripts from the WordPress dashboard without having to edit your theme’s source code.

I hope you found this tutorial helpful! If you have any questions or need further assistance, feel free to send me a message.

Posted by

Pablo Eduardo Ibáñez López

Facebook
Twitter
LinkedIn