How to Add a Script to a Specific Page

Community Forums Forums Design Tips and Tricks How to Add a Script to a Specific Page

This topic is: not resolved

This topic contains 14 replies, has 2 voices, and was last updated by  futurewebboss 10 months, 3 weeks ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #65030

    futurewebboss
    Participant
    Post count: 64

    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

    #65034

    braddalton
    Participant
    Post count: 9415

    There’s a script box on every page.

    Or you can conditionally load it.

    Sample code:

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


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #65040

    futurewebboss
    Participant
    Post count: 64

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

    #65047

    braddalton
    Participant
    Post count: 9415

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

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


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #65122

    futurewebboss
    Participant
    Post count: 64
    This reply has been marked as private.
    #65153

    braddalton
    Participant
    Post count: 9415

    Sorry but i cannot receive private messages.

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


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #65158

    futurewebboss
    Participant
    Post count: 64

    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>

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

    #65162

    braddalton
    Participant
    Post count: 9415

    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.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #65163

    futurewebboss
    Participant
    Post count: 64

    Going way beyond my knowledge at this point.

    #65206

    futurewebboss
    Participant
    Post count: 64

    Brad,

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

    #65248

    braddalton
    Participant
    Post count: 9415

    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?


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #65259

    futurewebboss
    Participant
    Post count: 64

    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.

    #66177

    futurewebboss
    Participant
    Post count: 64

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

    #66178

    futurewebboss
    Participant
    Post count: 64

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

    #66180

    futurewebboss
    Participant
    Post count: 64

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

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.