0

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??

0

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');
  • @czersplalce: its working; CSS is loading fine but no JSs... – Jadeye May 20 '15 at 20:36
  • error with CSS was: wp_register_style - !script; – Jadeye May 20 '15 at 20:37
  • Oops I didn't even notice that. Do you see any errors in your browser console? – czerspalace May 20 '15 at 20:41
  • the only thing there is the error for trying to set the locale: TypeError: Cannot read property 'setLocale' of undefined yielded by the lack of the scripts – Jadeye May 20 '15 at 20:47
  • I think its got something to do with: get_template_directory_uri()....not getting the currect path – Jadeye May 20 '15 at 20:48
0

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

Your Answer

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.