Is there any other option to add JS?

  • sanuja.com

    #7515

    I created a check list for Geology Field school students on what to take for the class. I want to create a toggle button in which they can either check mark it all at once.

    I do have the script and everything is working in pure HTML/PHP pages. But couldn’t find a way to add it to WP. Then I read this, http://codex.wordpress.org/Using_Javascript

    The question is, can I use a trick in CSS to inject my JS code just for that ONE single post using may be post ID instead of modifying the Graphene headder files? I don’t like the JS getting loaded on every single page except for the single one which has the check list.

    Thanks.

    Mod

    Kenneth John Odle

    #38514

    Ideas:

    Create a custom template that includes that JavaScript and use it just for that page.

    Use a custom function in your functions.php file to include the JavaScript on just that page.

    Use the PHP widget and a shortcode to include that JavaScript on the page.

    None of these ideas are tested; I’m just thinking out loud. Does this script go in the <head> or somewhere in the <body>? That makes a difference, too, as to which idea would work better.

    You can inject content with CSS using the :before or :after pseudo class, like this:

    p.experiment:before {content: "Testing";}

    I don’t think that will allow you to add JavaScript or HTML to the content attribute, however, just plain text.

    sanuja.com

    #38515

    Just curious, what is a custom template? Yes it has to go in the head.

    Also, may be you guys know another way to make toggle without the use of JS?

    Mod

    Kenneth John Odle

    #38516
    Quote:
    Also, may be you guys know another way to make toggle without the use of JS?

    No, all the ones I’ve seen require JavaScript. Of course, I haven’t seen them all…

    Since this has to go into the <head>, try this in your child theme functions.php

    add_action ('wp_head', 'sanujajp' );
    function sanujajp() {
    if (is_single( '316' )) {
    echo "<This is the code />";
    }
    }

    You can call the function whatever you want, I chose “sanujajp” for “Sanuja JavaPress”.

    Replace “316” with the ID of the post where you want it to appear, and then place the JavaScript between the quotation marks in the echo function. You may need to escape any quotation marks in the JavaScript.

    If the JavaScript is long, you may want to put it in a file on its own, and then use this function to include it. (Just put the .js file in your child theme file.)

    add_action ('wp_head', 'sanujajp' );
    function sanujajp() {
    if (is_single( '316' )) {
    include "rollover.js";
    }
    }
    Mod

    Kenneth John Odle

    #38517
    Quote:
    Just curious, what is a custom template?

    http://codex.wordpress.org/Page_Templates#Custom_Page_Template

    But since this has to go in the <head>, I’d use the above method.

    sanuja.com

    #38518

    Thanks Kenneth,

    I am working on it now… I will let you know… and yes I edited this post. Sorry.

    sanuja.com

    #38519

    Wow…. the,

    add_action ('wp_head', 'sanujajp' );
    function sanujajp() {
    if (is_single( '316' )) {
    include "rollover.js";
    }
    }

    Works great! Thanks. The post is not published yet so you won’t be able to see it on website. However, your solution works great in preview.

    Admin

    Syahir Hakim

    #38520

    The recommended way is to use wp_enqueue_script(), but that works too.

    sanuja.com

    #38521

    This is the page, I just published it. It works fine but please let me know if you find any JS errors.

    http://sanuja.com/blog/geologists-feild-checklist

    sanuja.com

    #38522

    And of course, thank you both!

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

You must be logged in to reply to this topic.