Jump to content


Photo
- - - - -

Adding Scripts to Specific Pages

javascript

Best Answer Simon_P , 09 January 2014 - 11:21 PM

heres a simple version
Go to the full post


  • Please log in to reply
14 replies to this topic

#1 flourishdesignstudio

flourishdesignstudio

    Advocate

  • Members

  • 265 posts
  • LocationIthaca, New York
  • Framework Version:all
  • Country: Country Flag

Posted 20 December 2013 - 02:58 PM

Website URL: http://flourishdesig...biz/wordpress1/
Framework Version: 1.1.2
 

I am working on a site where there are 2 pages that need to have scripts. I do not want to put the scripts in the Custom Scripts editor area because I do not want every single page on the site to load the scripts, just the two specific pages. Can you please advise on the best way to accomplish this?

 

I was thinking that if I made two new page templates (one for each page that requires a special script) I could somehow insert the script just for that page and then apply that template to the specific page. I have searched the forums and documentation but cannot find the best way to accomplish this. How can I best accomplish this is DMS?

 

Thank you in advance for your help! It is much appreciated!

 



#2 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 20 December 2013 - 05:35 PM

There is no way to do it in the scripts area, it is not page specific.

 

You will have to use a PHP/WordPress action. Something like this in your child theme functions.php file:

 



#3 flourishdesignstudio

flourishdesignstudio

    Advocate

  • Members

  • 265 posts
  • LocationIthaca, New York
  • Framework Version:all
  • Country: Country Flag

Posted 06 January 2014 - 07:04 PM

Hi Simon,

 

Thank you for the help on this. I am currently using a child theme and I used your example above as a base for adding the scripts. Once I save and uploaded the new functions.php the site broke and I had to revert back to a backup of the function.php file.

 

Here is the entire functions.php file document that did not work. I am completely new to javascript so any help would be extremely appreciated! I have inserted my page IDs and pasted the old javascript from another site into the code you see below:

 

 
<?php


// Load Framework - don't delete this
require_once( dirname(__FILE__) . '/setup.php' );


// Load our shit in a class cause we're awesome
class YourTheme {


function __construct() {


// Constants
$this->url = sprintf('%s', PL_CHILD_URL);
$this->dir = sprintf('/%s', PL_CHILD_DIR);


// Add a filter so we can build a few custom LESS vars
add_filter( 'pless_vars', array(&$this,'custom_less_vars'));


$this->init();
}


function init(){


// Run the theme options
$this->theme_options();


// Send the user to the Theme Config panel after they activate.
add_filter('pl_activate_url', array(&$this,'activation_url'));
}


// Send the user to the Theme Config panel after they activate. Note how link=nb_theme_config is the same name of the array settings. This must match.
function activation_url( $url ){


   $url = home_url() . '?tablink=theme&tabsublink=nb_theme_config';
   return $url;
}


// Custom LESS Vars
function custom_less_vars($less){


// Adding a custom LESS var, use this in LESS as @my-var. In this example, its linked to a custom color picker in options. We also must set a default or else it's going to error.
// pl_hashify must be used with color pickers so that it appends the # symbol to the hex code
// pl_setting is being used because this is a global option used in the theme
$less['my-var']   =  pl_setting('my_custom_color') ? pl_hashify(pl_setting('my_custom_color')) : '#07C';


return $less;
}


