2. Algorithm
  3. functions - custom post with loading script per single post

functions - custom post with loading script per single post

admin2025-01-08  8

I read many Q&As here on SO...(and elsewhere but they don't count...lol)
I think I follow the rules of WP 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??

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

  • functions
  • customization
  • javascript
  • wp-enqueue-script
  • wp-enqueue-style
Share Improve this question asked May 20, 2015 at 18:41 JadeyeJadeye 13910 bronze badges
Add a comment  | 

2 Answers 2

Reset to default 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

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');
转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1736267163a1177.html

functionscustom post with loading script per single post

最新回复(0)