Jump to content

Archived

This topic is now archived and is closed to further replies.

flourishdesignstudio

Adding Scripts to Specific Pages

Recommended Posts

flourishdesignstudio    9
flourishdesignstudio

Website URL: http://flourishdesignstudio.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!

 

Share this post


Link to post
Share on other sites
Simon    247
Simon

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:

 

https://gist.github.com/Pross/8058421

Share this post


Link to post
Share on other sites
flourishdesignstudio    9
flourishdesignstudio

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;

Share this post


Link to post
Share on other sites
flourishdesignstudio    9
flourishdesignstudio

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!

Share this post


Link to post
Share on other sites
Simon    247
Simon
Can you paste your code to somewhere where its readable. Like the pastebin link at the top of the forum.

Share this post


Link to post
Share on other sites
flourishdesignstudio    9
flourishdesignstudio

Here is the Paste Bin: http://forum.pagelines.com/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!

Share this post


Link to post
Share on other sites
Simon    247
Simon
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.

https://gist.github.com/Pross/8340210

This is better code, untested mind you.

Share this post


Link to post
Share on other sites
flourishdesignstudio    9
flourishdesignstudio

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.pagelines.com/pst/p/10-cramfe/

Share this post


Link to post
Share on other sites
Simon    247
Simon
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

Share this post


Link to post
Share on other sites
flourishdesignstudio    9
flourishdesignstudio

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!

Share this post


Link to post
Share on other sites
Simon    247
Simon
oh right, there was so much javascript i couldnt see any difference.

Share this post


Link to post
Share on other sites
Simon    247
Simon
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.

Share this post


Link to post
Share on other sites
flourishdesignstudio    9
flourishdesignstudio

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.pagelines.com/pst/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!

Share this post


Link to post
Share on other sites
Simon    247
Simon
heres a simple version
https://gist.github.com/Pross/8340210
  • Like 1

Share this post


Link to post
Share on other sites
flourishdesignstudio    9
flourishdesignstudio

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!

  • Like 1

Share this post


Link to post
Share on other sites

  • Similar Content

    • chamois_blanc
      By chamois_blanc+
      I am trying to clone a container on a page. It throws the following javascript error:
      function l(b, c, e, f) { var g = m.a.f.get(b, p); if (!c) { if (g) throw Error("You cannot apply bindings multiple times to the same element."); m.a.f.set(b, p, !0) } I would appreciate guidance and a fix. Thank you
    • Jeremiah
      By Jeremiah+
      Error: editing.js?ver=930684:5 Uncaught TypeError: Cannot read property 'getData' of undefined
      I have all of the plugins disabled and I still receive the error.
      Page Editor will not load on page.
       
    • oseehys
      By oseehys+
      Can someone give me a breakthrough out here?
      I have been on the media player for like 5 hours now yet it is still not displaying on my media box or the textbox,
      its a free media player on soundclound
      Great day ahead to the developers out here...
      am trying to install the Toneden media player https://www.toneden.io/player to display my songs on sound cloud, i followed everything on the doc, but obviuosly am missing something i did everything i can for 5 hours yet no breakthrough, am using the textbox as display.
      This is the html script i used, what am i missing here? see it below
        (function() { var script = document.createElement('script') script.type = 'text/javascript'; script.async = true; script.src = 'http://sd.toneden.io/production/toneden.loader.js' var entry = document.getElementsByTagName('script')[0]; entry.parentNode.insertBefore(script, entry); }()); ToneDenReady = window.ToneDenReady || []; ToneDenReady.push(function() { ToneDen.player.create({''enter code here'' dom: '#player', urls: [''https://soundcloud.com/reginaspektor'' ] }); });
    • wesleymusgrove
      By wesleymusgrove
      I'm trying to execute some simple JavaScript inline in the style.less file of my child theme.  But it causes some LESS compiler error and completely breaks the DMS editor so I can't edit anything or use the toolbar on the frontend.
      @all-background-colors: "#D09EC8,#F2DD8B,#84e0cd,#F3904E"; @background-color: color(~`@{all-background-colors}.split(',')[Math.floor(Math.random()*@{all-background-colors}.split(',').length)]`); body { background: @background-color; } On http://less2css.org/, this snippet works and randomly changes the body's background to 1 of the 4 colors in @all-background-colors.
      Even something as simple as this anonymous function breaks the compiler:
      @color: ~`(function(){ return "red"; })()`; body { background: @color; } The only way to fix the DMS editor is to remove the JS from my style.less file, and then edit and save the LESS fallback section in the dashboard.
      I tried setting PL_LESS_DEV in my wp-config.php according to http://www.pagelinestheme.com/dms-custom-less-tips/, but it doesn't clear the cache every page refresh like it's supposed to.
      define('PL_LESS_DEV',true); Is it possible to execute this kind of JavaScript in the style.less file of a DMS child theme?
    • jfsturtz
      By jfsturtz
      Hi again.
       
      I'm aspiring to place an image on a page with a MediaBox, then define an HTML image map (<map>, <area> ...), then define an HTML <canvas> over it, then draw on the canvas with custom javascript.
       
      Before I spring $25 -- is Hooker the right guy for this job?  I know you can't support custom script; I'm fine with that -- I've got it all developed and working in JSFiddle.  I just want to know if Hooker is the right (or at least a workable) way to integrate it into my DMS2 site.
       
      Thanks.
       
      /John
×