    // WELCOME MESSAGE - HTML content for the welcome/intro option field
function welcome(){


ob_start();


?><div style="font-size:12px;line-height:14px;color:#444;"><p><?php _e('You can have some custom text here.','nicks-base-theme');?></p></div><?php


return ob_get_clean();
}


// Theme Options
function theme_options(){


$options = array();


$options['nb_theme_config'] = array(
  'pos'                  => 50,
  'name'                 => __('Nicks Base Theme','nicks-base-theme'),
  'icon'                 => 'icon-rocket',
  'opts'                 => array(
   array(
           'type'        => 'template',
             'title'       => __('Welcome to My Theme','nicks-base-theme'),
             'template'    => $this->welcome()
       ),
       array(
          'type'         => 'color',
          'title'        => __('Sample Color','nicks-base-theme'),
          'key'          => 'my_custom_color',
          'label'        => __('Sample Color','nicks-base-theme'),
          'default'      =>'#FFFFFF'
       ),
  )
);
pl_add_theme_tab($options);
}


add_action( 'wp_head', 'add_my_head_scripts' );
function add_my_head_scripts() {


   $allowed = array( 1201 ); // <= add page ID's here where you want the script.


   // if NOT an allowed page do nothing.
   if( ! is_page( $allowed ) )
       return;


   // now show the script code...
   ?>
   <!--- scripts action from functions.php --->
   <script language="JavaScript">
function round(number,X) {
// rounds number to X decimal places, defaults to 2
X = (!X ? 2 : X);
return Math.round(number*Math.pow(10,X))/Math.pow(10,X);
}
                            
function Calculate_Density(){
var CoreDEP
var CoreWT
var DryMatter
var i


for (i = 0;i < window.document.frmCalculator.radDEPTH.length;i++){
if (window.document.frmCalculator.radDEPTH[i].checked){
break
}
}




if (window.document.frmCalculator.radDEPTH[i].value == "INCHES") {
CoreDEP = Math.floor(window.document.frmCalculator.txtDepth.value)


if ((window.document.frmCalculator.txtDepth.value % 1) < .125) 
CoreDEP = CoreDEP;
else if ( ((window.document.frmCalculator.txtDepth.value % 1) >= .125) && ((window.document.frmCalculator.txtDepth.value % 1) <= .324) )
CoreDEP = CoreDEP + ".25";
else if ( ((window.document.frmCalculator.txtDepth.value % 1) >= .325) && ((window.document.frmCalculator.txtDepth.value % 1) <= .624) )
CoreDEP = CoreDEP + ".5";
else if ( ((window.document.frmCalculator.txtDepth.value % 1) >= .625) && ((window.document.frmCalculator.txtDepth.value % 1) <= .824) )
CoreDEP = CoreDEP + ".75";
else
CoreDEP = CoreDEP;


CoreDEP = (window.document.frmCalculator.txtDepth.value / 12);
}
else if (window.document.frmCalculator.radDEPTH[i].value == "CM") {


CoreDEP = Math.floor(window.document.frmCalculator.txtDepth.value)
if ((window.document.frmCalculator.txtDepth.value % 1) < .25) 
CoreDEP = CoreDEP;
else if ( ((window.document.frmCalculator.txtDepth.value % 1) >= .25) && ((window.document.frmCalculator.txtDepth.value % 1) < .75) )
CoreDEP = CoreDEP + ".5";
else
CoreDEP = CoreDEP;
CoreDEP = ((window.document.frmCalculator.txtDepth.value * .3937) / 12);


}


CoreWT = (window.document.frmCalculator.txtWeight.value * .0022046);
DryMatter = window.document.frmCalculator.txtDryMatter_Percentage.value;


window.document.frmCalculator.txtAsSampled.value = round((CoreWT / (CoreDEP * .0190726)),1)
window.document.frmCalculator.txtDryMatter.value = round((window.document.frmCalculator.txtAsSampled.value * (DryMatter /100)),1)




}


function ChangeCase(){


window.document.frmCalculator.txtFarm.value = window.document.frmCalculator.txtFarm.value.toUpperCase();


}


</script>
   <!--- end scripts action from functions.php --->
   <?php
}


add_action( 'wp_head', 'add_my_head_scripts' );
function add_my_head_scripts() {


   $allowed = array( 1410 ); // <= add page ID's here where you want the script.


   // if NOT an allowed page do nothing.
   if( ! is_page( $allowed ) )
       return;


   // now show the script code...
   ?>
   <!--- scripts action from functions.php --->
   <script language="JavaScript">
function round(number,X) {
// rounds number to X decimal places, defaults to 2
X = (!X ? 2 : X);
return Math.round(number*Math.pow(10,X))/Math.pow(10,X);
}
                            
function Calculate_Density(){
var CoreDEP1
var CoreWT1
var DryMatter1


var CoreDEP2
var CoreWT2
var DryMatter2


var CoreDEP3
var CoreWT3
var DryMatter3


var AsSampled
var DryMatter


var EnteredSites
var i


AsSampled = 0
DryMatter = 0
EnteredSites = 0




if (window.document.frmCalculator.txtDepth1.value.length > 0) {


for (i = 0;i < window.document.frmCalculator.radDEPTH1.length;i++){
if (window.document.frmCalculator.radDEPTH1[i].checked){
break
}
}




if (window.document.frmCalculator.radDEPTH1[i].value == "INCHES") {
CoreDEP1 = Math.floor(window.document.frmCalculator.txtDepth1.value)


if ((window.document.frmCalculator.txtDepth1.value % 1) < .125) 
CoreDEP1 = CoreDEP1;
else if ( ((window.document.frmCalculator.txtDepth1.value % 1) >= .125) && ((window.document.frmCalculator.txtDepth1.value % 1) <= .324) )
CoreDEP1 = CoreDEP1 + ".25";
else if ( ((window.document.frmCalculator.txtDepth1.value % 1) >= .325) && ((window.document.frmCalculator.txtDepth1.value % 1) <= .624) )
CoreDEP1 = CoreDEP1 + ".5";
else if ( ((window.document.frmCalculator.txtDepth1.value % 1) >= .625) && ((window.document.frmCalculator.txtDepth1.value % 1) <= .824) )
CoreDEP1 = CoreDEP1 + ".75";
else
CoreDEP1 = CoreDEP1;


CoreDEP1 = (window.document.frmCalculator.txtDepth1.value / 12);
}
else if (window.document.frmCalculator.radDEPTH1[i].value == "CM") {


CoreDEP1 = Math.floor(window.document.frmCalculator.txtDepth1.value)
if ((window.document.frmCalculator.txtDepth1.value % 1) < .25) 
CoreDEP1 = CoreDEP1;
else if ( ((window.document.frmCalculator.txtDepth1.value % 1) >= .25) && ((window.document.frmCalculator.txtDepth1.value % 1) < .75) )
CoreDEP1 = CoreDEP1 + ".5";
else
CoreDEP1 = CoreDEP1;
CoreDEP1 = ((window.document.frmCalculator.txtDepth1.value * .3937) / 12);


}


CoreWT1 = (window.document.frmCalculator.txtWeight1.value * .0022046);
DryMatter1 = window.document.frmCalculator.txtDryMatter_Percentage1.value;


AsSampled += (CoreWT1 / (CoreDEP1 * .0190726))
DryMatter += ((CoreWT1 / (CoreDEP1 * .0190726)) * (DryMatter1/100))
EnteredSites++;


window.document.frmCalculator.txtAsSampled1.value = round((CoreWT1 / (CoreDEP1 * .0190726)),1)
window.document.frmCalculator.txtDryMatter1.value = round(((CoreWT1 / (CoreDEP1 * .0190726)) * (DryMatter1/100)),1)


}


if (window.document.frmCalculator.txtDepth2.value.length > 0) {


for (i = 0;i < window.document.frmCalculator.radDEPTH2.length;i++){
if (window.document.frmCalculator.radDEPTH2[i].checked){
break
}
}




if (window.document.frmCalculator.radDEPTH2[i].value == "INCHES") {
CoreDEP2 = Math.floor(window.document.frmCalculator.txtDepth2.value)


if ((window.document.frmCalculator.txtDepth2.value % 1) < .125) 
CoreDEP2 = CoreDEP2;
else if ( ((window.document.frmCalculator.txtDepth2.value % 1) >= .125) && ((window.document.frmCalculator.txtDepth2.value % 1) <= .324) )
CoreDEP2 = CoreDEP2 + ".25";
else if ( ((window.document.frmCalculator.txtDepth2.value % 1) >= .325) && ((window.document.frmCalculator.txtDepth2.value % 1) <= .624) )
CoreDEP2 = CoreDEP2 + ".5";
else if ( ((window.document.frmCalculator.txtDepth2.value % 1) >= .625) && ((window.document.frmCalculator.txtDepth2.value % 1) <= .824) )
CoreDEP2 = CoreDEP2 + ".75";
else
CoreDEP2 = CoreDEP2;


CoreDEP2 = (window.document.frmCalculator.txtDepth2.value / 12);
}
else if (window.document.frmCalculator.radDEPTH2[i].value == "CM") {


CoreDEP = Math.floor(window.document.frmCalculator.txtDepth2.value)
if ((window.document.frmCalculator.txtDepth2.value % 1) < .25) 
CoreDEP2 = CoreDEP2;
else if ( ((window.document.frmCalculator.txtDepth2.value % 1) >= .25) && ((window.document.frmCalculator.txtDepth2.value % 1) < .75) )
CoreDEP2 = CoreDEP2 + ".5";
else
CoreDEP2 = CoreDEP2;
CoreDEP2 = ((window.document.frmCalculator.txtDepth2.value * .3937) / 12);


}


CoreWT2 = (window.document.frmCalculator.txtWeight2.value * .0022046);
DryMatter2 = window.document.frmCalculator.txtDryMatter_Percentage2.value;


AsSampled += (CoreWT2 / (CoreDEP2 * .0190726))
DryMatter += ((CoreWT2 / (CoreDEP2 * .0190726)) * (DryMatter2/100))
EnteredSites++;


window.document.frmCalculator.txtAsSampled2.value = round((CoreWT2 / (CoreDEP2 * .0190726)),1)
window.document.frmCalculator.txtDryMatter2.value = round(((CoreWT2 / (CoreDEP2 * .0190726)) * (DryMatter2/100)),1)


}


if (window.document.frmCalculator.txtDepth3.value.length > 0) {


for (i = 0;i < window.document.frmCalculator.radDEPTH3.length;i++){
if (window.document.frmCalculator.radDEPTH3[i].checked){
break
}
}




if (window.document.frmCalculator.radDEPTH3[i].value == "INCHES") {
CoreDEP3 = Math.floor(window.document.frmCalculator.txtDepth3.value)


if ((window.document.frmCalculator.txtDepth3.value % 1) < .125) 
CoreDEP3 = CoreDEP3;
else if ( ((window.document.frmCalculator.txtDepth3.value % 1) >= .125) && ((window.document.frmCalculator.txtDepth3.value % 1) <= .324) )
CoreDEP3 = CoreDEP3 + ".25";
else if ( ((window.document.frmCalculator.txtDepth3.value % 1) >= .325) && ((window.document.frmCalculator.txtDepth3.value % 1) <= .624) )
CoreDEP3 = CoreDEP3 + ".5";
else if ( ((window.document.frmCalculator.txtDepth3.value % 1) >= .625) && ((window.document.frmCalculator.txtDepth3.value % 1) <= .824) )
CoreDEP3 = CoreDEP3 + ".75";
else
CoreDEP3 = CoreDEP3;


CoreDEP3 = (window.document.frmCalculator.txtDepth3.value / 12);
}
else if (window.document.frmCalculator.radDEPTH3[i].value == "CM") {


CoreDEP = Math.floor(window.document.frmCalculator.txtDepth3.value)
if ((window.document.frmCalculator.txtDepth3.value % 1) < .25) 
CoreDEP3 = CoreDEP3;
else if ( ((window.document.frmCalculator.txtDepth3.value % 1) >= .25) && ((window.document.frmCalculator.txtDepth3.value % 1) < .75) )
CoreDEP3 = CoreDEP3 + ".5";
else
CoreDEP3 = CoreDEP3;
CoreDEP3 = ((window.document.frmCalculator.txtDepth3.value * .3937) / 12);


}


CoreWT3 = (window.document.frmCalculator.txtWeight3.value * .0022046);
DryMatter3 = window.document.frmCalculator.txtDryMatter_Percentage3.value;


AsSampled += (CoreWT3 / (CoreDEP3 * .0190726))
DryMatter += ((CoreWT3 / (CoreDEP3 * .0190726)) * (DryMatter3/100))
EnteredSites++;


window.document.frmCalculator.txtAsSampled3.value = round((CoreWT3 / (CoreDEP3 * .0190726)),1)
window.document.frmCalculator.txtDryMatter3.value = round(((CoreWT3 / (CoreDEP3 * .0190726)) * (DryMatter3/100)),1)


}
window.document.frmCalculator.txtAsSampled.value = round((AsSampled / EnteredSites),1)
window.document.frmCalculator.txtDryMatter.value = round((DryMatter / EnteredSites),1)




}


function ChangeCase(){


window.document.frmCalculator.txtFarm.value = window.document.frmCalculator.txtFarm.value.toUpperCase();


}
</script>
   <!--- end scripts action from functions.php --->
   <?php
}


}
new YourTheme;


