custom post with loading script per single post

Question

I read many Q&As here on SO...(and elsewhere but they don't count...lol)
I think I follow the rules of WP.org but still it does not load the scripts.

Scenario: Custom template for post in Php:

<?php
/*
 * Template Name: YYY
 * Description: Form for YYY donation. 
 * NO FOOTER
 */
get_header(); ?>
<div id="content-yyy">

theme functions.php

function donate_adding_scripts() {
    wp_register_script('donateParsleyJs', get_template_directory_uri() . '/js/parsley.min.js', array('jquery'),'1.11.1');
    wp_enqueue_script('donateParsleyJs');
    wp_register_script('donateParsleyHeJs', get_template_directory_uri() . '/js/he.js');
    wp_enqueue_script('donateParsleyHeJs');
    wp_register_script('donateJs', get_template_directory_uri() . '/js/donateJs.js', array('jquery'),'1.11.1', true);
    wp_enqueue_script('donateJs');
}

function donate_adding_styles() {
    wp_register_script('donateStyle', get_template_directory_uri() . '/donateStyle.css');
    wp_enqueue_script('donateStyle');
}

function loadDonateScripts() {
   if (is_single()) {
       global $post;
       if($post->ID=="8436"){ // only for post Id = 8436
            add_action( 'wp_enqueue_scripts', 'donate_adding_scripts' );  
            add_action( 'wp_enqueue_scripts', 'donate_adding_styles' );  
       }
   }
}
add_action( 'wp_enqueue_scripts', 'loadDonateScripts');

As I am using a setLocal for parsleyjs I have

<script type="text/javascript">
  window.ParsleyValidator.setLocale('he');
</script>

I have several issues:

1. the addition to functions.php does not load the CSS
2. the JS scripts only load if I add $in_footer=true to functions.php file and get_footer(); to the php template
3. All that said I wish to load these only for the specific custom post (ID=8436) hence function loadDonateScripts()

I wish to have the scripts loaded(obviously...duh), preferably in the footer... Any ideas??

Answer 1

To all of you struggling to get custom scripts running from functions.php, here's how:

• WP v4.1.2
• Th post is a custom template post
• I needed to load 3 JSs - parsleyjs.js, he.js (i18n), custom_JsScript.js
• I also wanted to have the CSS on a separate file

• Only load these for a specific post

  function donate_adding_scripts() {
  if (is_singular()) {
    global $post;
    if($post->ID=='8436'){ // only for post Id = 8436
          wp_register_script('donateParsleyHeJs', get_template_directory_uri() . '/js/he.js');
          wp_enqueue_script('donateParsleyHeJs');
          wp_register_script('donateParsleyJs', get_template_directory_uri() . '/js/parsley.min.js', array('jquery'),'1.11.1');
          wp_enqueue_script('donateParsleyJs');
          wp_register_script('donateJs', get_template_directory_uri() . '/js/donateJs.js', array('jquery'),'1.11.1');
          wp_enqueue_script('donateJs');
        }
      }
  }
  
  function donate_adding_styles() {
      if (is_singular()) {
        global $post;
        if($post->ID=='8436'){  // only for post Id = 8436
              wp_register_style('donateStyle', get_template_directory_uri() . '/donateStyle.css');
          wp_enqueue_style('donateStyle');
        }
      }
  }
  add_action( 'wp_enqueue_scripts', 'donate_adding_scripts' );  
  add_action( 'wp_enqueue_scripts', 'donate_adding_styles' );  
  

ATTENTION: (after carefully checking other options)

• it only worx with is_singular() - !is_single()

• the conditional if($post->ID=='34') only worx inside these functions & not as I tried at first inside function loadDonateScripts()

• styles need wp_register_style & wp_enqueue_style - NOT wp_enqueue_script & wp_register_script as some posts might mention!!!

• add_action must be called on the functions adding the scripts themselves and NOT on the function calling them (eg. function loadDonateScripts())

• using get_template_directory_uri() while registering the scipts worx fine for both JS & CSS as long as you have the correct path

If you need to check paths, setup a custom post:

<?php
/*
 * Template Name: GetPath
 * Description: checking for current theme path. 
 */
    global $post;
    print_r($post->ID);
    print_r('<br />');
    print_r( get_stylesheet_directory_uri());
    print_r('<br />');
    print_r( get_template_directory_uri());

Create a new page with Page Template - GetPath in preview mode and just open it in your browser:

http://YOURWEBSITE_URL/?page_id=####&preview=true

You will get:

#### *(post ID num)
http://YOURWEBSITE_URL/wp-content/themes/YOUR_THEME_FOLDER_NAME
http://YOURWEBSITE_URL/wp-content/themes/YOUR_THEME_FOLDER_NAME

Answer 2

What if you completely remove the loadDonateScripts function and just add the conditional before enqueuing the scripts like in the the following:

function donate_adding_scripts() {
   if (is_single()) {
     global $post;
     if($post->ID=="8436"){ // only for post Id = 8436
        wp_register_script('donateParsleyJs', get_template_directory_uri() . '/js/parsley.min.js', array('jquery'),'1.11.1');
        wp_enqueue_script('donateParsleyJs');
        wp_register_script('donateParsleyHeJs', get_template_directory_uri() . '/js/he.js');
        wp_enqueue_script('donateParsleyHeJs');
        wp_register_script('donateJs', get_template_directory_uri() . '/js/donateJs.js', array('jquery'),'1.11.1', true);
        wp_enqueue_script('donateJs');
    }
  }
}

function donate_adding_styles() {
   if (is_single()) {
     global $post;
       if($post->ID=="8436"){ // only for post Id = 8436
          wp_register_script('donateStyle', get_template_directory_uri() . '/donateStyle.css');
          wp_enqueue_script('donateStyle');
       }
    }
}


add_action( 'wp_enqueue_scripts', 'donate_adding_scripts');
add_action( 'wp_enqueue_scripts', 'donate_adding_styles');