Custom Javascript to run on one page only

  • dwkelley

    (@dwkelley)


    6 years, 10 months ago

    Hello. Running a local WordPress site on Xampp currently. Using a Twenty Nineteen child theme. We are trying to install the custom javascript located here: https://auz.github.io/Bug/

    We want this to run on only one of our WordPress pages. Currently the JS files are located in twentynineteen-child/js. We haven’t been able to successfully get this to run using any recommended plug-in methods that we’ve found. There are varying functions.php resolutions we’ve found out there but we’re not sure which method to use. We’re also not sure whether to just link to the javascript, what link we would use (since it’s local) or to just paste the entirety of the code in (it’s pretty long) We did try the solution listed on WP Beginner for adding a script to one page but keep getting a parsing error when using that code. Any ideas? We’re new to adding JS to WordPress. Thank you.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    6 years, 10 months ago

    Only enqueue the script on a given page. In your child theme, something like:

    function wpfor_enqueue() {
   $myrequiredpage = 123; // set to the page in question
   if ( $myrequiredpage == get_the_ID() )
      wp_enqueue_script(....) // see https://developer.ww.wp.xz.cn/reference/functions/wp_enqueue_script/
       }
}
add_filter( 'wp_enqueue_scripts', 'wpfor_enqueue');
    Thread Starter dwkelley

    (@dwkelley)

    6 years, 10 months ago

    Thank you! – we did try this and getting a parsing error for this:

    syntax error, unexpected ‘}’

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    6 years, 10 months ago

    You should never copy code blindly. Do you think I tested it first? 🙂

    Show me the code you wrote.

    Thread Starter dwkelley

    (@dwkelley)

    6 years, 10 months ago

    Here is the code:

    function wpfor_enqueue() {
   $myrequiredpage = 5; 
   if ( $myrequiredpage == get_the_ID() )
      wp_enqueue_script('my_bugs_script', get_stylesheet_directory_uri() . '/js/bugs-min.js') 
       }
}
add_filter( 'wp_enqueue_scripts', 'wpfor_enqueue');

    We used get_stylesheet_directory instead because of it being a child theme which I believe is correct? Not terribly familiar with PHP either unfortunately but trying to learn more.

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    6 years, 10 months ago

    There’s an open brace missing after the last paren on the “if” line.

    Thread Starter dwkelley

    (@dwkelley)

    6 years, 10 months ago

    Sorry for the very delayed response – still not able to get this to work. We’ve just moved on to working on some other things for the time being. Hoping to test some more possible solutions this week that we’ve compiled online. This is the example code that the developer provides in the files:

    		<script type='text/javascript' src='bug-min.js'></script>
		<script type='text/javascript'>
			// default fruit fly bug:
			new BugController({
			});

			// default spiders:
			new SpiderController({
			});
		</script>

    We did try adding this a couple of different ways on the page that we’d like it to run on, but it hasn’t worked yet. We were wondering if perhaps we are not linking the source correctly since it’s local.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Custom Javascript to run on one page only’ is closed to new replies.