#4 flourishdesignstudio

flourishdesignstudio

    Advocate

  • Members

  • 265 posts
  • LocationIthaca, New York
  • Framework Version:all
  • Country: Country Flag

Posted 09 January 2014 - 04:30 PM

@Simon_P Hm, I am still having a problem and when I use the code that you provided I get this error Message:

 

Parse error: syntax error, unexpected T_STRING, expecting T_FUNCTION in /homepages/27/d225986320/htdocs/wordpress1/wp-content/themes/CBRE-Theme/functions.phpon line 85

 

Line 85 has this part of the code: 

add_action( 'wp_head', 'add_my_head_scripts' );

 

Is there any chance you could double check and see if you/I left something out? I am completely new to JS and adding actions to a functions.php file so I am not really sure what the problem is or what I should be looking for.

 

Thank you in advance for all your help!



#5 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 09 January 2014 - 05:10 PM

Can you paste your code to somewhere where its readable. Like the pastebin link at the top of the forum.

#6 flourishdesignstudio

flourishdesignstudio

    Advocate

  • Members

  • 265 posts
  • LocationIthaca, New York
  • Framework Version:all
  • Country: Country Flag

Posted 09 January 2014 - 06:30 PM

Here is the Paste Bin: http://forum.pagelin...pst/p/9-suydqx/

 

