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 - NOTwp_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');