How to Add a Script to a Specific Page

[futurewebboss]

This is a bit of an advanced topic but I'm hoping someone can help me out. I am creating a video sales letter that I want to put on a site that is using the Lifestyle theme. I plan on using the landing page template. Now what makes this unique is that the page will have a video sales letter that I want to support with a unique script that will reveal the buy button after a given number of seconds have passed. I am sure that many of you have experienced these. The video plays and then at a specific point in the video, presto chango, the buy button magically appears. The java script should go in the head section. Now I know that Genesis Simple hooks might be integral in this but would have to identify a specific page so that the script only executes given the specific page. The other option would be to create a new page template (I guess) and then hard code the java script into the new page template. Am open to anyone who has any suggestions or who can donate any code on this.
Thanks in advance,

Dan

[Brad Dalton]

There's a script box on every page.

Or you can conditionally load it.

Sample code:

https://gist.github.com/braddalton/5943226

---

Tutorials for StudioPress Themes.

[futurewebboss]

Wow! Thanks for the quick response.
This code would go in the head portion of genesis simple hooks?

[Brad Dalton]

At the end of your child themes functions.php file.

You will need to modify it slightly to suit your own needs.

---

Tutorials for StudioPress Themes.

[futurewebboss]

This reply has been marked as private.

[Brad Dalton]

Sorry but i cannot receive private messages.

You can contact me using the form on my site http://wpsites.net/contact/

---

Tutorials for StudioPress Themes.

[futurewebboss]

Brad,

Not sure I understand exactly what to do here and where to exactly place the script I have. In the example you provide there are two places where it says “your script”. Does this mean I have to put my script in both places? Sorry to be such a pain but want to get this right and do appreciate your time.

Dan

FYI here is my script.
———–Script In The Header———

<script type=”text/javascript”>
//hidden buy button
function showIt() {
document.getElementById(“hid”).style.display = “block”;
document.getElementById(“lf”).style.display = “block”;
}
setTimeout(“showIt()”, 300000); // Time in Seconds x 1000
</script>

—————————————-

———–On the Page —————–

<div align=”center” id=”hid” style=”display:none;”>

Hidden Content Goes Here

</div>

—————————————-

[Brad Dalton]

You need to paste the script into a file in a js folder in your child theme unless its hosted already.

Then add the script name to the code.

Otherwise use the scripts box under all edit screens.

---

Tutorials for StudioPress Themes.

[futurewebboss]

Going way beyond my knowledge at this point.

[futurewebboss]

Brad,

Question.......
1. Paste the script in a file is pretty straight forward, but what would the file extension be?

[Brad Dalton]

If you save it as a .js file then it will be js as indicated in the code.

/js/your-script.js

and you can create a new folder and name it js as well.

The name will be your-script

Any reason you don't want to use the scripts box?

---

Tutorials for StudioPress Themes.

[futurewebboss]

Actually, now that you mention it I hadn't thought of looking for it. So we're saying that the scripts box can take this same code when I create a new page? This is obviously the best but hadn't even noticed it. I will test it.

[futurewebboss]

Well the script in the script box did not work. Any ideas as to maybe why?

[futurewebboss]

Actually, it kind of does work but it displays the hidden content not below the video but at the top of the page. Hm?

[futurewebboss]

Horray!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Got it working.

[Author]

Posts