The line numbers are slightly different here so now the part that is having a problem is farther down, line 107. Mighty the problem be something with the php tags?

 

Thank you!



#7 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 09 January 2014 - 07:21 PM

Ok problem there is..

1. you are in a php class you have to paste code into functions.
2. you have 2 functions by the same name.



This is better code, untested mind you.

#8 flourishdesignstudio

flourishdesignstudio

    Advocate

  • Members

  • 265 posts
  • LocationIthaca, New York
  • Framework Version:all
  • Country: Country Flag

Posted 09 January 2014 - 07:52 PM

Thanks @Simon_P!

 

I have changed the name of the two functions since I need one function to insert JS on one page and a second function to insert different JS on the second page. I think the following code does not solve problem #1 that you mentioned - the php class issue. Can you please advise?

 

I greatly appreciate your help with this!

 

http://forum.pagelin...st/p/10-cramfe/



#9 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 09 January 2014 - 07:54 PM

the code i posted will add the js to two pages

$allowed = array( 1201, 1410 ); // <= add page ID's here where you want the script.

you can add a 1000 pages to that array if you want

#10 flourishdesignstudio

flourishdesignstudio

    Advocate

  • Members

  • 265 posts
  • LocationIthaca, New York
  • Framework Version:all
  • Country: Country Flag

