One of the efforts that I’ve really been working on this year on Martech Zone is providing some simple web applications that are helpful to our visitors. There’s some basic development behind these that include both PHP and Javascript (mostly jQuery).

With WordPress, there’s not a really convenient way to write pages or posts with the specific code that you want in the header, though. I don’t want the code site-wide and don’t want to slow my site down with a gigantic script file.

When I first started writing the Apps, I was doing it all in functions.php of my child theme and using is_single with the post ID number. After quite a few apps, though, my functions.php file began to get quite unruly.

A nifty solution that I came up with using the WordPress API was to add a apps directory to my child theme whose contents are read. When the filename matches the post ID, it includes the JavaScript and/or PHP file based on the file’s extension. Some of my apps have custom PHP, some just JavaScript, and some have both. This script works for any scenario!

Include JavaScript or PHP File on Post ID

Here’s the nice solution that I came up with. I’d add that I got some assistance from ChatGPT on this solution, too! Another issue with this was that I didn’t want to execute the function with every single visitor hitting every single page or post on the site, so I use WordPress’ transient method to actually cache the results in the database… in this case for 1 hour (3600 seconds). I may change it to once a day eventually, but an hour is good for now.

function include_app_file() {
    // Check if this is a single post
    if (is_single()) {
        // Get the file path of the "apps" subdirectory from the transient cache
        $apps_dir = get_transient('apps_dir');
        
        // If the cache is empty, get the file path and store it in the cache
        if (false === $apps_dir) {
            $apps_dir = get_stylesheet_directory() . '/apps/';
            set_transient('apps_dir', $apps_dir, 3600);
        }
        
        // Construct the file names based on the post ID
        $js_file_name = get_the_ID() . '.js';
        $php_file_name = get_the_ID() . '.php';
        
        // Check if the JS file exists
        if (file_exists($apps_dir . $js_file_name)) {
            // If the JS file exists, include it in the head section of the page
            wp_enqueue_script(get_the_ID(), get_stylesheet_directory_uri() . '/apps/' . $js_file_name, array(), null, true);
        }
        
        // Check if the PHP file exists
        if (file_exists($apps_dir . $php_file_name)) {
            // If the PHP file exists, include it
            include($apps_dir . $php_file_name);
        }
    }
}
add_action('wp_head', 'include_app_file');

Now I don’t even have to touch my functions.php file and my JavaScript and PHP functions are neatly organized in my apps directory! I’m not done migrating all the apps just yet… but I will be soon and then I’ll be able to rapidly develop more apps with a lot less effort.

If you’d like to use this approach, all you have to do is add this code to your child theme’s functions.php file and then add a directory called app to your child theme folder. As you’re developing your page where you want to include a specific javascript file or PHP file, you just add those files with the Post ID number as the name.

As an example, I have an app that converts rows to CSV or CSV to rows. This specific app uses JavaScript (and jQuery) only, so I just added a file to the apps directory. The post ID is 123884, so I added the file 123884.js to my apps directory, pasted my code, and I was up and running!

If you want to use this code, go for it… I’d just appreciate some credit or perhaps you can send a tip my way!

Send Douglas Karr a Tip!

Disclosure: Martech Zone is using its affiliate link for WordPress in this article.

© %currentyear% DK New Media, LLC, All Rights Reserved.