Posted 09 January 2014 - 07:57 PM

But each pages needs a different script to be added. There are two calculators - one for single samples and one for multiple samples. Each page uses a different script to run the specific calulator. The two scripts are different from one another so I need to specify which script goes to which page.

 

Would a live link be helpful for you to look at? Clearly the calculators are not currently working since the scripts are not up but it might help to see it?

 

Thanks!



#11 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 09 January 2014 - 07:58 PM

oh right, there was so much javascript i couldnt see any difference.

#12 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 09 January 2014 - 08:00 PM

Right if your going to use this code:

you have to move the add_action lines you added into the __construct() function and add $this because you are using a class, look at my example.

#13 flourishdesignstudio

flourishdesignstudio

    Advocate

  • Members

  • 265 posts
  • LocationIthaca, New York
  • Framework Version:all
  • Country: Country Flag

Posted 09 January 2014 - 10:43 PM

I adjusted the code to match yours. For the sake of simplictiy I will only post the 'Single' JS here. Once we get this to work I think it will probably be easy to then add in the second "Multiple" JS. Here is the resulting PHP:

 

http://forum.pagelin...t/rw/11-my0xwm/

 

So, that works but it then somehow messes up all the php after the script to that I get the following error at the top of my  page:

 

//END ANNAS CODE // Constants $this->url = sprintf('%s', PL_CHILD_URL); $this->dir = sprintf('/%s', PL_CHILD_DIR); // Add a filter so we can build a few custom LESS vars add_filter( 'pless_vars', array(&$this,'custom_less_vars')); $this->init(); } function init(){ // Run the theme options $this->theme_options(); // Send the user to the Theme Config panel after they activate. add_filter('pl_activate_url', array(&$this,'activation_url')); } // Send the user to the Theme Config panel after they activate. Note how link=nb_theme_config is the same name of the array settings. This must match. function activation_url( $url ){ $url = home_url() . '?tablink=theme&tabsublink=nb_theme_config'; return $url; }

 

Here is a screenshot:

Screen-Shot-2014-01-09-at-5.40.00-PM.png

 

Thank you for all your help! I really appreciate your time and effort!



#14 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 09 January 2014 - 11:21 PM   Best Answer

heres a simple version

  • flourishdesignstudio likes this

#15 flourishdesignstudio

flourishdesignstudio

    Advocate

  • Members

  • 265 posts
  • LocationIthaca, New York
  • Framework Version:all
  • Country: Country Flag

Posted 13 January 2014 - 01:40 PM

Thanks @Simon_P!

 

That worked perfectly! I greatly appreciate you taking the time to help me solve this! I am so grateful for the forum and all those who help make it the valuable resource that it is!


  • James B likes this





Also tagged with one or more of these keywords: javascript